Tutorial :API Key Error in Facebook Connect (javascript sdk)



Question:

I am trying to implement Facebook Connect on a website. I am trying to work with Javascript SDK of Facebok. 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. 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 correct API key is not being passed to popup window.

Thanks in advance.


Solution:1

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.


Solution:2

I had set my facebook connect address to have www and I was accessing my test site with non www, when I switched to the www version fb connect worked fine.


Solution:3

You need to set the canvas post-authorize url, and make sure that the base canvas url is a prefix of the post-authorize url.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »