Question

157

Is there a way to detect if the Facebook Javascript SDK loaded successfully?

rated 0 times [ 158] [ 1] / answers: 1 / hits: 49274 / 13 Years ago, thu, march 17, 2011, 12:00:00

I use Facebook as the membership system of my website. It uses the code to generate a login control, allowing users to login via their facebook account. It's essentially one click if they're already a member, 2 if they're not (for granting permissions).

I got a problem though... feedback is suggesting the login button isn't always loading correctly. Instead of loading the facebook login control, it simply states (in text) login via facebook - which is what the login button would say if the control loaded successfully.

Testing shows that is what happens when the facebook javascript SDK fails to load completely (for whatever reason). I've seen instances where a # in the url prevents the SDK from loading.

To better support this issue, how would I go about detecting if the facebook javascript SDK loaded, and is ready? That way, if it fails, I can leave some sort of note for the user.

Here's how it's currently added to the page:

<script>

window.fbAsyncInit = function () {

FB.init({

  appId: '***************',

  status: true,

  cookie: true,

  xfbml: true

});

FB.Event.subscribe('auth.login', function (response) {

  window.location.reload();

});



};

(function () {

  var e = document.createElement('script'); e.async = true;

  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

  document.getElementById('fb-root').appendChild(e);

} ());



</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

grayson

Add To Favorites

Follow

Total Points: 36

Total Questions: 113

Total Answers: 95

Location: Tonga

Member since Fri, Aug 21, 2020

4 Years ago

grayson questions

1 js error : 'createObjectURL' on 'URL': Overload resolution failed.

Sat, Mar 26, 22, 00:00, 2 Years ago

1 Play/Pause video onScroll in Reactjs

Mon, Sep 14, 20, 00:00, 4 Years ago

1 React Hook useContext is called in function age which is neither a React function component or a custom React Hook function

Mon, Feb 3, 20, 00:00, 4 Years ago

1 Adding Square Brackets to JSON-Object

Fri, Feb 22, 19, 00:00, 5 Years ago

1 React: set State or set Prop without a Rerender

Sat, Feb 9, 19, 00:00, 5 Years ago

View All

answered 13 Years ago alfredoc · Accepted Answer

You should load the Javascript Library Asynchronously and put all your FB related functions inside the window.fbAsyncInit method:

<div id=fb-root></div>

<script>

  window.fbAsyncInit = function() {

    FB.init({

      appId      : 'YOUR_APP_ID', // App ID

      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File

      status     : true, // check login status

      cookie     : true, // enable cookies to allow the server to access the session

      xfbml      : true  // parse XFBML

    });



    // Additional initialization code here

  };



  // Load the SDK Asynchronously

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

</script>

This code loads the SDK asynchronously so it does not block loading
other elements of your page. This is particularly important to ensure
fast page loads for users and SEO robots.

The URLs in the above code are protocol relative. This lets the
browser to load the SDK over the same protocol (HTTP or HTTPS) as the
containing page, which will prevent Insecure Content warnings.

The function assigned to window.fbAsyncInit is run as soon as the SDK
is loaded. Any code that you want to run after the SDK is loaded
should be placed within this function and after the call to FB.init.
For example, this is where you would test the logged in status of the
user or subscribe to any Facebook events in which your application is
interested.

A quick example is the following:

<div id=fb-root></div>

<script>

  var isLoaded = false;

  window.fbAsyncInit = function() {

    FB.init({

      appId      : 'YOUR_APP_ID', // App ID

      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File

      status     : true, // check login status

      cookie     : true, // enable cookies to allow the server to access the session

      xfbml      : true  // parse XFBML

    });

    isLoaded = true;



    // Additional initialization code here

  };



  function checkIfLoaded() {

    if(isLoaded) console.log(LOADED!);

    else console.log(NOT YET!);



    return false;

  }



  // Load the SDK Asynchronously

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

</script>

<a href=# onclick=checkIfLoaded();>Check</a>

enter

(Just clicked the check link a couple of times)

Please note that you can still construct the Login Link server-side and WITHOUT JavaScript. Example using the PHP-SDK:

$loginUrl = $facebook->getLoginUrl();

...

...

<a href=<?php echo $loginUrl; ?>>

    <img src=http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif>

</a>