Bookmarklet not working

Question

I am creating a bookmarklet which inserts facebook's all.js in the page in the head however it is not working without errors either, here it is:

javascript: (function() {
    var msg = '';
    if (typeof window.FB == 'object') {
        msg = 'Already Facebookified';
    } else {
        var js = document.createElement('script');
        js.id = 'facebook-jssdk';
        js.async = true;
        js.src = "http://connect.facebook.net/en_US/all.js";
        document.getElementsByTagName('head')[0].appendChild(js);
        msg = (typeof window.FB == 'object' ? 'Facebookified': 'Unable to Facebookify');
    }

    alert(msg);

})();

Can anyone suggest what could be wrong with it ?

Answer 1

There are some common mistakes made when trying to load a script asynchronously. This code should work:

function loadScript(src, callback) {
  var s,
      r;
  s = document.createElement('script');
  s.src = src;
  s.onload = s.onreadystatechange = function () {
/**
 * LOAD/READYSTATE LOGIC
 * execute if the script hasn't been ready yet and:
 * - the ready state isn't set
 * - the ready state is complete
 *   - note: readyState == 'loaded' executes before the script gets called so
 *     we skip this event because it wouldn't have loaded the init event yet.
 */
    if (!r && (!this.readyState || this.readyState === 'complete')) {
      //set the ready flag to true to keep the event from initializing again
      r = true;
      callback();
    }
  };
  document.body.appendChild(s);
}

You could use it as:

loadScript('http://connect.facebook.net/en_US/all.js', function () {console.log(window.FB)}

Answer 2

You probably want to use window.fbAsyncInit to run code once Facebook JS-SDK is loaded and add fb-root node (which is needed for some functionality):

javascript: (function() {
  var msg = '';
  if (typeof window.FB == 'object') {
    alert('Already Facebookified');
  } else {
    window.fbAsyncInit = function(){
      alert('JS-SDK loaded');
    };
    var d = document,
        js = d.createElement('script'),
        root_node = d.createElement('div');
    js.id = 'facebook-jssdk';
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    root_node.id = 'fb-root';
    d.getElementsByTagName('body')[0].appendChild(root_node);
    d.getElementsByTagName('head')[0].appendChild(js);
  }
})();

Answer 3

As zzzzBov has pointed out, you will need to "listen" for the script to be done loading. To that end there are at least two events for script elements that you can hook on to (onreadystatechange and onload). You can set them as follows:

javascript: (function() {
    var isFacebookified = function () {
        return typeof window.FB === 'object';
    };
    var scriptIsDoneLoading = function () {
        var msg = (isFacebookified ? 'Facebookified': 'Unable to Facebookify');
        alert(msg);
    };
    if (isFacebookified()) {
        alert('Already Facebookified');
    } else {
        var js = document.createElement('script');
        js.id = 'facebook-jssdk';
        js.async = true;
        js.src = "http://connect.facebook.net/en_US/all.js";
        js.onreadystatechange = scriptIsDoneLoading;
        js.onload = scriptIsDoneLoading;
        document.getElementsByTagName('head')[0].appendChild(js);
    }
})();

Once the script has finished loading, you should get your alert.

Hope this helps,

Pete