Lazy Loading Social Share Buttons in Blogger using Socialite

Every Social Network's share buttons effect page load speed and size badly. Asynchronously loading the resources is one way to get around this problem. The lazy loading buttons I shared previously had a problem which only allowed single instance per page. Socialite addresses that issue and is much more versatile than the previous script. It has all the awesome features and still manages to keep its size under 5KB. Lets get started and see how to integrate it into your Blogger blog


OnScroll Demo

Socialite's Features

No dependencies on any other JavaScript library or framework  

Loads external resources related to the buttons only when needed

Less than 5KB when compressed

More accessible and styleable defaults/fallbacks

Support for Twitter, Google+, Facebook and LinkedIn

Extensible with other social networks 

Mimics native implementation when activated

Supported in all browsers

Video Tutorial

How to integrate into Blogger

1. In the Blogger Dashboard , go to Template > Edit HTML and Tick the Expand Widget Preview option

2. Now search for ]]></b:skin> tag and add the following CSS just before it

.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%; }
*/

#social { display: block; list-style: none; padding: 0; margin-left: 205px;position:absolute; }
#social > li { display: block; margin: 0; padding: 10px; float: left; }
#social .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; }
#social .socialite-loaded { background: none !important; }

#social .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
#social .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
#social .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
#social .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
#social .stumbleupon { width: 50px; height: 65px; background-position: -295px 0; }


#social2-load { margin: 0 0 0.625em 0; font-weight: bold; padding: 5px; }

#social2 { display: block; list-style: none; padding: 10px; margin: 10px; }
#social2 > li { display: block; margin: 0;float:left; }
#social2 .socialite { display: block; position: relative; width: 150px; height: 30px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14vCgqyzuHN77ECXnovtUwj-v7TURc1Fm9ZWwazSQAp1swQbxEUBieJigGGDLGcNQ5udSyYcZW2C3qllH87-abCfmoYGqH8d5pw5JLDxGYhbm8eeaqiHuYHL3AQ55ZdpV5R5IJAp_G3ty/s1600/custom-default.png') 0 0 no-repeat; }
#social2 .socialite-loaded { background: none; }

#social2 .twitter-share { background-position: 0 0; }
#social2 .googleplus-one { background-position: 0 -45px; }
#social2 .facebook-like { background-position: 0 -90px; }
#social2 .linkedin-share { background-position: 0 -135px; }
#social2 .pinterest-pinit { background-position: 0 -175px; }

Note : In case you can't find or its commented out then add the CSS in a style tag just before the </head> tag

3. Now Search for </body> and paste the following code just before it.

<script type="text/javascript"  src="http://socialitejs.com/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);

window.onscroll = function () {
    Socialite.load();
};
//]]>
</script>

4. Now you have a option that where you want them to appear . Here we will be displaying them just under the Post Title. Search for <div class='post-header'/> or <div class='post-header'> and add the following code just below it.

For Small Buttons

 <ul id="social2" class="cf">
        <li>
            <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite twitter-share" expr:data-text='data:post.title' expr:data-url='data:post.url' data-count="horizontal" data-via="YourTwitterHandle" rel="nofollow" target="_blank">
                <span class="vhidden">Share on Twitter</span>
            </a>
        </li>
        <li>
            <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite googleplus-one" data-size="medium" expr:data-href='data:post.url' rel="nofollow" target="_blank">
                <span class="vhidden">Share on Google+</span>
            </a>
        </li>
        <li>
            <a class="socialite facebook-like" expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' expr:data-href='data:post.url' 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 expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url  + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite linkedin-share" expr:data-url='data:post.url' data-counter="right" rel="nofollow" target="_blank">
                <span class="vhidden">Share on LinkedIn</span>
            </a>
        </li>
        <li>
            <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url  + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite pinterest-pinit" data-count-layout="horizontal">
                <span class="vhidden">Pin It!</span>
            </a>
        </li>
    </ul>

For Large Buttons

<ul id="social" class="cf">
        <li>
            <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'  class="socialite twitter-share" data-via="YourTwitterHandle" expr:data-text='data:post.title' expr:data-url='data:post.url' data-count="vertical" rel="nofollow" target="_blank">
                <span class="vhidden">Share on Twitter</span>
            </a>
        </li>
        <li>
            <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'  class="socialite googleplus-one" data-size="tall" expr:data-href='data:post.url' rel="nofollow" target="_blank">
                <span class="vhidden">Share on Google+</span>
            </a>
        </li>
        <li>
            <a class="socialite facebook-like" expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' expr:data-href='data:post.url' 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>
        </li>
        <li>
            <a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url  + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;' class="socialite linkedin-share" expr:data-url='data:post.url' data-counter="top" rel="nofollow" target="_blank">
                <span class="vhidden">Share on LinkedIn</span>
            </a>
        </li>
        <li>
            <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url  + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500&quot;); return false;'  class="socialite pinterest-pinit" data-count-layout="vertical">
                <span class="vhidden">Pin It!</span>
            </a>
        </li>
    </ul>

5. Save Your Template and Socialite will do the rest !


Options

The best part about it is that nearly everything in it can be customized or changed if needed. We will be discussing about how to add other networks to it

Adding another Social Network

If you observed in the above code , The code for Pinterest had to be added separately as it is not included in the Socialite.js file . Similarly other networks can be added like Buffer , Spotify , Github , etc. Download all the code related to the extensions from GitHub and then you can add them as you wish


The effects on Page Load Speed and Page Size
From the start I have been saying that the Page Speed and Size are most effected by the Normal Social Sharing buttons. Now lets see by how much

Without Socialite - Download PDF of Report

With Socialite - Download PDF of Report

As you see there is gain of around 0.4 seconds only but the page size reduction is around a whooping 280KB ! You can check these two yourself using GTmetrix

This tutorial was sans jQuery so as to maximize the benefit on Page Size. You can use it to have more advanced control over the loading of the resources. I will be doing another tutorial about that soon.

Now about these Social Sharing buttons , there has been a debate going on the internet that these buttons are useless and act as partial advertising for the networks. Would love to hear your opinion about this issue . Also feel free to ask if you face any problem implementing these in your blog

Written by Prayag Verma

Find me on Twitter

Email Newsletter

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