How To Load Social Buttons Asynchronously

How to load social buttons asynchronouslyLast week we set ourselves the challenge to find out how much page load time we could shave off our sister website, the UK Business Directory using Firefox’s neat little ‘Page Speed’ extension (available through Firebug). Now a few years ago this task would have been pretty straightforward and involved the re-optimising of images and tidying up of HTML and CSS code but, as we found out, when it comes to improving the performance of a page displaying a plethora of social buttons, there’s a bit more to it than that!

Social Buttons…a bit of background

Social buttons provided by Facebook, Twitter, Google+ and the like are added to web pages to encourage visitors to share interesting content with people in their social networks. 

social-buttons

More commonly found on blog posts, social buttons can in fact be added to any web page be it a homepage, article or product page and specifically relate to the page they are on. This means that clicking on a Google +1 button on one page of a website shares the content of that particular page, not the whole website.

This can be particularly useful for product pages because social shares can act as little endoresments for that particular product – think about it, if you’re trying to choose between two similar products and you see that one has been ‘Liked’, or ‘+1’d’ by one or more of your friends, you’ll be influenced. Like it or not (pardon the pun) these social buttons are powerful so they’re worth getting right!

Step 1 – Creating your Social Buttons

Creating your social buttons is pretty straightforward. Social Networks provide plugins and widgets that you create and tailor which provides the code that you then copy and paste into your web pages.

Facebook in particular has a whole host of different plugins including comments boxes, activity feeds and login boxes but for the purposes of this post we’re concentrating purely on the Facebook Like/Send button, the Google +1 button and Twitter’s Follow button. You can create your own buttons by clicking on the links below.

facebook Facebook Social Plugins
twitter Twitter Social Widgets (you must be logged in to your account)
gplus Google+ Social Plugins

 
Step 2 – Adding Social Buttons to your Webpage

Social buttons are added to your webpage by simply copying and pasting the code generated by your chosen network in Step 1. This code is usually in the form of a placeholder <div></div> tag combined with some JavaScript code which is also provided. When loaded, this JavaScript renders the actual buttons and their individual information i.e. their number of ‘Likes’ or ‘+1’s’.

Now the networks themselves actually recommend placing this JavaScript at the very foot of your HTML because of the time it takes to load the individual information for your button. Times this by 3, 4 or even 5 buttons and you’ll soon notice that when your webpage starts loading, it has to wait for all these social buttons to load which causes a marked delay in the loading of other content and can impact on the user experience of the page.

Step 3 – Asynchronous Loading of Social Buttons

To resolve this issue, one of our developers set about the task of developing a way to load these social buttons asynchronously; or after the rest of your content has finished loading.

This is achieved using jQuery (a JavaScript library) and its event $(window).load() to only render the buttons after all other page content.  

Follow the steps below to load your own social buttons asynchronously:

  1. First of all you need to include the jQuery library in your website by adding this JavaScript function to your <head></head> section.
     
    <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js” type=”text/javascript”></script> 
     
  2. Next, insert the block of code below also into your <head></head> section right below the line of code above.
      
    <script type=”text/javascript”>

    jQuery(window).on(‘load’, function(){

    //facebook script

    (function(d, s, id) {

    var js, fjs = d.getElementsByTagName(s)[0];

    if (d.getElementById(id)) return;

    js = d.createElement(s); js.async= true; js.id = id;

    js.src = “//connect.facebook.net/en_GB/all.js#xfbml=1”;

    fjs.parentNode.insertBefore(js, fjs);

        }(document, ‘script’, ‘facebook-jssdk’));

    //twitter script

    !function(d,s,id){

    var js,fjs=d.getElementsByTagName(s)[0];

    if(!d.getElementById(id)){

    js=d.createElement(s);

    js.id=id;js.src=”//platform.twitter.com/widgets.js”;

    fjs.parentNode.insertBefore(js,fjs);}

    }(document,”script”,”twitter-wjs”);

    //google+ script

     (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>
     

  3. Last but not least, add the placeholders for each social button to the <body></body> of your page (examples below), remembering to replace with your site URL or your Google+ page as required. 
      
    Facebook:
    <div data-href=”YOUR SITE URL” data-send=”true” layout=”button_count” data-show-faces=”false”></div>
      
    Twitter: <a href=”YOUR SITE URL” data-show-count=”false” data-show-screen-name=”true”></a>
      
    Google+: <div data-size=”medium” data-href=”YOUR GOOGLE+ PAGE ID” ></div>
        

That’s it, you’re done!

I’d love to hear how you get on using the code above so do please share your experiences with our readers by commenting below.
avatar Name: James Briggs
About: James is a Digital Marketing Consultant with over 12 years of design, development, search engine optimisation and project managment experience previously fullfilling a number of senior roles for two of the South's most well established and successful digital marketing agencies before setting up WebSafe Solutions Ltd in 2009. In his own words..."I've planned, designed and developed countless websites and am proud to have helped hundreds of clients to get the very best from their digital marketing campaigns. Some would say I have an unusual blend of knowledge, skill and experience and for my sins I'm an absolute perfectionist!"
Posts by James Briggs (29)