Load several instances of your Tweet, Like and +1 buttons asynchronously

In one of my blogs, I was having issues with page loading because the social buttons were locking the page when they were being rendered. This is a serious issue for the visitor, since most of them just want to get to the info quickly. This issue is very noticiable on blogs, where you have dozens of these little buttons spreaded across your index page. Lets see how to fix it.

The standard social buttons that Facebook, Google and Twitter provide are meant for the regular user that may need to put just one of those on their page. This regular method locks the page while its being rendered, preventing the user from scrolling, clicking or doing anything on the page for a few seconds. For us, freaks of optimization, we need something else. This means loading the buttons asynchronously, without affecting the page load.

Google and Facebook noticed this issue recently and they fixed it by adding an “additional-hidden-non-public-hard to find” method for their social buttons. Twitter however, hasn’t provided a way to fix the issue, but we will handle it by ourselves. Lets take a look:

For Facebook Like

Do not use the regular XFBML code they provide on their page. Instead, add this right after opening your body tag:

<script type="text/javascript">
  window.fbAsyncInit = function() { FB.init({ appId: 'XXXXXXXXXXXXX', status: true, cookie: true, xfbml: true }); };
  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

And this, wherever you want your buttons to appear:

<fb:like href="YOUR_URL_HERE" layout="button_count" show_faces="false" width="110" font=""></fb:like>

For Google +1

The updated +1 Configuration Tool has an option to do this. Which is basically the same, a JS snippet right after opening your body 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>

And then, place the +1 tag wherever you want your button to appear:

<g:plusone size="medium" href="YOUR_URL_HERE"></g:plusone>

For Twitter Tweet

Like I explained before, Twitter hasn’t provided an async way to load the Tweet button, but looking at the FB and +1 buttons we can build it ourselves. Just place this code after opening your body tag:

<script type="text/javascript">
(function() {
        var twitterScriptTag = document.createElement('script');
        twitterScriptTag.type = 'text/javascript';
        twitterScriptTag.async = true;
        twitterScriptTag.src = 'http://platform.twitter.com/widgets.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(twitterScriptTag, s);
})();
</script>

Then place this “a” tag wherever you want your tweet button to appear:

<a href="http://twitter.com/share" data-text="YOUR_DESIRED_TEXT" data-count="horizontal" data-via="VIA_USERNAME" data-url="LINK_TO_SHARE">Tweet</a>

As you can see from the previous three examples, I am using exactly the same placing tag provided by Google, Facebook and Twitter, I am only changing the way they render by loading the JS file asynchronously. If you need to customize your buttons, you can always go to the official pages and get the code from there, just make sure you replace the script tags for the ones provided on this post.

Happy coding!