Facebook development in localhost

S

20

184

Just wanted to know if there is any way I could develop Facebook applications in localhost.

Susie answered 26/12, 2010 at 4:15 Comment(0)

S

247

Edit: 2-15-2012 This is how to use FB authentication for a localhost website.

I find it more scalable and convenient to set up a second Facebook app. If I'm building MyApp, then I'll make a second one called MyApp-dev.

Create a new app at https://developers.facebook.com/apps
(New 2/15/2012) Click the Website checkbox under 'Select how your application integrates with Facebook' (In the recent Facebook version you can find this under Settings > Basic > Add Platform - Then select website)
Set the Site URL field (NOT the App Domains field) to http://www.localhost:3000 (this address is for Ruby on Rails, change as needed)

enter image description here

In your application initializer, put in code to detect the environment

Sample Rails 3 code

if Rails.env == 'development' || Rails.env == 'test'
  Rails.application.config.middleware.use OmniAuth::Builder do
    provider :facebook, 'DEV_APP_ID', 'DEV_APP_SECRET'
  end
else
  # Production
  Rails.application.config.middleware.use OmniAuth::Builder do
    provider :facebook, 'PRODUCTION_APP_ID', 'PRODUCTION_APP_SECRET'
  end
end

I prefer this method because once it's set up, coworkers and other machines don't have additional setup.

Striated answered 21/9, 2011 at 2:7 Comment(14)

+1ed This is strange! People say that you can't add the localhost as your app url. But it simply works for me. Thank you! – Solomonsolon 11/11, 2011 at 0:54

Is this still the case for you? I don't seem to be able to add localhost, or 127.0.0.1:5000 or anything similar to my app domain for Facebook. – Lawman 30/1, 2012 at 22:16

I just tried creating a new one and ran into an 'invalid domain' issue. Thanks for the catch – Striated 31/1, 2012 at 1:20

@zoltarSpeaks See my updated answer. You have to use a different field, not "app domain" – Striated 15/2, 2012 at 2:7

will this override initializers/devise.rb's config.omniauth :facebook, 'APP_KEY', 'APP_SECRET', :scope => "email,offline_access.." ? – Upturn 24/2, 2012 at 8:29

@disappearedng I'm not sure. I'm using both gems but I'm on an older version of Devise, so I only set the Omniauth config like this. I believe they're both modifying the same Omniauth setting, but Devise may have some of its own internal configurations determined by that line. – Striated 24/2, 2012 at 23:7

Tried that, it works, but what is strange Facebook pulls my iframe content via POST not GET, is it normal ? – Biconcave 23/5, 2012 at 8:42

I already found an answer for my question, it's here developers.facebook.com/docs/appsonfacebook/tutorial - "...In order to create a personalized user experience, Facebook sends your app information about the user. This information is passed to your Canvas URL using HTTP POST within a single signed_request parameter which contains a base64url encoded JSON object..." – Biconcave 23/5, 2012 at 9:44

I cannot get this to work. It seems the port number is getting stripped off by FB thus causing an Error 191. – Robinette 27/6, 2012 at 20:19

I have found that localhost only works when you have a single domain filled in at app domains – Baal 13/3, 2013 at 10:21

Note: FB now provide a Test App under your App that inherits many of the settings from your App and is therefore more robust for testing and ensuring it will work in Production. You can then set up as per this description - although by default your production app settings are copied across so you will probably only have to change the URLs. Available here: developers.facebook.com/docs/apps/test-apps – Bakerman 10/7, 2017 at 21:54

FB requires an HTTPS connection, any updates for this in '19? – Geoponics 4/5, 2019 at 15:1

What should I put in Site URL If I am using virtual host, say myproject.test ? – Belkisbelknap 14/5, 2019 at 7:30

If you have different apps then Facebook will give different userID's for same user which should cause problems in your Sign Up and Log In logics. – Andel 5/11, 2020 at 5:9

G

27

Of course you can, just add the url localhost (without "http") in your app_domain and then add in your site_url http://localhost (with http)

Update

Facebook change the things a little now, just go to the app settings and in the site url just add http: //localhost and leave the App Domain empty

Gabriella answered 3/1, 2013 at 15:37 Comment(2)

This totally works. There's no need to anything on our side of the fence. – Unsocial 9/12, 2013 at 13:14

This doesn't work anymore you get the error can't add top level domains – Iceskate 12/5, 2014 at 13:18

A

20

Here is my config and it works fine for PHP API:

app domain

   http://localhost

Site URL

   http://localhost:8082/

Adaxial answered 21/7, 2014 at 23:33 Comment(1)

had to fill in both of those text inputs for localhost to work – Argive 18/10, 2014 at 6:54

Z

19

NOTE: As of 2012 Facebook allows registration of "localhost" as return Url. You still may need similar workaround for other providers (i.e. Microsoft one).

If you need real domain name registered with Facebook (like my.really.own.domain.com) you can locally redirect requests to this domain to your machine. Easiest out of box approach on any OS is to change "hosts" file to map the domain to 127.0.0.1 (see http://technet.microsoft.com/en-us/library/bb727005.aspx#EDAA and https://serverfault.com/questions/118290/cname-record-alias-in-windows-hosts-file).

I usually use Fiddler to do it for me (on Windows with local IIS) - see samples on http://www.fiddler2.com/Fiddler/Dev/ScriptSamples.asp.

if (oSession.HostnameIs("my.really.own.domain.com")) {
   oSession.host="localhost:80";
}

Hosts file approach of approaches does not work with Visual Studio Development Server as it requires incoming Urls to be localhost/127.0.0.1. If you need to work with it (or possibly with IIS express) to override host - Using Fiddler with IIS7 Express

Zonate answered 27/12, 2010 at 6:16 Comment(0)

A

9

Facebook no longer allowed a 'localhost' callback URL for FBML Facebook applications

Ac answered 26/12, 2010 at 4:29 Comment(1)

ensure that in your Facebook security settings, you have 'Secure Browsing' disabled. This will make your localhost unavailable if it is enabled. – Auster 24/9, 2012 at 1:55

H

9

With the new development center it is now easier:

1) Leave app domains blank.
2) Click Add Platform
3) Site URL should equal the full path of your local host.
4) Save Changes

Hirsutism answered 2/4, 2014 at 23:27 Comment(2)

Verified this is the best way to go for a localhost install. Just insert the base URL on your development environment as above- without the http:// and facebook will append it for you. Simple stuff! Thanks Jay – Cover 11/6, 2014 at 7:24

That solution solved my problem when running on localhost – Activity 27/6, 2016 at 14:49

S

8

I just discovered a workaround: You can make your local machine accessible by using http://localtunnel.com . You'll need to (temporarily) change some URLs used in your app code / html so links point to the temporary domain, but at least facebook can reach your machine.

Shedd answered 16/12, 2011 at 14:23 Comment(0)

C

7

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

Crutch answered 27/2, 2013 at 23:39 Comment(0)

D

6

You have to choose Facebook product 'facebook login' and enable Client OAuth Login , 'Web OAuth Login' and 'Embedded Browser OAuth Login' then even if you give localhost url It will work

Diatomic answered 4/11, 2017 at 8:12 Comment(3)

This helped move the problem along. Message from FB as of 23/02/2018: In March, we're making a security update to your app settings that will invalidate calls from URIs not listed in the Valid OAuth redirect URIs field below.This update comes in response to malicious activity we saw on our platform, and we want to protect your app or website by requiring a new strict mode for redirect URIs. – Baluchistan 23/2, 2018 at 11:36

Fb now requires https for the callback. Localhost does not support https. – Torpedo 21/8, 2018 at 2:14

@Torpedo so this whole Q/A is deprecated. – Geoponics 4/5, 2019 at 15:0

R

5

There is ! My solution works when you create an app, but you want to use facebook authentification on your website. This solution below is NOT needed when you want to create an app integrated to FB page.

The thing is that you can't put "localhost" as a domain in the facebook configuration page of your app. Security reasons ?

You need to go to your host file, in OSX / Linux etc/hosts and add the following line : 127.0.0.1 dev.yourdomain.com

The domain you put whatever you want. One mistake is to add this line : localhost dev.yourdomain.com (at least on osx snow leopard in doesnt work).

Then you have to clear your dns cache. On OSX : type dscacheutil -flushcache in the terminal. Finally, go back to the online facebook developer website, and in the configuration page of your app, you can add the domain "dev.yourdomain.com".

If you use a program such as Mamp, Easyphp or whatever, make sure the port for Apache is 80.

This solution should work for Windows because it also has a hosts file. Nevertheless, as far as I remember Windows 7 doesnt use this file anymore, but this trick should work if you find a way to force windows to use a hosts file.

Radiothorium answered 3/3, 2013 at 22:44 Comment(1)

works for win8.1 c:\windows\system32\drivers\etc\hosts .You may need flush 'Host resolver cache' in chrome URL = chrome://net-internals/#dns – Fluted 20/9, 2014 at 6:25

N

5

this works June 2018, even after the HTTPS requirement. It appears a test app does not require https:

create a test app: https://developers.facebook.com/docs/apps/test-apps/

then within the test app, follow the simple steps in this video: https://www.youtube.com/watch?v=7DuRvf7Jtkg

Nananne answered 27/6, 2018 at 3:26 Comment(0)

S

3

I think you should be able to develop applications using the visual studio development web server: Start a new FaceBook application on: http://www.facebook.com/developers/. Then set the settings for the site Url and the canvas url to the running instance of your website for example:http://localhost:1062/

Here are a couple of links that should help you out on starting with FaceBook:

Hope this helps.

Sympathizer answered 26/12, 2010 at 5:56 Comment(0)

C

3

Try this ---

https://www.facebook.com/help/community/question/?id=589302607826562

1 - Click Apps and then select your app.

2 - Click the Settings button on the left side of the screen.

3 - In the Basic settings, click the Add Platform button below the settings configuration.

4 - Select Website in the platform dialog.

5 - Enter your URL (localhost works here).

6 - In the App Domains text input, add your domain that matches the one in the URL.

7 - Save your settings.

Copal answered 8/5, 2017 at 11:5 Comment(0)

R

2

Suppose that you have registered your app as:

app.domain.com

You just need to modify the /etc/hosts file by adding

127.0.0.1 dev01.app.domain.com

Then, modify your apache configuration

ServerName dev01.app.domain.com

and restart apache.

You'll need to put your URL in a variable in order to use it as XML parameter on some calls:

<fb:login-button registration-url="http://<?=$URL?>/register" />

Rees answered 21/12, 2012 at 17:50 Comment(0)

R

2

Don't have enough cred to comment on the top voted answer, but at least in my rails environment (running 4), rails s is at http://localhost:3000, not http://www.localhost:3000. When I changed it to http://localhost:3000, it worked just fine. No need to edit any hosts file.

Rosyrot answered 26/3, 2014 at 22:41 Comment(0)

F

2

app domain : localhost

site URL : http://localhost:4440/

worked for me with the new UI.

Felicitation answered 18/1, 2017 at 11:58 Comment(0)

C

1

Latest update: You don't have to give any urls if you are testing it in development. You can leave the fields empty. Make sure your app is in development mode. If not turn off status from live.

No need to provide site url, app domains or valid redirect oauth uri.

Carbohydrate answered 25/3, 2019 at 13:1 Comment(4)

Note that if you turn your app from "live" to "development" you will be able to login from localhost on development machine, but ALL YOUR LIVE USERS will NOT BE able to login anymore. – Postmistress 5/5, 2019 at 9:39

I did this and it still gave me the error and fb button wouldn't show up – Jumbuck 31/10, 2019 at 22:47

After creating the app click the "Create Test App" button to get an app just for development/testing. I still needed to add "localhost" to app domains. – Loreleilorelie 16/12, 2019 at 13:20

@J.Money I think it might be changed by now. Thanks for letting me know. – Carbohydrate 17/12, 2019 at 15:13

P

0

My Solution works fine in localhost..... For Site URLS use http://localhost/ and for App domains use localhost/folder_name Rest everything is same .......it works fine (though its shows redflag in App Domain..App is working fine)

Pudendum answered 24/4, 2014 at 14:13 Comment(0)

M

0

It's easy go to the app dashboard under the facebook login tab click settings then select Enforce HTTPs No, save settings

Moreen answered 13/1, 2019 at 12:56 Comment(0)

C

0

The application will run just fine in localhost: 3000, you just need to specify the https address on which the application will be live when it be in production mode.
Option 2 is provide the url or you heroku website which lets you have sample application in production mode.

Cursorial answered 31/1, 2019 at 6:17 Comment(0)

Recommended topics

Hot tags