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


Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

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

Post a Comment

Very Informative post ..you are rocking :)

Really amazing design lazy load share buttons. I am interested to using one widget in my blog.

CricketNNS said...

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;
}

gamep01nt said...

AWESOMEE!!!!!!! the only problem for my site is, the Pinterest button keep on loading even before hovering the mouse

CricketNNS said...

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

gamep01nt said...

THANK YOU!

Anonymous said...

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 :)

Hansol Lee said...

Hi!!
I'm Korean and I was start English blog!!
It's social buttons fantastic!!
Thank you!!

Hansol Lee said...

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

Nanang said...

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.