12 Aug 2012
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 blogOnScroll Demo
Socialite's Features
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('http://4.bp.blogspot.com/-w1rWniV6RO0/UCeUEh3hl4I/AAAAAAAAHIA/3xuG-HPLmpc/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('http://3.bp.blogspot.com/-lGVQZowcc2k/UCeUCQ3eqoI/AAAAAAAAHH4/BV8ILPyDIGY/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='"http://twitter.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippet' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&description=" + data:post.title + "&media=" + data:post.thumbnailUrl' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"http://twitter.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippet' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&description=" + data:post.title + "&media=" + data:post.thumbnailUrl' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=550,height=500"); 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
Til next time,
Prayag Verma
at 19:48
