Facebook Like button load async

The facebook like button historically was loaded inside a small iframe, but later the recommended approach changes to using a javascript to load the button. Only headache with this script is that it, like any javascript, can slow page loading due to the script blocking rendering of the html until it is finished loading. 

Facebook has updated their sample code to show how to load it asynchronously, but it uses an older trick that is no longer considered optimal- basically by using a small inline script which writes the actual script tag to the document object. This script can then be loaded after the html is finished downloading and procesing. This method is actually considered harmful nowdays (see https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/ ). This is the sample code from facebook: 

<script>
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
</script>

Notice the “parentNode.insertBefore” portion- this is where the concocted script tag is inserted into the parent document. 

However, the newer and cleaner method (part of html5) is to use a new attribute on the script tag named “async”- by adding this to the <scipt> tag, the browser will load the script asynchronously, automatically. Note that this can’t just be added to any script and have it work, as many scripts have dependencies on other scripts and thus have to be loaded in a particular order. But from what I can see, the facebook script doesnt have these dependencies. 

So, I’m now testing this script as a replacement and it seems to work fine: 

<script id="facebook-jssdk" src="http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0" async defer></script>

So far it seems to work great. I’d be curious if anyone sees any issue with this… and why isn’t facebook using it? 

UPDATE: 

A less disruptive method of doing this should also work – just add js.async=true to the old script, like this: 

<script>
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
js.async = true; js.src = "http://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

UPDATE 2:

While we're in here, we can make this script compatible with a secure/https version of the page by changing the "http://connect.facebook.net..." link to simply use "//connect.facebook.net...".

UPDATE 3:

I found this script elsewhere on the net, it seems to verify what I've built here:
<div id="fb-root"></div>
<script>
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js#xfbml=1';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

IE8 not supported in Jquery 2.x

If you’re using jquery 2.0 or newer, it is no longer supported in internet explorer 8 or older. You can use the older jquery lib to make things work again with IE8 though.

Note that the following code has the current at time of posting versions of jquery, you should replace this with whichever version of 2.x you are using, and check if there is a newer ver for 1.9.x as well.

ALSO note- since IE8 will be using an older version of jquery, you’ll likely need to test this separately to make sure your site still works with the 1.9.x version. Big headache? Sure.

<!–[if (!IE)|(gt IE 8)]><!–>

  <script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>

<!–<![endif]–>

<!–[if lte IE 8]>

  <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<![endif]–>

Async javascript loading for reduced page load time

Many of my websites have the standard addins for integrating with the rest of the world- the addthis.com gadget, the facebook like button, etc. A number of them also use google maps. Each of these includes a javascript file from a remote source, which normally will slow down the load time of your pages. Google fixed their analytics scripts some time back to allow loading them asynchronously, so the page is not paused while waiting for it to load. Strangely, a lot of scripts don’t yet support this, and I’m seeing in google webmaster tools that the calculated load time of my pages has suffered as a result. What should be a tiny page that loads in literally milliseconds, is now a 3 to 5 second loading affair.

After some research, it looks like this is not a simple task to undertake. There are a number of ways to load a script async, but each has a set of drawbacks. This seems to be a great overview of the various methods currently avaialble: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/ . I’ve seen that html5 also includes direct support for allowsing async loading of scripts, so maybe eventually this will no longer be a problem, but for now it’s a pretty big headache.

As time permits (or, when I get the chance to delegate it), I’m planning to try the solution listed on that linked page and see if addthis, facebook, google maps, perhaps even adsense, and even a wufoo form can perhaps be loaded in this async manner. I’ll report the progress here.