Facebook Javascript SDK Not Loading

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?

hmm... you didn't specify that you also have implemented the required fb-root element in the body of your document... You do have one of those, right? — Lix
– Lix, Commented Apr 28, 2013 at 19:00
Oh yeah, I do, sorry for not including that. I'll edit the main question. — Maccyjam
– Maccyjam, Commented Apr 28, 2013 at 19:05

Jason Sperske · Accepted Answer · 2013-04-29 20:42:10Z

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,

answered Apr 29, 2013 at 20:42

Jason Sperske

30.5k8 gold badges77 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Sperske Over a year ago

It took a moment to fully unpack both code samples, but it looks like the only substantive difference is the between these two approaches is the setting of js.async = true

Maccyjam Over a year ago

Thanks for the reply. It doesn't look like this has done anything, as the same thing is happening and I'm not seeing the "initialising" message. I have tried other methods of getting the SDK that I found on other websites too, but all to no avail.

Collectives™ on Stack Overflow

Facebook Javascript SDK Not Loading

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related