Take the 2-minute tour ×

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?

share|improve this question
add comment

4 Answers

up vote 2 down vote accepted

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

  window.fbAsyncInit = function() {
             xfbml: true});
  (function() {
    e.src = document.location.protocol +

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.

share|improve this answer
add comment

If you want a cleaner method, try this:

window.fbAsyncInit = function() {
  FB.init({xfbml: true});

$(function() {
  $.getScript({url: document.location.protocol +

Insert this code either inline or in a separate Javascript file.


  • This example does not define appID, cookie or status. You could add them to fbAsyncInit.
  • Tested with JQuery 1.8.2.
  • I found the #fb-root div to be unnecessary.
share|improve this answer
#fb-root is purported to be used in certain cross-domain situations with certain browsers, same as the channel file. –  Sold Out Activist Nov 27 '12 at 15:42
add comment

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

share|improve this answer
well the thing is I want to invoke my jquery code before graph api calls. The issue is graph api calls result in a delay and I want my code executed as soon as page loads. –  sassyboy Sep 12 '10 at 17:35
I see. my bad! 1. How about you start the offending divs hidden? or 2. How about you make the graph calls after loading the page? So you do what you do with jquery and then start invoking the graph stuff. Without some code samples or a webpage it's really hard to help. –  Circadian Sep 13 '10 at 13:59
add comment

Defer to window.load

share|improve this answer
no, defering is not what is needed. If you read carefully I want to make this happen earlier, basically before FB JS Sdk starts making api calls. If I delay then user will see elements which are presently hidden by using hide() methods within $.ready(). I hope I was clearer this time. –  sassyboy Sep 12 '10 at 17:52
add comment

Your Answer


