Tag: javascript

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>