Floating Social Share Buttons for Blogger

Posted On // 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'/>
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'/>
@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>
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
  </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);
 </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.


Rohit Asare Author
11 October 2013 at 21:31

not working bro :/

13 October 2013 at 15:09

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

Rajesh Kuchan Author
15 October 2013 at 15:19

i need this widget but it's not working on my site

Rajesh Kuchan Author
15 October 2013 at 16:21

why this will not work on alll templates ??

15 October 2013 at 21:33

Thanks A Lot for sharing this post!

15 October 2013 at 21:39

Unfortunately Not Working.. Ah...!!

16 October 2013 at 15:31


Alba Sanz Author
18 October 2013 at 02:18

Again not working

18 October 2013 at 16:10

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

Santosh Author
28 October 2013 at 03:37

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

28 October 2013 at 21:09

not working on my blog...

Anonymous Author
31 October 2013 at 16:40

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

Tahira Author
4 November 2013 at 13:14

Nice effort.

12 November 2013 at 18:45

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

26 November 2013 at 15:49

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

26 November 2013 at 15:51

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

Keyur Patel Author
2 December 2013 at 11:08

Which Template do u use bro?

28 January 2014 at 08:36

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

20 April 2014 at 16:05

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

Dilkash Matin Author
28 April 2014 at 22:27

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

Sagor Author
8 May 2014 at 20:52

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

ajay Author
6 September 2014 at 12:23

thankx buddy, very informative blog

14 September 2014 at 08:29

Finally It Is Working! Thanks

14 September 2014 at 08:29

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

29 December 2014 at 20:42

Thanks for sharing this awesome code!

Rupam RD Author
10 January 2015 at 18:56

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

16 January 2015 at 16:37

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

Raj Bhalla Author
24 February 2015 at 15:56

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

Home Blogger Author
27 June 2015 at 00:13
This comment has been removed by the author.
Home Blogger Author
11 August 2015 at 03:58

Post incomplete for this reason does not work Post

Anonymous Author
18 August 2015 at 09:01

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

Ujesh Nada Author
11 September 2015 at 21:59

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

20 October 2015 at 01:44

Not working anymore -_-'

6 March 2016 at 18:40

check it once , it is not working


Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Floating Social Share Buttons for Blogger |