Lazy Loading Social Buttons for Blogger

tweet like +1
Social Sharing buttons are known for there bad effects on the page load speed. For some time I was trying to find a solution to this problem on lines of the Lazy Load Plugin for images , I was inspired by way Blogger Dynamic Views handled the problem , loading buttons styles and scripts on mouse-hover. Then I came across Taylor Fausak solution and did a bit of tweaking for making them work in Blogger.


Demo

Features 


  • Asynchronous loading of all resources on hover 
  • Minimal CSS for styling the fake buttons
  • Page Size reduction by 200KB+
  • All major social networks like Facebook , Twitter , Google+ supported 
  • Currently supports Single Instance per page




  • Video Tutorial



    Steps


    1. Go to Blogger Dashboard ,and go to Templates page of a blog


    new blogger dashboard


    2. Now click the Edit HTML button and tick the Expand Widget Preview option


    Edit HTML Blogger dashboard


    3. Search for ]]></b:skin> tag and add the following CSS before it




    .fb-like {display:inline !important;}
    #facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget {    color: #ffffff !important;    display: inline-block;    line-height: 22px;    text-align: center;    text-decoration: none;width: 55px;}
    #facebook-widget, .facebook-widget { background: #3b5b99; }
    #google-widget, .google-widget   { background: #dd4b39; }
    #twitter-widget ,.twitter-widget {background: #33ccff;}


    CSS related to Lazy load sharing buttons


    4. Now search for the </body> tag and add the following JavaScript before it

    <script type='text/javascript'>
    //<![CDATA[
    var element, script ;
    element = document.getElementById('google-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//apis.google.com/js/plusone.js';
        document.body.appendChild(script);
    };
    element = document.getElementById('facebook-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136";
        document.body.appendChild(script);
    };
    element = document.getElementById('twitter-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//platform.twitter.com/widgets.js';
        document.body.appendChild(script);
    };
    //]]>
    </script>

    scripts related to lazy load sharing buttons


    5. Now we have two options , either show the Social Share buttons on the Post Page only or on Index pages as well ( like Home Page , Label Page ).

    For Post Page Only

    Search for <div class='post-header-line-1'/> and add the following HTML just after it

    <div style="margin: 0px auto;text-align: center;" >
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a href="#" id='twitter-widget' >Tweet</a> 
    <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share'/>
    <a href="#" id='google-widget' >+1</a>    
    <span class='g-plusone' data-size='medium'/> 
    <a href="#" id='facebook-widget' >Like</a> 
    <div class='fb-like' data-layout='button_count' data-send='false'/>
    </b:if>
    </div>


    html related to lazy load sharing buttons


    For Index Pages as well as Post pages

    In this implementation , there are fallback buttons for all the pages except the Post page. When clicked they will give a Popup of the respective default sharing option.
    Search for <div class='post-header-line-1'/> and add the following HTML just after it

    <div style="margin: 0px auto;text-align: center;" >
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a href="#" id='twitter-widget' >Tweet</a> 
    <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share'/>
    <a href="#" id='google-widget' >+1</a>    
    <span class='g-plusone' data-size='medium'/> 
    <a href="#" id='facebook-widget' >Like</a> 
    <div class='fb-like' data-layout='button_count' data-send='false'/>
    <b:else/> 
    <a class='twitter-widget' expr:href='&quot;http://twitter.com/share?url=&quot;   data:post.url   &quot;&amp;text=&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;'>Tweet</a> 
    <a class='google-widget' 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;'>+1</a> 
    <a class='facebook-widget' 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;'>Like</a>
    </b:if>
    </div>

    6. Hit the Save Template button

    Some Things to Take Care

    You can extend this script for other social sharing buttons like LinkedIn ,Pinterest ,Digg , etc

    For it to work effective ,make sure to all scripts related to Social Media buttons are removed from your template

    There is lot of scope for improvement here specially for multiple instance on a single page. I will be doing a followup tutorial soon, till then feel free to ask any difficulties you face while implementing this in the comments below

    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

    Post a Comment
    MUXLIMO said...

    Whoa! this is a unique tuts i think. welldone, Bro!

    Abu Shaleh said...

    Great! Site loading speed is a major aspect of SEO

    Anonymous said...

    Awesome Loading Script ..

    Thanks

    Wow, I might try this, Thanks Prayag!

    Anonymous said...

    Awesome! Thanks for sharing!

    Unknown said...

    one of the best tutorial for bloggers,,will surely implement it

    Thanks Muxlimo

    Rightly pointed out Abu Shaleh

    People are here for content and they want it fast

    Aakash said...

    I did not get it first ...after hover I understood great stuff prayag.. :)

    Thanks Aakash , Glad you liked it

    MUXLIMO said...

    Honestly Bhai.. i do really want to apply this to my blog.. but i just confuse how to syncronize it with my addthis widget..

    This will not work with AddThis because AddThis loads all the scripts related to various share buttons on page load itself.

    Rahul Roy said...

    To much codes for me..

    demipress said...

    Hello Prayag i am sharing this wonderful lazy Loading Social Buttons on my blog. Step / Codes 1-3 okay, codes 4 not working on my blog http://demipress.blogspot.de/ The buttons are not visible unfortunately.
    Can you help me ... what's the problem?

    fahad said...

    Very nice
    thank you

    kawsar said...

    thanks but how do i add pinrest button and also can u tell me how to put the fb like button on the front of the list

    thichduthu said...

    there is a problem is that I want it to load in turn, I wants your help!!!
    Demo: http://new-djdownload.blogspot.com/

    Ebookdown said...

    Hello Verma,
    Recently I noticed that the gplus button appears before even mousing over it. Is there any way to solve?

    Since already thank you.