How To Guarantee that Facebook JavaScript API SDK Is Loaded on Your Website?

When you integrate Facebook social plugins into your website you run into an interesting question: How do you guarantee that the Facebook JavaScript API SDK is loaded when your website's content has been rendered? Is it possible to guarantee that the FB SDK must be loaded when the webpage is done loading?

A developer would use the following standard code straight from Facebook's official developer website:

(function(d){
  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];  
  if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  ref.parentNode.insertBefore(js, ref);
}(document));

This code may be different depending on when you download the code on Facebook's developer site.

However is this code really robust? What if while loading the webpage there's a brief stoppage of the internet connectivity? What if the browser fails to receive connect.facebook.net/en_US/all.js from Facebook's CDN? What if the browser gets the Facebook Javascript source code but never executes it?

Let's look at a more robust way to load and execute the Javascript Facebook SDK.

Solution

Let's look at the sample Javascript code below. This code loads the Facebook JS API asynchronously while making sure the API is executed at some maximum number of tries spaced at intervals of some time.

// isFbSdkLoaded indicates whether window.fbAsyncInit has been executed
var isFbSdkLoaded = false;
// ... here you set isFbSdkLoaded to true when window.fbAsyncInit has been executed
// below is an example
window.fbAsyncInit = function() {
 
  FB.init({
    appId: Your APP ID
    ...
    xfbml: true
  });

  // here you add events you want to subscribe to
  FB.Event.subscribe('xfbml.render', function(response) {
    ...
  });
 
  // set isFbSdkLoaded to true to indicate that FB API has been loaded successfully
  isFbSdkLoaded = true;
};

// loadFbSdkTries indicates the current number of tries
var loadFbSdkTries = 0;
function loadFbSdk(){
  if(isFbSdkLoaded || ++loadFbSdkTries > 3){ // at most 3 times 
    return;
  }
 
  // here you can insert debug messages such as 
  // console.log('loading FB SDK..');
 
  (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
// I remove "if (d.getElementById(id)) {return;}" because it is possible for the browser 
// to inject the script element into the DOM but the script is not executed somehow 
// (e.g. bad URL or network is broken)
// I've tried using a non-existent URL as js.src and the <script> element will 
// still be injected into the DOM. 
// Therefore to guarantee that the FB Javascript is executed I must insert the script 
// multiple times until I am certain that the script has been executed. 
// I cap the number of tries by using variable loadFbSdkTries  
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
  }(document));
 
  if(!isFbSdkLoaded){
    // 3000 means 3 seconds
    setTimeout( function(){loadFbSdk();}, 3000 );
  }
}

loadFbSdk();

Please look at the comments to understand the JavaScript code. Questions? Let me know! This sample code guarantees that window.fbAsyncInit is executed at some number of tries at most.