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 ?

scripts are loaded asynchronously, you'll need to listen for the script to be finished executing — zzzzBov, Jan 30 '12 at 20:02
@zzzzBov: I don't get that, can you elaborate what change should i make in the code ? — Dev555, Jan 30 '12 at 20:10
i think my answer to [this question](http://stackoverflow.com/a/5047016/497418) is probably relevant. — zzzzBov, Jan 30 '12 at 20:31

Juicy Scripter · Answer 1 · 2012-01-30T20:34:51.853

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

edited Jan 30 '12 at 20:34

answered Jan 30 '12 at 20:19

Juicy Scripter

25,778
6
72
93

Thanks but it gives back this error on console: `Uncaught SyntaxError: Unexpected token var` when I run it from bookmark. – Dev555 Jan 30 '12 at 20:31
I've fixed the snipped (it was due to fact that all lines are combined, and semicolon was needed after curly brace on line 8) – Juicy Scripter Jan 30 '12 at 20:35

score 2 · Accepted Answer · answered Jan 30 '12 at 20:59

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)}

score 0 · Answer 3 · edited May 23 '17 at 12:05

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

It does not help either. When I put it in bookmark and run, there are no errors and I get the message Already Facebookified however with firebug `console.log(typeof window.FB)` returns `undefined` — Dev555, Jan 30 '12 at 20:40
Whoops! `if (isFacebookified) {` should be `if (isFacebookified()) {` otherwise we're checking for existence of the function not invoking it. After adding the extra parens, it works for me. Edited response to reflect correct code. — pete, Jan 30 '12 at 22:05

Bookmarklet not working

3 Answers3