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:

1(function(d){
2  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];  
3  if (d.getElementById(id)) {return;}
4  js = d.createElement('script'); js.id = id; js.async = true;
5  js.src = "//connect.facebook.net/en_US/all.js";
6  ref.parentNode.insertBefore(js, ref);
7}(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.

01// isFbSdkLoaded indicates whether window.fbAsyncInit has been executed
02var isFbSdkLoaded = false;
03// ... here you set isFbSdkLoaded to true when window.fbAsyncInit has been executed
04// below is an example
05window.fbAsyncInit = function() {
06  
07  FB.init({
08    appId: Your APP ID
09    ...
10    xfbml: true
11  });
12 
13  // here you add events you want to subscribe to
14  FB.Event.subscribe('xfbml.render', function(response) {
15    ...
16  });
17  
18  // set isFbSdkLoaded to true to indicate that FB API has been loaded successfully
19  isFbSdkLoaded = true;
20};
21 
22// loadFbSdkTries indicates the current number of tries
23var loadFbSdkTries = 0;
24function loadFbSdk(){
25  if(isFbSdkLoaded || ++loadFbSdkTries > 3){ // at most 3 times 
26    return;
27  }
28  
29  // here you can insert debug messages such as 
30  // console.log('loading FB SDK..');
31  
32  (function(d){
33    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
34// I remove "if (d.getElementById(id)) {return;}" because it is possible for the browser 
35// to inject the script element into the DOM but the script is not executed somehow 
36// (e.g. bad URL or network is broken)
37// I've tried using a non-existent URL as js.src and the <script> element will 
38// still be injected into the DOM. 
39// Therefore to guarantee that the FB Javascript is executed I must insert the script 
40// multiple times until I am certain that the script has been executed. 
41// I cap the number of tries by using variable loadFbSdkTries  
42    js = d.createElement('script'); js.id = id; js.async = true;
43    js.src = "//connect.facebook.net/en_US/all.js";
44    ref.parentNode.insertBefore(js, ref);
45  }(document));
46  
47  if(!isFbSdkLoaded){
48    // 3000 means 3 seconds
49    setTimeout( function(){loadFbSdk();}, 3000 );
50  }
51}
52 
53loadFbSdk();

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.