What am I doing wrong in localhost Facebook app development?

Question 1

What am I doing wrong in localhost Facebook app development?

facebook oauth-2.0 facebook-javascript-sdk facebook-oauth

necromancer · Apr 30, 2013 · Viewed 11.5k times · Source

Answer

Answer

You should use some alias domain when you want to connect your Facebook application with your local environment.

Try the following:

Go to your etc/hosts (or %systemroot%/system32/drivers/etc/hosts) file and add the following line:

127.0.0.1 foo.local # alias domain
Go to App > Settings and register your application by simply using foo.local as app domain.
Add your Site URL (e.g. http://foo.local/project/ )
Done.

Edited on 16.01.2016:

Facebook has changed their UI, follow these steps to make it works.

Go to App > Settings > Basic (tab)
Click on Add Platform, select "Website" and enter your alias domain.
Add your domain in App Domain section.
Done.

Question 2

App Domains: localhost
Website with Facebook login: http://localhost/auth

I go to http://localhost/auth/ and in my Chrome developer console I see the error: Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

I do a view-source to see the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="fb-root"></div>
<script>
  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'myappidremovedfromstackoverflowquestion', // App ID
      channelUrl : '//localhost/auth/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional init code here

  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<p>hello</p>
</body>
</html>

I go to http://localhost/auth/channel.html and view source to see the single line:

<script src="//connect.facebook.net/en_US/all.js"></script>

What am I doing wrong in localhost Facebook app development?

Answer

Related questions