How to Load Social Widgets Conditionally to Improve your Site’s Performance

Social Sharing is now tightly integrated into all mobile OS platforms. That means if someone is viewing a web page on an Android phone, or inside the mobile Safari browser of an iPhone, they can share that web page on Twitter and Facebook using the system-wide sharing menu without having to rely on bookmarklets or those tiny social sharing widgets.

These “tweet” and “like” buttons add several extra kilobytes to your web pages and if mobile users are less likely to use them, you may as well consider removing the social buttons completely when your website is accessed from a mobile phone. This reduces clutter and also improves the page speed score which is now a factor in Google search rankings.

Remove the Social Buttons on Mobile Devices

If you are sort-of convinced that social sharing widgets are less useful on your mobile site, here’s what you can do to prevent them from loading on the small screen. Remember, we aren’t just hiding the buttons but removing them completely so the associated JavaScript and CSS files won’t download on the user’s mobile device.

For a quick demo, open social-widgets.html in your desktop browser and then on a mobile device. The desktop view will load the social widgets but not the mobile device.

How to Load Social Widgets Conditionally

The technique is simple. We calculate the width of the user’s screen /browser and if the width exceeds a particular value (say 480 pixels), we load the associated social widgets.

To implement conditional loading on your blog /website, first add all the necessary social widgets to your blog using the usual procedure. For instance, you can visit facebook.com to generate code for the Like button while dev.twitter.com will provides codes the Tweet and Follow widgets of Twitter.

Remove the JavaScript from these generated codes – everything that’s between the <script> tags – and add everything else to your website template. Then copy-paste the following snippet before the closing </body> tag of your website template.

<script type="text/javascript">
 
(function(doc, script, minimum) {
 
   // Calculate the width of the user's screen
    var browserWidth = window.innerWidth 
        || doc.documentElement.clientWidth 
        || doc.body.clientWidth;
 
   // Load JavaScript only if the site is being viewed on a wide (non-mobile) screen
    if (browserWidth > minimum) {
 
    var js, frag = doc.createDocumentFragment(),
  
    // Credit : Stoyan Stefanov of phpied.com
    js_queue = function(url, id) {
        if ( ! doc.getElementById(id) ) {
            js = doc.createElement(script); 
            js.src = url; js.id = id; 
            frag.appendChild(js);
             }
         };
       
    // These are the most common social widgets, remove the ones you don't need     
    js_queue ("https://apis.google.com/js/plusone.js",      "googleplus-js");
    js_queue ("//platform.twitter.com/widgets.js",          "twitter-wjs"); 
    js_queue ("//connect.facebook.net/en_US/all.js#xfbml=1","facebook-jssdk");
    js_queue ("//platform.linkedin.com/in.js",              "linkedin-js");
    js_queue ("//assets.pinterest.com/js/pinit.js",         "pinterest-js");
 
    var fjs = doc.getElementsByTagName(script)[0];
    fjs.parentNode.insertBefore(frag, fjs); 
    }
 
// Set the minimum width here (default is 480 pixels)
} ( document, 'script', 480 ) );
 
</script>

The above JavaScript code asynchronously loads all the popular social widgets – Twitter, Facebook, LinkedIn, Google+ and Pinterest – but you may remove the js_queue calls for widgets that you do not plan to use on your website. Save the changes and you are done.

I have implemented a variation of the above code on my site as well. There’s a Facebook Like box in the right sidebar but it won’t load if you open this site on a mobile device.

Content Resource : http://www.labnol.org/