Close
Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

LABS
Working with asynchronously loaded javascript

My pair and I were recently working on an app that asynchronously loaded the Facebook Javascript SDK but synchronously loaded the jQuery library. We had to invoke some javascript once Facebook and jQuery were both loaded, and this post describes how we did it.

First, we followed Facebook’s recommendation and asynchronously loaded the Facebook SDK right after the start of the body tag. Then for other reasons we put all other javascript includes right before the end of the body tag. The resulting html looked like this:

<html>
  <head>
  </head>
  <body>
    <div id="fb-root"></div>
    <script>
      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </body>
</html>

When the Facebook js loads, it looks for a function named fbAsyncInit and invokes it if it’s there. When jQuery detects that the document has loaded, it triggers a document ready event. Since the Facebook js is being loaded asynchronously, though, the sequence of these events is unpredictable. Things could happen in one of 2 ways:

  1. fbAsyncInit is called then $(document).ready() is triggered
  2. $(document).ready() is triggered then fbAsyncInit is called

We needed to run code once Facebook and jQuery were both loaded. If Facebook loaded first, this code worked:

$(document).ready(function(){
  $("#content").html("Welcome!")
  FB.init({
    appId  : 'YOUR APP ID',
    status : true,
    cookie : true,
    xfbml  : true
  });
});

However, if Facebook hadn’t loaded, it blew up on FB being undefined.

If jQuery loaded first, then this code worked:

window.fbAsyncInit = function() {
  $("#content").html("Welcome!")
  FB.init({
    appId  : 'YOUR APP ID',
    status : true,
    cookie : true,
    xfbml  : true
  });
}

However, if jQuery hadn’t loaded, it blew up on $ being undefined.

After a bit of head scratching we came up with this:

$(document).ready(function(){
  function init(){
    $("#content").html("Welcome!")
    FB.init({
      appId  : 'YOUR APP ID',
      status : true,
      cookie : true,
      xfbml  : true
    });
  }

  if(window.FB) {
    init();
  } else {
    window.fbAsyncInit = init;
  }
});

On document ready, if Facebook is loaded, invoke the function immediately. If Facebook is not loaded, define the fbAsyncInit function, which will be called when Facebook loads.

Going one step further, we moved the page-specific javascript into an event listener, then triggered a custom event that page-specific js could listen for:

$(document).ready(function(){
  function facebookReady(){
    FB.init({
      appId  : 'YOUR APP ID',
      status : true,
      cookie : true,
      xfbml  : true
    });
    $(document).trigger("facebook:ready");
  }

  if(window.FB) {
    facebookReady();
  } else {
    window.fbAsyncInit = facebookReady;
  }
});

// elsewhere in the code
$(document).live("facebook:ready", function(){
  $("#content").html("Welcome!")
});

Thanks to Evan Farrar and Rachel Heaton for making this work!

Comments
  1. […] event, define the fbAsyncInit¬† function which is called when the SDK loads. You could also go a step further and call Facebook-specific code using event-listeners: […]

  2. Oytun says:

    I cant belive this solved my login problem when migrating from local to server…

  3. Shabith says:

    thanks for the great code. This fixed the issue I had :)

  4. Godfrey says:

    Darn, live() was deprecated in 1.9 :(

  5. Joseph Palermo says:

    The live in the code is not needed. Live was only used when you expected the dom elements to change dynamically, which the document should probably never do.

    You should be able to change it to this:

    $(document).on("facebook:ready", function(){
      $("#content").html("Welcome!")
    });
  6. Saima says:

    when i use this
    $(document).on(“facebook:ready”, function(){
    $(“#content”).html(“Welcome!”)
    });

    it returns me error ‘undefined is not a function’ on line $(document).on(“facebook:ready”, function(){

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *