Lazy Loading Social Buttons v2





Prayag Verma
| Sunday, July 22, 2012 | Comments


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


    By Prayag Verma
    A blogger and wannabe Web Developer + Designer currently in college learning about computers. A CSS Lover , Blogger Template Designer , Manga Fan , Geeky Nerd , Music Addict and Yogaholic ! Get more from Prayag on and Twitter


    Want to get these Updates straight to your Inbox , Then Subscribe !


    JOIN THE DISCUSSION

    Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it using Postify and then paste it in the comments