Facebook Javascript SDK未加载

Question

I have just started working with the Facebook SDK and I am trying to use a script which grabs a user's name and friend's list. This is the initialization code I am working with:

window.fbAsyncInit = function()
{

    console.log("initialising");
    FB.init(
    {
      appId      : 'APPID',
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      oauth      : true, // enable OAuth 2.0
      xfbml      : false // dont parse XFBML
    });


    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            console.log("RESPONSE IS CONNECTED!");
        } else if (response.status === 'not_authorized') {
            console.log("NOT AUTHORIZED");
        } else {
            console.log("NOT LOGGED IN");
            FB.login();
        }
    });


};

(function(d, s, id){
 console.log("Loading SDK!");
 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'));

I have an fb-root element at the top of the document, outside of the script tags. About half of the time, the SDK loads fine and I see the initialising and connected messages in the console. However, the other half of the time, I only see the "Loading SDK" message and nothing else, which I assume means that the SDK isn't loading correctly for whatever reason. I have also noticed that it loads on navigation to the page, but rarely on refresh.

My question is: what is causing the SDK to not load some of the time and how can I solve the issue?

Answer 1

According to the latest documentation from Facebook regarding the use of the Facebook JavaScript SDK, the method to include the SDK asynchronously has been updated:

(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));

It's not immediately obvious to me why this would be more reliable as compared to your approach but I can say this is what I use on my site and I have not experienced any intermittent issues,