Using Jquery with facebook JS SDk

Question

Hi,

I am using jquery to achieve a variety of stuff in my pages, which includes showing and hiding div elements.

Now I also have the facebook JS SDK in the master page to check whether the user has signed out of facebook and making graph api calls.

The problem is sometimes, it takes a while for response from facebook to come and in this while, div elements which are hidden by jquery on $.ready, can be seen by the user.

Any ideas how to better this?

Answer 1

i think the graph api calls have a callback function for when they complete. invoke your jquery code from there instead of $.ready

Answer 2

Defer to window.load

Answer 3

Ok.. So I was finally able to resolve the issue. You should load the FB Javascript SDK asynchronously as shown below

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', 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);
  }());
</script>

For more details, please refer http://developers.facebook.com/docs/reference/javascript/

A thing which I noticed, all your methods containing FB object such as FB.api etc. should be within the same closure as FB.init or the FB object is undefined.