Facebook local development not working

Question

I'm at my wit's end trying to get this to work. It used to, but for some reason seems like it's broken again. I'm only having trouble when developing locally. Is anyone else currently having similar issues with Facebook local development?

These are my steps:

1. Create an app
2. Under the 'Basic Info' section, set 'localhost' as the domain (I have also tried leaving this blank)
3. Set my website to http://localhost:8080/
4. Make sure sandbox mode is OFF
5. My local server is running Javascript at http://localhost:8080/private/ that looks basically like below.
6. I have also tried using a substitute for localhost (like myapp.com), defining it in etc/hosts file mapped to 127.0.0.1, setting the App Domain to 'myapp.com' and using the site 'http://myapp.com:8080/' with no luck.

FB.getLoginStatus() call is not returning, or only returns occasionally. It always works on the production server.

    function myAppInit() {

        console.log("Facebook loaded; initializing sdk.");

        //Initialize FB SDK
        FB.init({ 
            appId:_FbAppId, //This is valid and matches app ID
            cookie:true, 
            status:true, 
            xfbml:true,
            oauth:true
        });

        //Query for login status.
        FB.getLoginStatus(function(response) {
            updateLoginStatus(response);  //This is hit randomly
        });

        //Set our standard callback for auth change status
        FB.Event.subscribe('auth.authResponseChange', function(response) {
           updateLoginStatus(response);   //This is hit randomly
        });    
    }


    $(document).ready(function(){

        window.fbAsyncInit = myAppInit;
        (function(d){
             var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
             js = d.createElement('script'); js.id = id; js.async = true;
             js.src = "//connect.facebook.net/en_US/all.js";
             d.getElementsByTagName('head')[0].appendChild(js);
        }(document));
     }

EDIT: After checking the response for FB.getLoginStatus(..), it is returning this:

Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the Application configuration. It must match one of the Connect or Canvas URLs or domain must be the same as or a subdomain of one of the Application's base domains.

Solution

I had the same exact error that you are describing and it was driving me nuts. You have to make sure that your Facebook URL in your Canvas or Page URL matches EXACTLY what you are typing in the browser.

In my case, I added a "www" to the URL in my address bar (e.g wwww.domain.com/MyApp), but under the Facebook Developer settings I just had domain.com/MyApp as my Page URL without the www prefix. That subtle difference is what was causing the error. Something may be happening similarly in your case.

If you are testing via localhost, I recommend creating a new app and making it a test version of your production app. That way, you can have your PROD url and your TEST url under the respective app in order that things don't get messy.

Also, I recommend debugging using IIS with a custom virtual directory so that you run on port 80. (Facebook seems to act goofy sometimes if you use anything other than 443 or 80) Hope that helps you.