Facebook API sending Error response when trying to run with localhost

Question

I have created a small application in local host.

I have checked in the wieshark that :

Request going is :

HTTP GET: http://www.facebook.com/dialog/oauth?api_key=APPID&app_id=APPID&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df17ca8709c%26origin%3Dhttp%253A%252F%252F127.0.0.1%253A8080%252Ffd1147b44%26domain%3D127.0.0.1%26relation%3Dparent.parent&client_id=121312018012923&display=none&domain=127.0.0.1&locale=en_US&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D9%23cb%3Df164e7a46c%26origin%3Dhttp%253A%252F%252F*127.0.0.1%253A8080%*252Ffd1147b44%26domain%3D127.0.0.1%26relation%3Dparent%26frame%3Df216567208&response_type=token%2Csigned_request%2Ccode&sdk=joey

Facebook is sending 200 OK:

[truncated] 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 o

I am not getting what the issue is : I have XAMPP running on my localhost. In the canvas and site URL I have : http://mytestdomain.com:8080.

in my machine in /etc/hosts I have 127.0.0.1 mytestdomain.com.

The Actual code I am running

<body>
        <div id="fb-root"></div>
<script>

      window.fbAsyncInit = function() {
          FB.init({appId: 'APPID', status: true, cookie: true, xfbml: true});

      };
      (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
      }());

      FB.getLoginStatus(function(response) {         
        if (response.status == "connected") {
        alert("yes I am in ");
        }
        else{
        alert(" you need to login to facebook:");
        }
        });

    function checkFacebookLogin() {
    alert("hai");
    }

    </script>


 <p id="fb_login_button_1"><fb:login-button onlogin="checkFacebookLogin();" size="medium" scope="email">Sign in using Facebook</fb:login-button></p>

</body>

Gaff Gaff · Accepted Answer · 2012-10-30T03:21:38

The address you are debugging to in Visual studio needs to match your https://developers.facebook.com/ "Site URL" exactly. I would recommend debugging with IIS and manually create a virtual directory to match your Site URL. (Plus you don't have to specify a port, which I have found to cause issues sometimes if it isn't the default 80 or 443 port)

In my case with this issue, I had a "http://www.domain.com/App" when debugging, but my Facebook Developer Site URL was "http://domain.com/App". I have also seen people leave the slash "/" off or had "https" instead of "http".

Bottom line is that you need to make sure your URLs match spot on. Facebook appears to be extremely picky.

Facebook API sending Error response when trying to run with localhost

7 Answers