Facebook JS SDK: Correct way to initialize the SDK

Question

Below is how Facebook recommends adding their JS SDK to your source.

 window.fbAsyncInit = function() {
    FB.init({
      appId      : '{your-app-id}',
      status     : true,
      xfbml      : true
    });
  };



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

If I understand correctly, the Second part of the code, creates a <script></script> node in the DOM and sets the source to //connect.facebook.net/en_US/all.js

Why does window.fbAsyncInit function come before that and not after? Won't the browser try to run it before it actually gets to the second part of the code where the SDK is actually loaded? Is it possible that all.js is loaded in the DOM only after FB.init() is called, thus generating an error?

Answer 1

Why does window.fbAsyncInit function come before that and not after?

You can write this code anywhere in you wish.

Won't the browser try to run it before it actually gets to the second part of the code where the SDK is actually loaded?

window.fbAsyncInit is triggered after the SDK is loaded asynchronously, so it doesn't matter where you write this- before/after or anywhere.

Is it possible that all.js is loaded in the DOM only after FB.init() is called, thus generating an error?

What error? Btw, all.js cannot be loaded after FB.init. It's the reverse process- FB can be initialized only after the SDK is loaded! Once the SDK is loaded it will automatically come inside- window.fbAsyncInit = function() {