API Key Error in Facebook Connect (javascript sdk)

authentication, facebook, javascript, sdk

Solution

I'm doing the same thing, and i found an example that is very simple to implement and understand (here thay use jQuery, but you can do the same without libraries):

<body>
  <div>
    <button id="login">Login</button>
    <button id="disconnect">Disconnect</button>
  </div>
  <div id="user-info" style="display: none;"></div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js"></script>
  <script>
    // initialize the library with the API key
    FB.init({ appId  : '12344' });

    // fetch the status on load
    FB.getLoginStatus(handleSessionResponse);

    $('#login').bind('click', function() {
      FB.login(handleSessionResponse);
    });

    $('#disconnect').bind('click', function() {
      FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
        clearDisplay();
      });
    });

    // no user, clear display
    function clearDisplay() {
      $('#user-info').hide('fast');
    }

    // handle a session response from any of the auth related calls
    function handleSessionResponse(response) {
      // if we dont have a session, just hide the user info
      if (!response.session) {
        clearDisplay();
        return;
      }

      // if we have a session, query for the user's profile picture and name
      FB.api(
        {
          method: 'fql.query',
          query: 'SELECT name, pic FROM profile WHERE id=' + FB.getSession().uid
        },
        function(response) {
          var user = response[0];
          $('#user-info').html('<img src="' + user.pic + '">' + user.name).show('fast');
        }
      );
    }
  </script>
</body>

Look here for the entire code, and here you can find other resource.

Problem

I am trying to implement Facebook Connect on a website. I am trying to work with the Javascript SDK of Facebook. I am new to it and unfortunately most of links provided in Facebook WIKI are out of date, returning 404 not found. Anyway I added this code before the ending `</body>`: ``` <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> <div id="fb-root"></div> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"> </script> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId : '12344', // my real app id is here status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : false // parse XFBML }); FB.login(function(response) { if (response.session) { if (response.perms) { alert('user is logged in and granted some permissions'); // user is logged in and granted some permissions. // perms is a comma separated list of granted permissions } else { alert('user is logged in, but did not grant any permissions'); // user is logged in, but did not grant any permissions } } else { alert('user is not logged in'); // user is not logged in } }, {perms:'email'}); </script> ``` And I have a login button at some other place (much before the above scripts) in the same page rendered with: ``` <fb:login-button v="2">Connect with Facebook</fb:login-button> ``` This button renders as a normal fb connect button and clicking it opens a new popup window as it normally should. The problem is that it shows 'invalid api key specified' error. On inspecting address bar of popup, I see that api_key=undefined is passed to it. :( Any idea about this? I am trying to fix this for last 5 hours now. Please help me found out why the correct API key is not being passed to popup window. Thanks in advance.

Original source