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.