Floating Social Share Buttons for Blogger

Dhiraj Barnwal Thursday, 10 October 2013 34 comments
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.
Labels:
Google+ Pinterest

34 Comments to Floating Social Share Buttons for Blogger Post Yours! Read Comment Policy ▼

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

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

why this will not work on alll templates ??

Thanks A Lot for sharing this post!

Unfortunately Not Working.. Ah...!!

@ALL POST UPDATED PLEASE CHECK IT OUT AGAIN.

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

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

not working on my blog...
www.themedaddy.blogspot.com

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

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

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

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

Which Template do u use bro?

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...

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

how its working on your website, how I can fix this?

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

thankx buddy, very informative blog

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

Thanks for sharing this awesome code!

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

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

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

This comment has been removed by the author.

Post incomplete for this reason does not work Post

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

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

check it once , it is not working