15 Aug 2012
Lazy Loading Floating Share Bar Widget for Blogger
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('http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/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('http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/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('http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/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('http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/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
Til next time,
Prayag Verma
at 19:52
