Presenting the Lazy Loading Floating Social Sharing Bar Widget for Blogger. It provides easy sharing options to your readers without the disadvantage of slow page load times attached with these buttons. The widget uses Socialite to asynchronously load all the scripts and styles related to the buttons as and when the user hovers over the widget. The widget comes in mainly two versions , one with small buttons and the other with large buttons
Simply select the version that suits you and add it to your blog using the buttons below
| Small Buttons | Left-aligned | Right-aligned |
| On All Pages | ||
| On Post Pages | ||
| Not on Pages (/p) |
| Large Buttons | Left-aligned | Right-aligned |
| On All Pages | ||
| On Post Pages | ||
| Not on Pages (/p) |
In case you want to add the code manually
1. Go to Blogger Dashboard , in Layout > Click Add a Gadget > HTML/JavaScript
2. Now paste the following code from below that suits your choice
Small Buttons Right Aligned
<style type="text/css" >
.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/*
.socialite-instance { display: none; opacity: 0; }
.socialite-loaded .socialite-button { display: block; opacity: 1; }
.socialite-button iframe { max-width: 100%; max-height: 100%; }
*/
#syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }
#syb-social {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px; display: block; list-style: none; }
#syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
#syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14vCgqyzuHN77ECXnovtUwj-v7TURc1Fm9ZWwazSQAp1swQbxEUBieJigGGDLGcNQ5udSyYcZW2C3qllH87-abCfmoYGqH8d5pw5JLDxGYhbm8eeaqiHuYHL3AQ55ZdpV5R5IJAp_G3ty/s1600/custom-default.png') 0 0 no-repeat; }
#syb-social .socialite-loaded {width: 100px !important; background: none; }
#syb-social .twitter-share { background-position: 0 0; }
#syb-social .googleplus-one { background-position: 0 -45px; }
#syb-social .facebook-like { background-position: 0 -90px; }
#syb-social .linkedin-share { background-position: 0 -135px; }
#syb-social .pinterest-pinit { background-position: 0 -175px; }
</style>
<a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
<ul id="syb-social" class="cf">
<li >
<a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
<span class="vhidden">Share on Twitter</span></a>
</li>
<li>
<a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium" rel="nofollow" target="_blank">
<span class="vhidden">Share on Google+</span>
</a>
</li>
<li>
<a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
<span class="vhidden">Share on Facebook</span>
</a>
</li>
<li>
<a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank">
<span class="vhidden">Share on LinkedIn</span>
</a>
</li>
<li>
<a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
<span class="vhidden">Pin It!</span>
</a>
</li>
</ul>
<script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
<script type='text/javascript'>
//<![CDATA[
// add pinterest extension
(function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
var element ;
element = document.getElementById('syb-social');
element.onmouseover = function () {
Socialite.load();
};
//]]>
</script>Small Buttons Left Aligned
<style type="text/css" >
.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/*
.socialite-instance { display: none; opacity: 0; }
.socialite-loaded .socialite-button { display: block; opacity: 1; }
.socialite-button iframe { max-width: 100%; max-height: 100%; }
*/
#syb-social-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }
#syb-social {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px; display: block; list-style: none; }
#syb-social li {clear: both; text-align: center; display: block; margin: 0; padding: 10px 3px 0px 6px !important; }
#syb-social .socialite { display: block; position: relative; width: 55px !important; height: 30px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14vCgqyzuHN77ECXnovtUwj-v7TURc1Fm9ZWwazSQAp1swQbxEUBieJigGGDLGcNQ5udSyYcZW2C3qllH87-abCfmoYGqH8d5pw5JLDxGYhbm8eeaqiHuYHL3AQ55ZdpV5R5IJAp_G3ty/s1600/custom-default.png') 0 0 no-repeat; }
#syb-social .socialite-loaded {width: 100px !important; background: none; }
#syb-social .twitter-share { background-position: 0 0; }
#syb-social .googleplus-one { background-position: 0 -45px; }
#syb-social .facebook-like { background-position: 0 -90px; }
#syb-social .linkedin-share { background-position: 0 -135px; }
#syb-social .pinterest-pinit { background-position: 0 -175px; }
</style>
<a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
<ul id="syb-social" class="cf">
<li >
<a href="http://twitter.com/share" class="socialite twitter-share" data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
<span class="vhidden">Share on Twitter</span></a>
</li>
<li>
<a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="medium" rel="nofollow" target="_blank">
<span class="vhidden">Share on Google+</span>
</a>
</li>
<li>
<a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
<span class="vhidden">Share on Facebook</span>
</a>
</li>
<li>
<a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="right" rel="nofollow" target="_blank">
<span class="vhidden">Share on LinkedIn</span>
</a>
</li>
<li>
<a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="horizontal">
<span class="vhidden">Pin It!</span>
</a>
</li>
</ul>
<script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
<script type='text/javascript'>
//<![CDATA[
// add pinterest extension
(function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
var element ;
element = document.getElementById('syb-social');
element.onmouseover = function () {
Socialite.load();
};
//]]>
</script>Large Buttons Right Aligned
<style type="text/css" >
//<![CDATA[
.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/*
.socialite-instance { display: none; opacity: 0; }
.socialite-loaded .socialite-button { display: block; opacity: 1; }
.socialite-button iframe { max-width: 100%; max-height: 100%; }
*/
#sybSocial {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
background-color: white; display: block; list-style: none; padding: 0; position:fixed; right:20px;top:200px;}
#sybSocial > li { display: block; margin: 0; padding: 10px; }
#sybSocial .socialite { display: block; position: relative; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnaUzckky4nJUUK_g1zrLZ5CSEazGabUTjgc_vlhMjg1aMTLu9DJiawFPkU0x8NTH2p3dSYSu7_9snGRmJOBE8bCkrkj_oR4mD2bPFxC4FqB9VHoswDhGBBORLapRyp2NLuPt7M39eTey/s1600/social-sprite.png') 0 0 no-repeat; }
#sybSocial .socialite-loaded { background: none !important; }
#sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
#sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
#sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
#sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
#sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
//]]>
</style>
<a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
<ul id="sybSocial" class="cf">
<li>
<a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
<span class="vhidden">Share on Twitter</span>
</a>
</li>
<li>
<a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
<span class="vhidden">Share on Google+</span>
</a>
</li>
<li>
<center> <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
<span class="vhidden">Share on Facebook</span>
</a></center>
</li>
<li>
<a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
<span class="vhidden">Share on LinkedIn</span>
</a>
</li>
<li><center>
<a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
<span class="vhidden">Pin It!</span>
</a>
</center></li>
</ul>
<script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
<script type='text/javascript'>
//<![CDATA[
// add pinterest extension
(function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
var element ;
element = document.getElementById('sybSocial');
element.onmouseover = function () {
Socialite.load();
};
//]]>
</script>Large Buttons Left Aligned
<style type="text/css" >
//<![CDATA[
.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/*
.socialite-instance { display: none; opacity: 0; }
.socialite-loaded .socialite-button { display: block; opacity: 1; }
.socialite-button iframe { max-width: 100%; max-height: 100%; }
*/
#sybSocial {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.05);
box-shadow: 3px 3px 4px rgba(0, 0, 0, .05);
background-color: white; display: block; list-style: none; padding: 0; position:fixed; left:20px;top:200px;}
#sybSocial > li { display: block; margin: 0; padding: 10px; }
#sybSocial .socialite { display: block; position: relative; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnaUzckky4nJUUK_g1zrLZ5CSEazGabUTjgc_vlhMjg1aMTLu9DJiawFPkU0x8NTH2p3dSYSu7_9snGRmJOBE8bCkrkj_oR4mD2bPFxC4FqB9VHoswDhGBBORLapRyp2NLuPt7M39eTey/s1600/social-sprite.png') 0 0 no-repeat; }
#sybSocial .socialite-loaded { background: none !important; }
#sybSocial .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
#sybSocial .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
#sybSocial .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
#sybSocial .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
#sybSocial .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }
//]]>
</style>
<a href="http://www.stylifyyourblog.com" alt="Blogger Tutorials" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
<ul id="sybSocial" class="cf">
<li>
<a href="http://twitter.com/share" class="socialite twitter-share" data-via="YourTwitterHandle" data-count="vertical" rel="nofollow" target="_blank">
<span class="vhidden">Share on Twitter</span>
</a>
</li>
<li>
<a href="https://plusone.google.com/_/+1/confirm?hl=en" class="socialite googleplus-one" data-size="tall" rel="nofollow" target="_blank">
<span class="vhidden">Share on Google+</span>
</a>
</li>
<li>
<center> <a href="http://www.facebook.com/sharer.php" class="socialite facebook-like" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">
<span class="vhidden">Share on Facebook</span>
</a></center>
</li>
<li>
<a href="http://www.linkedin.com/shareArticle?mini=true" class="socialite linkedin-share" data-counter="top" rel="nofollow" target="_blank">
<span class="vhidden">Share on LinkedIn</span>
</a>
</li>
<li><center>
<a href="http://pinterest.com/pin/create/button/?description=." class="socialite pinterest-pinit" data-count-layout="vertical">
<span class="vhidden">Pin It!</span>
</a>
</center></li>
</ul>
<script type="text/javascript" src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" ></script>
<script type='text/javascript'>
//<![CDATA[
// add pinterest extension
(function(a,b,c,d){c.network("pinterest",{script:{src:"//assets.pinterest.com/js/pinit.js"}}),c.widget("pinterest","pinit",{process:function(a){if(a.el.nodeName.toLowerCase()!=="a")return!0;var b="socialite-instance-"+a.uid,c=a.el.getAttribute("href");a.el.id=b,a.el.href="#"+b,a.el.setAttribute("data-default-href",c),a.el.setAttribute("onclick",'(function(){window.open("'+c+'")})();')},init:function(a){c.processInstance(a);var d=b.createElement("a");d.className="pin-it-button",c.copyDataAttributes(a.el,d),d.setAttribute("href",a.el.getAttribute("data-default-href")),d.setAttribute("count-layout",a.el.getAttribute("data-count-layout")||"horizontal"),a.el.appendChild(d),c.networkReady("pinterest")&&c.reloadNetwork("pinterest")}})})(window,window.document,window.Socialite);
var element ;
element = document.getElementById('sybSocial');
element.onmouseover = function () {
Socialite.load();
};
//]]>
</script>Note: For selectively displaying the widgets refer to Side Floating Share Buttons Post
3. Save the Widget
Hope this helps you in improving page load times and at the same time increasing sharing . In case you face any problem , feel free to ask
Find me on
Very Informative post ..you are rocking :)
Really amazing design lazy load share buttons. I am interested to using one widget in my blog.
Very nice trick Prayag sir, but unfortunately it's not working properly. The words are on top of the icons (pictures), so please tell me how to fix this.
You can go here to see the problem: http://cricketnns.blogspot.com/2012/08/india-vs-sri-lanka-series-review.html
Thank you!!! :)
Cheers,
CricketNNS
Hi there
I checked your blog , I saw that .vhidden class was not being applied for no apparent reason
To fix this , add the following CSS before the ]]></b:skin> tag in the Edit HTML of the template or inplace of the .vhidden style present in the Widget itself
.vhidden {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
AWESOMEE!!!!!!! the only problem for my site is, the Pinterest button keep on loading even before hovering the mouse
Thank you so much, it works great! :)
Btw, I subscribed to your updates too!
Cheers,
CricketNNS
Hi @Heyazwan
I checked your blog , and found that you had included the Pinterest script manually , To remove it , search and delete this line from your template
<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
Its present near the </body> tag in the Edit HTML of your template
THANK YOU!
Could you add Stumbleupon to the side please!!! Would really appreciate it! Thanks!!!
hi admin,, this very nice share button,, but i have some trouble here..
when i share my blog use the pinterest button,, so i check it on my pinterest.. and it not show what i share before..
why it does not work??
i very thanks to you if you could help me.. thanks so much :)
Hi!!
I'm Korean and I was start English blog!!
It's social buttons fantastic!!
Thank you!!
And.. my blog is 'Everything of Google Tips'
http://google-things.blogspot.com
Thanks.It is very helpful.I use this in My blog. Pinterest button not work .Please help me . My blog address http://shaifulaueo.blogspot.com
thanks for this tutor, so great article !
keep working :)
but this widget is not helping to share content.
It is not working for me. The Javascript isn't loading.
java-demos.blogspot.com is my blog.