Lazy Loading Social Buttons v2

lazy loading share buttons

This is the Version 2 of the Lazy Load Social Share buttons shared previously. It introduces buttons for social networks like LinkedIn , Digg and StumbleUpon . The look has also been pepped up a bit with rounded corners on the buttons. There goal remains the same , to lighten the total page size and fasten the page speed by loading the resources only when they are needed .

Demo

Features 

  • Asynchronous loading of all resources on hover 
  • Minimal CSS for styling the fake buttons
  • Page Size reduction by 300KB+
  • All major social networks like Facebook , Twitter , Google+ , LinkedIn , Digg supported 
  • Currently supports Single Instance per page
  • Hovering bug fixed
  • To add this in your blog you can use the one click Installer

    <table>
    <tr> <td width="100" height="40" ><a href="#" id='twitter-widget' >Tweet</a>
    <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share' ></a></td> <td width="100" height="40" ><a href="#" id='stumble-widget' >Stumble</a>
    <su:badge layout="2"></su:badge></td> <td height="40" width="100" ><a href="#" id='google-widget' > 1</a>
    <span class='g-plusone' data-size='medium' ></span></td> <td width="100" height="40" ><a href="#" id='facebook-widget' >Like</a>
    <div class='fb-like' data-layout='button_count' data-send='false' >
    </div>
    </td> <td width="100" height="40" ><a href="#" id='digg-widget' >Digg</a>
    <a class="DiggThisButton DiggCompact"></a></td> <td width="100" height="40" ><a href="#" id='linkedin-widget' >Share</a>
    <script type="IN/Share" data-counter="right"></script></td> </tr>
    </table>
    <style type="text/css" >
    //<![CDATA[
    .fb-like {display:inline !important;}
    #facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget,#digg-widget,#stumble-widget, #linkedin-widget { border-radius:5px;color: #ffffff !important; display: inline-block; line-height: 22px; text-align: center; text-decoration: none;width: 55px;}
    #facebook-widget, .facebook-widget { background: #3b5b99; }
    #linkedin-widget { background: #069; }
    #digg-widget {background:#FDFFB0;color:#716803 !important;}
    #stumble-widget {background:red;}
    #google-widget, .google-widget { background: #dd4b39; }
    #twitter-widget ,.twitter-widget {background: #33ccff;}
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <script type='text/javascript'>
    //<![CDATA[
    var element, script ;
    element = document.getElementById('google-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src = '//apis.google.com/js/plusone.js';
    document.body.appendChild(script);
    };
    element = document.getElementById('stumble-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src = '//platform.stumbleupon.com/1/widgets.js';
    document.body.appendChild(script);
    };
    element = document.getElementById('digg-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src="//widgets.digg.com/buttons.js";
    document.body.appendChild(script);
    };
    element = document.getElementById('linkedin-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src="//platform.linkedin.com/in.js";
    document.body.appendChild(script);
    };
    element = document.getElementById('facebook-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136";
    document.body.appendChild(script);
    };
    element = document.getElementById('twitter-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src = '//platform.twitter.com/widgets.js';
    document.body.appendChild(script);
    };
    //]]>
    </script>

    Or you directly add the code below into a HTML/JavaScript Widget

    <table>
    <tr>  <td width="100" ><a href="#" id='twitter-widget' >Tweet</a> 
    <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share' ></a></td>  <td width="100" ><a href="#" id='stumble-widget' >Stumble</a>    
    <su:badge layout="2"></su:badge></td>  <td width="100" ><a href="#" id='google-widget' > 1</a>    
    <span class='g-plusone' data-size='medium' ></span></td>  <td width="100"  ><a href="#" id='facebook-widget' >Like</a> 
    <div class='fb-like' data-layout='button_count' data-send='false' >
    </div>
    </td>  <td width="100"  ><a href="#" id='digg-widget' >Digg</a> 
    <a class="DiggThisButton DiggCompact"></a></td>  <td width="100"  ><a href="#" id='linkedin-widget' >Share</a> 
    <script type="IN/Share" data-counter="right"></script></td>    </tr>
    </table>
    <style type="text/css" >
    
    .fb-like {display:inline !important;}
    #facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget,#digg-widget,#stumble-widget, #linkedin-widget {    border-radius:5px;color: #ffffff !important;    display: inline-block;    line-height: 22px;    text-align: center;    text-decoration: none;width: 55px;}
    #facebook-widget, .facebook-widget { background: #3b5b99; }
    #linkedin-widget { background: #069; }
    #digg-widget {background:#FDFFB0;color:#716803 !important;}
    #stumble-widget {background:red;}
    #google-widget, .google-widget   { background: #dd4b39; }
    #twitter-widget ,.twitter-widget {background: #33ccff;}
    //]]>
    </style>
    
    <script type='text/javascript'>
    //<![CDATA[
    var element, script ;
    element = document.getElementById('google-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//apis.google.com/js/plusone.js';
        document.body.appendChild(script);
    };
    element = document.getElementById('stumble-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//platform.stumbleupon.com/1/widgets.js';
        document.body.appendChild(script);
    };
    element = document.getElementById('digg-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src="//widgets.digg.com/buttons.js";
        document.body.appendChild(script);
    };
    element = document.getElementById('linkedin-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src="//platform.linkedin.com/in.js";
        document.body.appendChild(script);
    };
    element = document.getElementById('facebook-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136";
        document.body.appendChild(script);
    };
    element = document.getElementById('twitter-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//platform.twitter.com/widgets.js';
        document.body.appendChild(script);
    };
    //]]>
    </script>
    

    Some Things to Take Care

    You can extend this script for other social sharing buttons like Pinterest ,Delicious, etc

    For it to work effective ,make sure to all scripts related to Social Media buttons are removed from your template

    There is scope for improvement here specially for multiple instance on a single page.

    Till the next update feel free to ask any difficulties you face while implementing this via comments

    26 Replies to “Lazy Loading Social Buttons v2”

      1. Hi Daniela

        Firstly Install it using the One-Click Installer above
        Then in the Layout option in the Blogger Dashboard , Drag the added widget below the Blogger Post Widget and Save the Arrangement

    1. I think background image has little increased the loading time for your blog as compared to past when it was best…but you know better
      And about post it is wonderful as always

      1. Thanks Ranjit for the suggestion , I am aware that the Page Size has increased a lot in the past few days, I will try to get it down as soon as possible

        Thanks for appreciating the post ^_^

      1. Check that you have no Third party share buttons like AddThis , ShareThis ,etc

        Also check that no Like Box , Twitter follow , Google+ Badge ,etc are present

        The last thing to take care is to remove the default Blogger sharing buttons

    Leave a Reply

    Your email address will not be published. Required fields are marked *