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


    Written by Prayag Verma

    A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

    Email Newsletter

    Like what you read here in this post ?
    Get new posts delivered straight to your inbox

    Post a Comment

    I would like to use this button below each post?
    How do I do that? Thanks Dani from Germany.

    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

    Thank you ... But then in between are the comments field. The correct final solution is not yet.
    Thanks for you work.

    Daniela , can you share your blog URL , that way I can see what the exact problem you are facing and help you fix it faster

    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

    How do we make sure to all scripts related to Social Media buttons are removed?

    hi dud, do you can modify the border on ads and search engine, like background?

    example: hxxp://modification-blog.blogspot.com/

    please, help me :)

    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

    I will try to provide a tutorial about it soon

    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 ^_^

    ok, thanks dud :)

    techgod8 said...

    Nice Buttons Thanks

    the button looks simple and nice.i have to install mine too..thanks

    Thanks for posting your buttons bro..

    utsav said...

    hey nice widget..
    i love to add this on my blog

    safer cruz said...

    hello would like to add the button pinterest as would?

    Miles Rang said...

    hi i want Share and Spread button like the one u have. how to get that?

    Goran said...

    I have problem. When i install this widget my tweet, like and +1 button are not hidden. If you check your demo you will see the problem with +1 button. My blog is http://www.cartown-design.com/

    Ashish said...

    Cool thanks for the share :)
    But i would prefer square space :D :P

    satriya said...

    nice butten,. i will be use on wordpress


    Regards
    Car Town Template Design by SATRIYANEWS on Terbarukan

    kawsar said...

    some of the buttons are loading before you hover over it why is this

    Backlinks said...

    Thanks for the nice button

    i want to add this widget after my post title .
    my website => www.aphilomath.com

    satriya said...

    hello friends, you'r article is very nice, sure i like it :)

    Regards
    http://carasehat.info || http://cartowntemplate.com || http://satriyanews.com || http://asiatravelcorner.com

    Kamal G said...

    I used this widget in my blog called QUIZVOOK,Thanks a lot for sharing.

    After lots of editing I have done... but without you it wont be possible...
    Thanks dude.!!!!