How to: load Social Media assets asynchronously

Load share buttons & badges Asynchronously – including Facebook Like, Share, Tweet, Google +1, Share, Pin it, LinkedIn Share, Stumbleupon and many more.

Social share buttons like Google +1, Facebook like, Tweet, Pinterest pin-it, and more use separate scripts to get rendered on a webpage. These scripts dramatically slow down the loading of a website, and slow loading websites are not user as well as search engine friendly…

So, we are left with removing these social scripts to improve the load time of our website. Is there anything that can cut down the extra load time without removing the scripts? Answer to this question is: Asynchronously loading all those social JavaScript files.

Asynchronous loading of JavaScript basically helps to improve the load time of websites by loading external and third-party JavaScript files dynamically.

Now, another question: what is Asynchronous loading of JavaScript files? Read about that here.

This post features an Asynchronous JavaScript code snippet that enables your website to load all Social Media assets asynchronously or lazily, and cuts down it’s extra load time.

The Script

The below given script helps you load all of the social media assets asynchronously on your site, let me call it Social media assets loader. All you need to do is to put only the markup segment of that particular asset (button or widget, whatever it is), and remove the rest of the JavaScript portion. For example, in the below code for Google +1 button…

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

..Only use the markup part, i.e. <div class="g-plusone" data-annotation="inline" data-width="300"></div> on your site. Do the same with the other social share buttons too, and at last, add the following script below the closing body tag (</body>):

<script type="text/javascript">
function script(url) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = url;
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
}
script('//connect.facebook.net/en_US/all.js#xfbml=1'); /* Facebook */
script('//apis.google.com/js/plusone.js'); /* Google+ */
script('//platform.twitter.com/widgets.js'); /* Twitter */
script('//assets.pinterest.com/js/pinit.js'); /* Pinterest */
script('//platform.stumbleupon.com/1/widgets.js'); /* StumbleUpon */
script('//platform.linkedin.com/in.js'); /* LinkedIn */
</script>

Save the changes. The above code supports Facebook, Google+, Twitter, Pinterest, StumbleUpon and LinkedIn scripts. After line 9 in the above script, you can add or remove external JavaScript files as per your need, but be sure that you know what you are doing – only remove a script if you know it’s not required. To add another script in the code, follow the below syntax:

script('script_url');

Replace script_url with the URL of that particular JavaScript file and add it just above the </script> tag in our Social media assets loader snippet.

Delay loading Social Media assets

I’ve done a little experiment on the site with the same snippet and noticed a great improvement in my Page Speed and YSlow score after it’s implementation. I’ve been using some social media widgets and buttons on the site, that were creating a big render block previously during load times.

What I’ve done is: I’m loading the scripts a little bit after the page finishes loading in the browser window. I’m using the setTimeout JavaScript function to load scripts after a few seconds of the page load. You may try it yourself, here is the snippet:

<script type="text/javascript">
function script(url) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = url;
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
}
function loadScripts() {
    script('//connect.facebook.net/en_US/all.js#xfbml=1'); /* Facebook */
    script('//apis.google.com/js/plusone.js'); /* Google+ */
    script('//platform.twitter.com/widgets.js'); /* Twitter */
}
function initialize() {
    setTimeout('loadScripts()', 1000);
}
window.onload = initialize(); 
</script>

Also let me know your thought on this, you are free to fork this script. Suggestions and doubts are welcome, keep experimenting :)