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



    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

    Thanks Prayang

    Keep it up... I always support you ^_^

    faster loading widget.

    Now i am interested to using in my blog.

    Wow, I'm trying this now!!!

    nice dude, thanks :D

    Hi I wanted to know how to add a google plus button below post titles. Please provide

    BE PROUD TO BE AN INDIAN
    Happy Independence Day
    Thanks for the tutorial. I am asking “After installing why he left side score is getting low?”
    In my case “If I remove my AdSense I will get 97 + 82 from GTMetrix. But I install AdSense I get 93 + 77”.
    Have any idea dear Prayag?

    Please enable the comment delete option, just for edit or modify. The above comment, a spell is missed. “Why the left side. Not why he left side”

    akshat said...

    sorry for asking question not related to this topic but pls help me...
    How to add background behind page menu and social buttons like u have done
    and in my blog when i add any css it doesnt show any effect. pls check my blog

    <a href="http://www.akshatworld.co.cc">AKSHAT'S WORLD</a>

    akshat said...

    url is
    http://www.akshatworld.co.cc

    Appreciate your support Danial :)

    Thanks Janmejaya

    In case you face any problems , feel free to ask

    Feel free to ask Aditya if you have any problems implementing it

    Hi Parigyan

    The above widget allows you to add +1 button under the post title. The added things in this are the other buttons from other social networks

    Hi again Trever
    Happy Independence Day to you too !
    The thing is that when you include the Adsense Code in your blog , it later includes other CSS files and scripts for it to work. These added resources lower down the score

    The delete option has been enabled , thanks for the suggestion
    Modifying the comment would be so much appreciate if Blogger launches it

    Zareen said...

    Hello ...Please Tell me how to load a blog faster ..

    Jon said...

    This is pretty awesome. My socials buttons are by far the slowest thing on my blog and I love the idea of lazy-loading them.

    awesome, thanks for share this..

    Nice Widget Bro Thanks For Sharing Your Knowledge With Us

    Deepak said...

    Huh! it almost ruined my blog!!

    nice post

    YOU HAVE BROKEN MY BLOG THAT I SPENT A WEEK MAKING!! What is the u/n and p/w so i can access my template to edit out your code????

    Ok just managed to delete this rouge code, dont trust it people! Goodbye

    Thanks :)

    shafeeq ts said...

    hi prayag,
    i want to add above "read more".