scribble

Scribble

About Blog GitHub
‹
›

22 Jul 2012
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




    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

    Til next time,
    Prayag Verma at 08:07

    scribble

    About Blog GitHub