Running Facebook application on localhost
Solution 1
I wrote a tutorial about this a while ago.
The most important point is the "Site URL":
Site URL: http://localhost/app_name/
Where the folder structure is something like:
app_name
¦ index.php
¦
+---canvas
¦ ¦ index.php
¦ ¦
¦ +---css
¦ main.css
¦ reset.css
¦
+---src
facebook.php
fb_ca_chain_bundle.crt
EDIT:
Kavya: how does the FB server recognize my localhost even without an IP or port??
I don't think this has anything to do with Facebook, I guess since the iframe src
parameter is loaded from client-side it'll treat your local URL as if you put it directly on your browser.
For example have a file on your online server with content (e.g. online.php
):
<iframe src="http://localhost/test.php" width="100%" height="100%">
<p>Not supported!</p>
</iframe>
And on your localhost root directory, have the file test.php
:
<?php echo "Hello from Localhost!"; ?>
Now visit http://your_domain.com/online.php
you will see your localhost file's content!
This is why realtime subscriptions and deauthorize callbacks (just to mention) won't work with localhost URLs! because Facebook will ping (send http requests) to these URLs but obviously Facebook server won't translate those URLs to yours!
Solution 2
if you use localhost:
in Facebook-->Settings-->Basic, in field "App Domains" write "localhost", then click to "+Add Platform" choose "Web Site",
it will create two fields "Mobile Site URL" and "Site URL", in "Site URL" write again "localhost".
works for me.
Solution 3
You can also edit 'hosts' file and create local variation of your domain.
Example
If your real facebook application address is "example.com" you can create "localhost.example.com" (accessible only from your pc) domain in your "hosts" file pointing to "localhost" and run your local website under this domain. You can trick Facebook this way.
Solution 4
In your app's basic settings (https://developers.facebook.com/apps) under Settings->Basic->Select how your app integrates with Facebook...
Use "Site URL:" and "Mobile Site URL:" to hold your production and development URLs. Both sites will be allowed to authenticate. I'm just using Facebook for authentication so I don't need any of the mobile site redirection features. I usually change the "Mobile Site URL:" to my "localhost:12345" site while I'm testing the authentication, and then set it back to normal when I'm done.
Solution 5
2013 August. Facebook doesn't allow to set domain with port for an App, as example "localhost:3000".
So you can use https://pagekite.net to tunnel your localhost:port
to proper domain.
Rails developers can use http://progrium.com/localtunnel/ for free.
- Facebook allows only one domain for App at the time. If you are trying to add another one, as localhost, it will show some kind of different error about domain. Be sure to use only one domain for callback and for app domain setting at the time.
enthusiastic
Updated on April 16, 2020Comments
-
enthusiastic about 4 years
I am planning to connect to Facebook chat from my localhost. I will need to get the session key from Facebook. When I give the site URL as
localhost:8080
orip-address:8080
it does not work.I read about setting up two apps with 2 different API keys one runs on dev m/c and other on localhost but I did not quite get it.
Can anyone explain how to run a Facebook app on localhost?
-
enthusiastic over 13 years@ifaour i follwoed u r tutorial.. its givin me error API Error Code: 191 API Error Description: The specified URL is not owned by the application Error Message: redirect_uri is not owned by the application. I don need it to run inside fb...
-
JustCoding over 13 years@Kavya just add canvas url as localhost/app_path and open fb app , so it will run your app from localhost.Sorry for late , as very busy.
-
dumbledad over 12 yearsAnother way to do this is to map your site/canvas URL locally, instead of specifying localhost. You can then use your target domain. I'm not sure what architecture you are developing on but under windows you'd achieve this by setting up your IIS site locally with the correct bindings and then adding an alias to your hosts file in C:\Windows\System32\drivers\etc e.g. adding the line 127.0.0.1 yourproject.yourdomain.net
-
user962206 about 11 yearsI can't seem to find the 'Site Url' any idea where/or what tab is it located?
-
necromancer about 11 yearsdoes this work for 8080 port? i am still getting the error with site url:
http://localhost:8080/auth/index.html
and the webpage that gives the error ishttp://localhost:8080/auth/index.html
and the channelurl line is:channelUrl : '//localhost:8080/auth/channel.html',
-
AlxVallejo about 11 yearsI don't understand the 'folder structure' part. If you're simply logging into your website with Facebook in order to load Facebook comments on your page, do you still need that canvas structure?
-
Bjarni Rúnar almost 11 yearsThere are some tunneling tools which will allow you to give your localhost a public name and make it visible, so Facebook can ping back. I created one, named PageKite, there are others as well.
-
Bjarni Rúnar almost 11 yearsAnd PageKite is one of Forward's competitors (I made it!). ;-)
-
pztrick almost 11 yearsworks like a charm, thanks! FYI- hosts is located on windows 7 at
C:/Windows/System32/drivers/etc/hosts
or on Ubuntu at/etc/hosts
-
Jerad about 10 yearsExcellent methodology. Thanks.
-
Craig almost 10 yearsWhat do I set the App Domains and Canvas URL to?
-
Craig almost 10 yearsAfter trying everyting else under the sun, this worked for me. Only issue is that all that forwarding is really slow. Better than not getting FB callbacks though! Thanks
-
MagicLAMP over 9 yearsThis will not allow you to specify the port however, so you would have to use a reverse proxy to allow development on the same domain. See stackoverflow.com/questions/10729034/…
-
rahulmishra about 9 yearsthanks, I tried the other solutions but finally this was the one that worked,
-
RegarBoy about 8 yearsin Site Url field I had: localhost ,but did not work I have also added localhost to App Domain field as you have mentioned, this works fine thanks
-
radio_head about 5 yearsworks fine for local development, but in production you need facebook's permission(which is obtained by the browser's option call) to share data from facebook