I've done a lot of research and haven't found a definitive answer to this. Is there anyway to test the open graph on localhost? I don't haven any issues using the graph api on locahost.
I've changed my website url in the app settings and have even tried setting up a domain in my hosts file but the debugger linter for open graph tries to use the actual domain instead of my localhost and when using locahost directly the linter completely fails connecting.
Does anybody have any workarounds for this?
Using a local proxy is the right solution. ngrok didn't work for me neither.
A similar tool that did work with facebook debugger is localtunnel ✅
npm install -g localtunnel
lt --port 8000
# or using npx without installing localtunnel
npx lt --port 8000
Generates a url that looks something like https://<random_hash>.localtunnel.me/. Using this url in facebook open graph debugger worked for me as of October 18th 2017. I only had to hit Fetch new scrape information button. 🍻
Cool thing about localtunnel is that you can easily host your own localtunnel server with github.com/localtunnel/server so if it ever stops working with localtunnel.me, you can run your own somewhere in the cloud ⛅
You can use ngrok to create a random public subdomain that routes to your local webserver very easily, even through NAT or firewalls.
Just download ngrok and run ./ngrok http 8080 (assuming 8080 is your local webserver http port).
This will create a random subdomain like http://38a84a97.ngrok.io/ that routes to your local webserver and that you can use with Facebook to test your open graph tags.
Its very simple to test Open Graph in any local environment using Chrome or Firefox using plugins. I have used one to quickly show in chrome how the Open Graph looks to the viewer to test results. Here is a quote of what it does.
This extension shows how people will see your site in the most popular
social networks This extension is for professionals who creates a
media content.
To check meta-information of your site or article just open it in a
Chrome and click extension's icon. Also you could add an URL manually.
Here is a direct link to the plugin (Chrome)
Firefox add-on
As a bit simpler approach you can use a browser extension like https://socialsharepreview.com/browser-extensions - which will show your Social Cards directly in the Browser (which of course might fail, if you wrongly didn't set them serverside :))
To test open graph (and Twitter cards) I also had to expose localhost (Docker) to Facebook and Twitter. I used Serveo
It works very well for this, no need to install anything as it works with ssh port forwarding.
$ ssh -R 80:localhost:3000 serveo.net
Then navigate to the url given, and there you go.
You have to setup a public domain which points to your public ip address.
Use dynes.org or a similar service and setup your router to forward your port 80.
There are several tools you can use for serving something up over your localhost, each with varying degrees of functionality.
I prefer (obviously) http://forwardhq.com
Other great options here: http://devblog.avdi.org/2012/04/27/http-forwarding-services-for-local-facebook-development/
If anyone is looking to preview the :og tags on while developing on subdomains (using lvh.me) in localhost. You can use https://serveo.net.
Simply use following command to forward your local server requests. No installation required.
ssh -R yoursubdomain.serveo.net:80:yoursubdomain.lvh.me:3000 serveo.net
you can put your desired port in place of 3000.
Reference: https://blog.aarvy.me/2019/09/20/expose-local-apps-having-subdomains-to-web/
Related
Am working on a API with Wix, and ive been able to get everything working, But there is one eliment i cannot automate or account for because i have no idea how its working or understand it properly.
I have been following: https://dev.wix.com/api/rest/tutorials/create-your-wix-app
It advises me to use Ngrok and also Npm after downloading some sample skd.
WHen setting up the App, it asks for a Redirect URL (When users authorize your app, we’ll redirect them to this URL with a temporary authorization code.)
It also asks for: App URL (When users start to add your app from the Wix App Market, we’ll redirect them to this URL.)
What i cannot understand is how Ngrok allows and uses the urls in the tutorial
As there is no physical files for these calls?
https://<NGROK_STRING>.ngrok.io/login and https://<NGROK_STRING>.ngrok.io/signup
I peronsally thought it was just a URL it called and passed back the Auth code, So i created a PHP page that fetched the string behind code: in the url so it can email me or save to file,
But this just does not work.
(I have it working in ngrok and npm, but i cannot have these running every time a user wants to download the app and link into our system)
I cannot understand the use of npm and ngrok, am presuming there is some sort of handshake somewhere.
Is this the correct way, do i have to install these programs on the a dedicated server and have them running at all time incase someone installs the app?
Is it not possible to just have the AUth code sent to me so i can finish the setup, generate a refresh token and be done with all the ngrok and npm
I'm not sure if I understand you correctly. So I'm gonna explain NPM and NGROK quickly.
NPM = node package manager -
npm is simply a package manager, so you can use it if you like to. Especially with node.js you are most likely gonna be using it. But with PHP npm might be used in your development enviroment so for example PHPStorm to get the packages you need. So no direct connection to WIX.
NGROK -
Is used to redirect traffic from a semi-permanent ngrok URL to a likely dynamic IP like from your Computer. In my case I work on localhost, and NGROK just relays the calls from wix to my localhost where the application is running. This is needed, since stuff from the internet can not simply access a computer. That's what NGROK is for.
If you have a ready application, you should not need ngrok, aslong as you have it running on a server somewhere. "Just" replace your NGROK urls with the actual URLs of your server.
I hope this helped =)
I can’t run local testing(for example http://localhost:3000) on browserstack.
I'm using Linux Mint 18.3 Sylvia x64. Browser is Chromium.
The browser’s extension (app) is installed.
The screenshot shows that there is no connection.
http://joxi.ru/Y2LJBv0H9MBv8r
The checkbox is checked.
http://joxi.ru/1A5PvVpCnzMww2
I tried this manual https://www.browserstack.com/local-testing.
./BrowserStackLocal --key
The above command is started, but nothing happened.
BrowserStack's Support Answer:
Thank you for joining the screen share session. As per our investigation, it seems that few of the IP's of our servers hosted on AWS are blocked due to Telegram blockage by Roskomnadzor which is leading towards the issue.
Having said that, our team is evaluating alternate solutions for our Russian users and I will be sure to notify you of the developments.
Cool!
But my neighbour doesn't have problems, he has Windows.
We have a common Internet provider.
Try replacing 'localhost' in the URL you are using with the IP address of the machine. For example, if you are testing the URL "http://localhost:3000/index.html" try using http://<machine_ip_address>:3000/index.html instead.
I am having problem with chimp.js configuration. When I run tests the browser is not using provided host / post. I tried many things but without success. Does anyone know how to set up it properly? Please find my config in screenshot provided.
When the browser first starts, it defaults to data;. You need to navigate somewhere first.
The host and port settings are not related to browsing. They tell Chimp where the Selenium server is, which by default is chromedriver.
I had to setup beforeFeature hook to start using localhost:3000
So ran into this issue today, where I have a website that needs the geolocation of the user. It was working fine when running locally on localhost, but now I get an error saying "Access to geolocation was blocked over insecure connection to http://localhost:4200". WTF Apple? I also tried 127.0.0.1 but got the same result. Am I missing something in the dev settings or did Apple just break everything?
Safari Version: 9.1.3 (11601.7.8)
Maybe it's possible to use https ( How to get angular-cli to ng serve over HTTPS ) and if not is possible directly for some reason maybe you can use a transparent proxy that offers https.
Many HTML5 new features like access to webcam, geolocation and others are now allowed only on pages served thru https scheme, so probably using https will work again. If not, maybe is possible to modify hosts file to workaround the problem.
I found a sort of solution but it is a bit tedious. I use ngrok to route my server and then the geolocation works fine. The only thing I don't like is that it has limits (if you are using free account), like you can't refresh a lot of times.
edit:
To Use ngrok download it first, then on terminal type
./ngrok http <port number>
ngrok example.
It will then show you the url routes. I used https. Go to to that address.
More ngrok instructions and download
Typically I develop my websites on trunk, then merge changes to a testing branch where they are put on a 'beta' website, and then finally they are merged onto a live branch and put onto the live website.
With a Facebook application things are a bit tricky. As you can't view a Facebook application through a normal web browser (it has to go through the Facebook servers) you can't easily give each developer their own version of the website to work with and test.
I have not come across anything about the best way to develop and test a Facebook application while continuing to have a stable live website that users can use. My question is this, what is the best practice for organising the development and testing of a Facebook application?
Try updating your hosts file (for windows users # c:\windows\System32\Drivers\etc\hosts) with an entry that will route all requests from your live domain back to your machine.
So 127.0.0.1 mywebappthatusesfacebook.com.
Then make sure that your app is running at the root of your webserver. # http://localhost/ Then goto mywebappthatusesfacebook.com in your browser and it should redirect right back to your local machine. Facebook won't know the difference. Hope this helps
The way I and my partner did it was we each made our own private Facebook applications, that pointed to our IP address where we worked on it. Since we worked in the same place, we each picked a different port, and had our router forward that port to our local IP address. It was kinda slow to refresh a page, but it worked very nicely.
You'll have to add both trunk and test versions as different applications and test them using test accounts. You may also use a single application and switch its target URL between cycles.
Testing FB apps is still a rather primitive process.
I generally setup a test application that is a complete copy of the production settings inside the FB development environment that uses an SSH tunnel to point to my development server. You can setup as many applications as you need inside FB - I generally have a development application, a staging app and production. Staging and Production are both on "live" servers rather than an SSH tunnel.
In your application you then use whatever language/framework/server tools are at your disposal to switch the FB configuration based on the server. In Rails, the Facebooker gem actually has built in support for different FB configurations.
Once all of that is done, testing is, unfortunately, still a matter of running the app within FB itself. I use Selenium to automate as much of this as possible.
Best way to do this:
Remove 'App Domain' from 'Basic Info'
Set website's 'Site URL' to : "http://localhost/" .
That simple.
(This only apply if you don't have a live system running in parallel to the test env. In that case get yourself another key.)
We have it setup much like Toby. A series of config files for each developer, that has the Facebook APP Id info (a different app for each developer), separate pages where the app is hosted, and git ignores the config files. We're LAMP with Code Igniter, and it's similar to Rails in that we can set the environment in 1 file, which points to the config with the Facebook constants.
Branching out into Selenium, using unit tests for model-testing.
For local testing we simply use a different app than for the server. In our case the Canvas-URL is set to localhost.local:8000.
You only have to make sure that when you use facebook connect that you type in localhost.local into the address field of the browser and not just localhost.
For testing a canvas or tab app it is faster if you use the 'open iframe in new tab' command of Firefox. This way the session and cookies from Facebook are preserved.
Another solution is NGROK
https://ngrok.com/
It opens a public tunnel to your local app
Example on my rails application by simply typing
./ngrok 3000
I get
http://630066fe.ngrok.com -> 127.0.0.1:3000