Facebook app domain name when using localhost
FacebookFacebook Problem Overview
From a tutorial here:
http://ankurm.com/blog/api/using-localhost-for-facebook-app-development/1091/
I tried to set up a Local development Area for my Facebook app. But when I put "http://localhost:85/my_app/" as my domain name, Facebook says >App Domains: "http://localhost:85/app-name/" should not contain protocol information.
Also when I put "localhost:85/my_app/" as my domain name, I get the error: >App Domains: localhost:85/my_app/ is not a valid domain.
Facebook Solutions
Solution 1 - Facebook
My solution:
- Leave App Domains empty
- (Products) Facebook login > Settings
- Add
http://localhost:85/my_app/
toValid OAuth redirect URIs
box - Save Changes
Solution 2 - Facebook
It seems like the protocol has been changed.
Here is my solution (I tested on 3rd April 2015 and it works well):
In Settings -> Basic tab
- App Domain: localhost
- Click "+Add Platform" and choose "Website"
- Site URL: http://localhost:<port>/ (<port> is your port number)
- Save Changes
Solution 3 - Facebook
- Leave App Domains empty
- Go to Website with Facebook Login
- Add
http://localhost:port_number/
- Save changes and try again. For more information visit
http://developers.facebook.com/docs/samples/canvas/ Happy coding :-)
Solution 4 - Facebook
This has changed some over the years, but I just got it to work with a webapp that I'm running on localhost. This is what I did:
- Goto https://developers.facebook.com/apps
- Select your app.
- Select Settings > Basic from the left hand nav bar.
- Click the Add Platform button at the bottom of the page.
- Click Website
- Enter
http://localhost:8080/
for the Site URL. - Click the Quickstart button to the far right of the Site URL you just entered.
- A new tab will open. On that tab, scroll down to the section, "Tell us about your website" and again enter
http://localhost:8080/
for the Site URL. - Click the Next button.
- Attempted to login again, and it worked this time.
Good luck!
Solution 5 - Facebook
2018 working solution
It took me ages to figure this out, so I'm going to share my solution.
I tried all the suggested answers, but nothing worked for me, and in the end all I had to do was to go to https://developers.facebook.com/apps/YOUR_APP_ID/fb-login/settings/, and add my full callback url in the Valid OAuth redirect URIs box.
In my case, using ruby on rails, my url looked like this http://localhost:3000/user/auth/facebook/callback
.
And right after I added it, everything started working! Hope this helps someone else facing this issue.
Solution 6 - Facebook
This is what I used to do.
If you are using Windows, you need to modify the host file. Host file location will be at %SystemRoot%\System32\drivers\etc\
Add a new line in host file like this
127.0.0.1 localhost.YOUR-SITE-NAME.com
Save the host file.
Go to FB apps setting control panel and give localhost.YOUR-SITE-NAME.com
in Apps domain field. Save changes.
Now load you local environment like localhost.YOUR-SITE-NAME.com
from your browser.
NB: change YOUR-SITE-NAME with your domain name.
Solution 7 - Facebook
Working solution (August 2018)
First, select your app in the developers dashboard.
Then make sure your app is in development mode, as it allows localhost over HTTP. To do so, click on the toggle situated at the top right of your app's page.
Finally, please follow the notes below as they could cause trouble if improperly filled:
Settings > Basic > App Domains
should be emptyProducts > Facebook Login > Settings > Valid OAuth Redirect URIs
should be empty
Solution 8 - Facebook
You can either leave it blank or use localhost
, http://localhost:85/my_app/
is the URL
Solution 9 - Facebook
When I wrote that tutorial at that time port was allowed in app domain. And I actually able to run app with 81 port (wamp server). Now it looks that facebook is not allowing port in url. You can use localhost
in app domain.
I will update information as soon as possible. I am trying to find out solution.
A temporary solution is use localtunnel http://progrium.com/localtunnel/
Solution 10 - Facebook
I tested this and it works for me [Feb 2020]:
- Install ngrok & get your https url (example: https://a3asdf23.ngrok.io)
- Go to FB App Dashboard Settings (Basic) -> under App Domains -> add
https://a3asdf23.ngrok.io
,https://ngrok.io
. - On the same page, scroll all the way down, Add Platform (Website), set the url as
https://a3asdf23.ngrok.io
. Not finish yet, click QuickStart -> under "Tell us about your website", put the same urlhttps://a3asdf23.ngrok.io
. - Then go to Products -> Facebook Login -> Settings -> Client OAuth Settings -> Valid OAuth Redirect URIs -> add these
https://a3asdf23.ngrok.io
,https://ngrok.io
,https://a3asdf23.ngrok.io/{your-redirect-uri}
.
And here you go. Thanks me later :)
Solution 11 - Facebook
You must create a tunnel to share your localhost; [Ngrok][1] is maby the easiest way to do that.
[1]: https://ngrok.com/ "Ngrok"
Solution 12 - Facebook
Go through https://ngrok.com/ link to download ngrok and extract that file. Open cmd ( search cmd) Go to directory where ngrok is extracted. Open ngrok from command line ex: c:/ngrok/ngrok.exe [port] or cd c:/ngrok then ngrok 80 ( ngrok [port] ) You will get
ngrok
Tunnel Status online
Version 1.3/1.3
Forwarding http://3ahsdfhska.ngrok.com -> 127.0.0.1:80
Forwarding https://3ahsdfhska.ngrok.com -> 127.0.0.1:80
Web Interface http://127.0.0.1:4040
# Conn 0
Avg Conn Time 0.00ms
Don’t FORGET to make sure your wamp server is open on same port … (how to check -> goto->wampicon->apache->httpd.conf search for port or 80(default) use that for ngrok.exe 80 )
> http://3ahsdfhska.ngrok.com
will be URL for accessing your localhost online
Solution 13 - Facebook
I tried all the solutions mentioned here but none of them worked.
What solved my issue was copying the "OAuth redirect URI" from firebase to facebook app "Valid OAuth Redirect URIs"
I left all the domains blank
Solution 14 - Facebook
If you are getting the protocol errors, not only do you need to REMOVE the Http:// but also if there is any backslash at the end of the web address, you must remove that too or it won't work. I did this and it worked perfectly! Holla!
Solution 15 - Facebook
Tossing one more solution into the mix:
I set up my website per the instructions, then added a second app (Facebook Canvas) and set that URL to http://localhost:XXXXX
. Now I can access FB both locally and in production.
Solution 16 - Facebook
I develop locally and I use this URL: localhost/fb
Then I had to add a website with the following URL: http://localhost
Under App Domains I added localhost
.
Now it works. The only issue I had was, that you have to use this URL in all of your scripts. E.g.
$loginUrl = $helper->getLoginUrl('http://localhost/fb/login-callback.php', $permissions);
You can't use 127.0.0.1
here ...