Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks.

This floating social bar has the following options: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you want.

Blogger, WordPress, Facebook, Share

How to add the scrolling social bookmarking bar

Step 1. Log in to your Blogger Dashboard, select your blog and go to Layout 

Step 2. Click on Add A Gadget link

Step 3. From the pop-up window, scroll down and select HTML/Javascript 

Step 4. Copy the code below and paste it inside the empty box.

Step 5. Save the gadget.

The code to copy-paste (updated!):
<style type="text/css">
#social-buttons {
padding:0 0 2px 0;
#social-buttons .button-share {
margin:5px 5px 0 2px;
<div id='social-buttons' title="Get this from">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); = id;
  js.src = "//";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='' rel='nofollow'>Tweet</a><script src=''; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src=""></script>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src=""></script>
<g:plusone size="tall"></g:plusone>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="">widget</a></div></div></div>
  • Vertical alignment - Change the 15% value of bottom. The code positions the social bar relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
  • Horizontal alignment - Change the -721px value from margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.
  • Twitter setting - Replace Helplogger with your Twitter username
  • Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code:
<div class='sbutton'> BUTTON CODE HERE </div>
Enjoy!!! :)


  1. Thanks for you post. I have a tutorial that show you how to add Facebook share button. You have just copy and pasting quality.

  2. I have installed the widget successfully, but the tweet button isn't working. Any ideas?

    1. Sorry, now i've seen the bug. Try adding the code again, it should work now...

  3. Kindly let us know why the tweet button isn't working.

  4. Hi Moffat, i've updated my post. Please add the code again.
    Thanks for visiting

  5. Hello-
    Will you be updating this code to include Pinterest?

    1. you can view the updated code with Pinterest included by visiting

  6. It is awsum ,I experienced some bugs but removed later on.
    Now it is working on my one of bloggers .

  7. thanks admin for sharing this gadget for may blog :)

  8. Hi..
    Thanks for nice tutorial. I am looking for the same to add this on my blog MyComptuerTuts.

    Once again thanks a ton!!

  9. admin i wanted to confirm before putting this code in my blog that it will work in dynamic view also?

  10. This is a fantastic post. I am very impressed. It's working perfectly.
    Can you also check out my blog at I want to confirm if it is being shown to others as well.

    I hope it works, I will be subscribing to you soon! Cheers!

  11. not working on my blog

  12. It's good, but StumbleUpon sometimes disappearing in my site

  13. very good,I got very used ..... thanks for sharing this gadget for blog....

  14. Love this! Thanks so much for sharing.

  15. Thanks for sharing such useful information. The information provided is very very niche and this information is not available so easily. Therefore I thank the writer for the useful input!!

  16. i don't know what's going on. fb button will be hidden in my post page but seen on homepage. if u can help me. visit my blog :)

  17. It's not working for me after many tries. How do I undo everything I did and saved (as instructed above)?
    (anonymous because it seems only I find it hard to do) :/

  18. Thanks!
    Using it now on my blog: :)

  19. I need to move it over to the left further. How?

  20. not working on
    i think css i have cs issues
    that is external css is interrupting inline css

  21. Dude, you are ROCK !
    Thank you very much for your great methods :)

    Like it

  22. how to add pinit and linked in to this..please help

  23. Digg button counter is not working

  24. I think you should now remove those digg and stumbleupon and update it with facebook, twitter and google plus.

  25. This is great, thank you so much. I would like to move it to the right, how would I do that?

  26. Thanks, It works! :-)

    Take a look at my blog

  27. how to put the 1 which you re using.its very nice...

  28. Great i like this and its put my blog.Thanks admin

  29. It is not working on my blog
    plz view my blog and help me finding the flaw

    i am using dynamic views

  30. I like to replace the Stumble Upon button with Pinterest instead, the link you provided from someone asking the same question on this post leads to a different type on social media sharing design! Just need some codes to replace stumble upon or just add additional codes for Pinterest. Thanks & looking forward to your reply! ;)

  31. Seriously, HOW CAN YOU GET THE CODES, when you have disabled the copy paste option.??

  32. Thanks, im now using it on my site, I adjust the margin to fit so it doesn't block my other gadget and my post body.


Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted.