Lazy Loading Floating Share Bar Widget for Blogger

Lazy Loading Floating share bar 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


Socialite Powered Floating Share Buttons
Demo

Simply select the version that suits you and add it to your blog using the buttons below


Small ButtonsLeft-aligned Right-aligned
On All Pages
On Post Pages
Not on Pages (/p)



Large ButtonsLeft-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

0 comments:

Post a Comment

 
© 2009 Blogger Tips 2013 | Powered by Blogger