Load Social Sharing Buttons via Ajax & jQuery

I’ve recently been doing a lot of testing to improve page load times using various different techniques. However, I’ve been finding on my own sites and when I visit others, that social media buttons often cause a lot latency on page loading. When it first launched, there were a lot of complaints about the Google+ button slowing down pages significantly. Some SEOs even claimed a drop in rankings, although it’s difficult to verify this. It’s worth noting that Google released an updated version of the button which does load faster.

In the past I’ve covered Google’s take on Page Speed and search rankings, and whether it is becoming a more important feature of the algorithm remains to be seen. Speeding up page load times is good for users, and with rich-media and other bandwidth intensive features on websites continuing to increase, any SEO-friendly way to speed up your pages is a good thing.

Like many other website owners, I have added social interaction buttons to my blog posts, but I have never been happy with the extra lag this causes on page loads.

There are several methods being used by various sites that delay the loading of the social buttons until needed. This can be via the lazy loading technique or by using Ajax to call in the buttons when needed. With this in mind, I have worked on my own solution which I’m going to share with you today.

The following method uses the jQuery framework, and loads the social buttons using an Ajax request when a user hovers over the buttons with their mouse. I have also added a click function for tablets and smartphones, as a mouse hover event is pretty useless on such devices.

View Demo → Download Source Code →

How To Guide

New Improved Code based on feedback in the comments: 30th November 2011

  1. Add the following JavaScript code to the HEAD section of your page:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $('#share').bind('click mouseover', function(){
      $('#share').html('<img src="http://www.example.com/ajax-share-loader.gif">');
      $('#share').load("http://www.example.com/social-button-loading.html");
      $('#share').unbind('click mouseover');
     });
    });
    </script>
  2. In your page, add a DIV that contains images of the social buttons as follows (this block will be replaced with the live social buttons when the user hovers over the buttons or clicks for touch devices):
    <div id="share">
    <ul>
      <li><img src="http://www.example.com/tweet-share-button.png" alt="">&nbsp;</li>
      <li><img src="http://www.example.com/gplus-share-button.png" alt="">&nbsp;</li>
      <li><img src="http://www.example.com/linkedin-share-button.png" alt=""></li>
    </ul>
    </div>
  3. Finally, create an external file that contains the live social buttons that will replace the above button images. Save the file as social-button-loading.html and save it in the root for your site, I.e. www.example.com/social-button-loading.html. This external file should look as follows:
    <ul>
      <li><script src="http://platform.twitter.com/widgets.js"></script><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"> </a></li>
      <li><script src="https://apis.google.com/js/plusone.js"></script><g:plusone size="medium"></g:plusone></li>
      <li><script src="http://platform.linkedin.com/in.js"></script><script type="IN/Share" data-counter="right"></script></li>
    </ul>

I hope you find this useful, and I’d love to hear what impact this has on page load times for you, so please drop me some feedback in the comments below.

Feel free to tweak the code and extend the functionality if you find other uses for it. I’m keenly interested in how this impacts on load times and overall SEO health for websites, so please share your results.