Running Facebook application on localhost

Question

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 or ip-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?

Smote

@Kavya Are you trying to create a desktop facebook chat application? – Pulchritudinous

yes...i want to hit the facebook server from my m/c...saw a post regarding the same here #1878413 i din get it... – Smote

@Kavya If you want to create one, you haven't mentioned the programming language, which you are going to use ? – Pulchritudinous

k i ll give u the usecase...I hav to integrate fb chat into my app using jquery nd javascript only...it ll only client side coding... – Smote

I've wrote a tutorial about that. – Albaalbacete

@xoxoxo Please use proper punctuation and spelling in your communication. – Dinorahdinosaur

For using HTTPS on your localhost, see my answer about using stunnel here – Trubow

possible duplicate of Facebook development in localhost – Nammu

Answer 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!

Albaalbacete

I can't seem to find the 'Site Url' any idea where/or what tab is it located? – Thallophyte

does 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 is http://localhost:8080/auth/index.html and the channelurl line is: channelUrl : '//localhost:8080/auth/channel.html', – Umbelliferous

I 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? – Retroaction

There 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. – Leveille

Answer 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.

Derrek

thanks, I tried the other solutions but finally this was the one that worked, – Secondclass

in 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 – Laidlaw

Answer 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.

Benedictine

works like a charm, thanks! FYI- hosts is located on windows 7 at C:/Windows/System32/drivers/etc/hosts or on Ubuntu at /etc/hosts – Alluring

What do I set the App Domains and Canvas URL to? – Pas

This 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 #10729534 – Schwarz

Answer 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.

Wheelbarrow

Answer 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.

Parricide

Answer 6

So I got this to work today. My URL is http://localhost:8888. The domain I gave facebook is localhost. I thought that it was not working because I was trying to pull data using the FB.api method. I kept on getting an "undefined" name and an image without a source, so definitely didn't have access to the Graph.

Later I realized that my problem was really that I was only passing a first argument of /me to FB.api, and I didn't have a token. So you'll need to use the FB.getLoginStatus function to get a token, which should be added to the /me argument.

Fibrilla

Answer 7

just specify your canvas url as http://localhost/app_path.

Fellah

@Albaalbacete 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... – Smote

@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. – Fellah

Another 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 – Hypallage

Answer 8

Ok I'm not sure what's up with these answers but I'll let you know what worked for me as advised by a senior dev at my work. I'm working in Ruby on Rails and using Facebook's JavaScript code to get access tokens.

Problem: To do authentication, Facebook is taking the url from your address bar and comparing that with what they have on file. They don't allow you to use localhost:3000 for whatever reason. However, you can use a completely made-up domain name like yoursite.dev by running a local server and pointing yoursite.dev to 127.0.0.1:3000 or wherever your localhost was pointing to.

Step 1: Install or update Nginx

$ brew install nginx (install) or $ brew upgrade nginx (update)

Step 2: Open up your nginx config file

/usr/local/etc/nginx/nginx.conf (usually here)

/opt/boxen/config/nginx/nginx.conf(if you use Boxen)

Step 3 Add this bit of code into your http {} block

Replace proxy_pass with wherever you want to point yoursite.dev to. In my case it was replacing localhost:3000 or the equivalent 127.0.0.1:3000

server {
  listen       yoursite.dev:80;
  server_name  yoursite.dev;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

Step 4: Edit your hosts file, in /etc/hosts on Mac to include

127.0.0.1   yoursite.dev

This file directs domains to localhost. Nginx listens in on localhost and redirects if it matches a rule.

Step 5: Every time you use your dev environment going forward, you use the yoursite.dev in the address bar instead of localhost:3000 so Facebook logs you in correctly.

Henceforth

Answer 9

Forward is a great tool for helping with development of facebook apps locally, it supports SSL so the cert thing isn't a problem.

https://forwardhq.com/in-use/facebook

DISCLAIMER: I'm one of the devs

Lillis

And PageKite is one of Forward's competitors (I made it!). ;-) – Leveille

After 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 – Pas

Answer 10

You need to setup your app to run over https for localhost

You can follow steps given in this to setup HTTPS on ubuntu

https://www.digitalocean.com/community/articles/how-to-create-a-ssl-certificate-on-apache-for-ubuntu-12-04

You need to do following steps:

install apache (if you do not have)

sudo apt-get install apache2

Step One—Activate the SSL Module

sudo a2enmod ssl
sudo service apache2 restart

Step Two—Create a New Directory

sudo mkdir /etc/apache2/ssl

Step Three—Create a Self Signed SSL Certificate

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache/ssl/apache.key -out /etc/apache2/ssl/apache.crt

With this command, we will be both creating the self-signed SSL certificate and the server key that protects it, and placing both of them into the new directory. The most important line is "Common Name". Enter your official domain name here or, if you don't have one yet, your site's IP address.

Common Name (e.g. server FQDN or YOUR name) []:example.com or localhost

Step Four—Set Up the Certificate

sudo vim /etc/apache2/sites-available/default-ssl

Find following lines and edit those with your settings

ServerName localhost or example.com

SSLEngine on SSLCertificateFile /etc/apache2/ssl/apache.crt

SSLCertificateKeyFile /etc/apache2/ssl/apache.key

Step Five—Activate the New Virtual Host

sudo a2ensite default-ssl
sudo service apache2 reload

Rohrer

Answer 11

A trick:

Use MAMPPRO and create: server name: the EXACT adress of you website (eg: helloworld.com) to your site on your disk

On Facebook: So you can keep your original Site URL as well (eg: helloworld.com)

Now you understand that when you type your website on the adress bar you are in local! ..and when you want to be online, just inactive the server on MAMP PRO..

:)

Talmudist

Answer 12

None of the answers above worked for me. I am running on FB API 2.5. Mine was a combination of issues that lead to success once resolved

1. Create a test app to ensure that it is maintained and managed as such and can be disabled when going live
2. Read the error message properly :) - I had to enable "Web OAuth Login" WITH "Client OAuth Login"
3. Use https://www.whatismyip.com/ to find out what my current IP is
4. Create an A record on my Domain i.e. http://localhost.mydomain.com that points to my current IP

It's probably not ideal as Dynamic IP's change and one could probably use DynDNS or something similar to make the IP more "static" but it worked for me

Immoral

Answer 13

In my case the issue revealed to be chrome blocking the CORS request from localhost:4200 to facebook api website. Running Chrome with this setting: "YOUR_PATH_TO_CHROME\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="c:/chrome worked like a charm while developing. Even with no localhost added to facebook app's settings.

Dentiform

works 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 – Modernize