views:

5558

answers:

4

Hi,

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"&gt;&lt;/script&gt;
 <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.

+1  A: 

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"&gt;&lt;/script&gt;

  <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js"&gt;&lt;/script&gt;
  <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.

Manuel Bitto
Thanks for the help Kucede. I was able to get rid of (yea, really) my project by using old FB.Connect class. How ironic is this that FB Dev documentation contains a mix of old codes+new ones, without any hints about which version would that doc belongs to... Really this is the most terrible documentation I've ever seen in my life. I appreciate your help though. May be I'll need to use this if I come across a similar project in future.
Muhammad Yasir
A: 

Hi,

I am having this error with the code and all other code I try?

An error occurred with /MyWebsite/ Please try again later.

API Error Code: 100 API Error Description: Invalid parameter Error Message: next is not owned by the application.

F8 mixerror ?

+1  A: 

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.

+1  A: 

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.

Payson Welch