Lazy Loading Social Buttons v2

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

Written by Prayag Verma

Find me on Twitter

Email Newsletter

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