scribble

Scribble

About Blog GitHub

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 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('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='&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

    Til next time,
    Prayag Verma at 19:48

    scribble

    About Blog GitHub