Facebook JavaScript SDK Call after FB.init()

When developing Facebook Apps, the JavaScript SDK is usually loaded asynchronously to not block loading other elements of your page. However, it leaves us a problem: every JavaScript SDK call must be made after the SDK loading. Otherwise, a "FB not defined" error will be thrown. There are two common ways to handle this situation.

Put the codes inside the callback function of fbAsyncInit process

<div id="fb-root">
</div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID',
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html',
      status     : true,
      cookie     : true,
      oauth      : true,
      xfbml      : true
    });
    // Put Your Codes Here
  };

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

Add delay to your SDK call

/**
 * do something when user leaves a new comment
 */
function fb_event_subscribe() {
    try {
        FB.Event.subscribe('comment.create', function(response) {
            // do something here
        });
    }
    catch(err) {
        setTimeout("fb_event_subscribe()",1000); // try again later
    }
};

/**
 * subscribe the Facebook event "comment.create" after a one second delay, which
 * makes sure FB JavaScript SDK asynchronous initialization FB.init() is finished.
 */
setTimeout("fb_event_subscribe()",1000);