Floating Social Share Buttons for Blogger

Floating Social Share Buttons for BloggerCODE UPDATED !
Note: Does Not Work On Small Posts.

This tutorial will help you in adding Floating Social share buttons under every post of your blogger blog. I personally use this widget in my blog.

The widget is light in size and looks elegant. In every post after scrolling the widget will pop up at the lower bottom of the screen. The widget contains four social sharing buttons - Facebook, Twitter, Google+, LinkedIn.  There is a close button too to close down the floating share buttons.

A live demo can be seen on my blog itself. Just scroll down to the comments section and this floating social share buttons bar will appear. You can also close it by clicking the close button.

Once you have seen the demo to add this widget in your blog just follow the below steps.



Adding the Marker

First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='md-active-share-comment-marker'/>
   </b:if>
Add the code and follow the next step.

Adding the HTML/CSS/JS in HTML Editor


To add this widget you have to go to Blog Title → Template → Edit HTML and add the below given code just above </body>. The code has been optimized and made lite so it loads faster.

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script src='http://files.allbloggertricks.com/Scripts/abt-floating-share.js' type='text/javascript'/>
    <div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
    <div style='width: 800px; margin: 20px auto;'> <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228}.linkedin .icon,.linkedin .slide{background:#007bb6}</style>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FAllBloggerTricks&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> </iframe> </div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='AllBloggerTrick' href='https://twitter.com/share'> Tweet </a><script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script>
  </div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div><script type='text/javascript'>
    (function() {
      var po = document.createElement(&#39;script&#39;);
      po.type = &#39;text/javascript&#39;;
      po.async = true;
      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
      var s = document.getElementsByTagName(&#39;script&#39;)[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
</script>
 </div> <div class='linkedin share-button'> <i class='icon'> <i class='icon-linkedin'> </i> </i> <div class='slide'> <p> linkedin </p> </div> <script data-counter='right' type='IN/Share'> </script> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> </div></div><div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'> Don&#39;t You Think this Awesome Post should be shared ??<br/> <span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span> </div> </div> </div> </b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

After adding the code change change AllBloggerTricks with your Facebook Page's ID. Finally save the template.

You are done now. Now you and your visitors can see this awesome Floating Social Share Buttons in your blogger blog.

33 comments:

  1. Replies
    1. why this will not work on alll templates ??

      Delete
  2. Great floating share buttons. I was looking for this a while. Your blog really rocks. keep blogging

    ReplyDelete
  3. i need this widget but it's not working on my site
    www.123LoveBook.com

    ReplyDelete
    Replies
    1. you should use same jquery version as this web, or you have to modify the javascript depend to your jquery version

      Delete
  4. Thanks A Lot for sharing this post!

    ReplyDelete
  5. Unfortunately Not Working.. Ah...!!

    ReplyDelete
  6. @ALL POST UPDATED PLEASE CHECK IT OUT AGAIN.

    ReplyDelete
  7. Sir My Blog Is This-->http://pcgameloverzz.blogspot.com/
    But Sir This Widget Is Not Working On It Please Do Something Because I Really Want This Widget

    ReplyDelete
  8. Keep up the good work. This is not working. Can you please take a look.

    ReplyDelete
  9. What do you mean by "Not working on small posts"?

    ReplyDelete
  10. This is nice and working good, how to add this widget below post title?

    ReplyDelete
  11. look good in myblog, thanks man..
    here the preview
    blognafaro.blogspot.com and choose one article :)

    ReplyDelete
    Replies
    1. how its working on your website, how I can fix this?

      Delete
  12. Which Template do u use bro?

    ReplyDelete
  13. amigo tem como vc fazer um tutorial mais com os botões fixos abaixo das postagens ? acho mais interessante coloca-los abaixo das postagens, gostei muito desse efeito nos botões já tinha visto em outro blog mais ñ encontrei nenhum tutorial explicando como coloca eles assim... vlw um abraço...

    ReplyDelete
  14. See i have added the code here-->http://andro8tech.blogspot.in/ but it's not working check and tell me

    ReplyDelete
  15. It's working in my blog.. Thanks for sharing this code..

    ReplyDelete
  16. thankx buddy, very informative blog

    ReplyDelete
  17. Finally It Is Working! Thanks

    ReplyDelete
  18. Just Can U Make The Main Test Like "F" Of Facebook Capital And Same To Others

    ReplyDelete
  19. Thanks for sharing this awesome code!

    ReplyDelete
  20. bro I tried this, and followed your steps..but unfortunately it's not working :(

    ReplyDelete
  21. Nice Social buttons shared. but can we reduce the size of icons. allthough its a nice and a very useful article.

    ReplyDelete
  22. hi..It is not working on my blog. Pls help.

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. Post incomplete for this reason does not work Post

    ReplyDelete
  25. not work for me, please help http://empireshares.blogspot.com/

    ReplyDelete
  26. this share button is really cool fro blogger thanks buddy for sharing this to us

    ReplyDelete
  27. check it once , it is not working

    ReplyDelete