Demo
Features
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
Some Things to Take Care
<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>
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 Description: Lazy Loading Social Buttons v2 Rating: 4.5 Reviewer: Unknown - ItemReviewed: Lazy Loading Social Buttons v2
Posting Komentar