How to add Facebook Share & Like buttons, Digg and Tweet Button to the side of blogger/blogspot blogs

ALERT: Get the updated floating share bar here

In this tutorial, I am sharing with you, how to add floating bar of social media buttons to a Blogger blog. This simple and very useful widget includes Facebook Share, Tweet, Digg and Facebook Like buttons. Each of them comes with a live counter.

This widget is a modified version of the widget originally created by BloggerSentral. In the modified version of the widget am sharing with you, I have introduced the facebook Like button and replaced the TweetMeme button with standard Tweet button. More so, the bar will float far to the left of your blog.

I. Adding the buttons

  1. Login to your Blogger account.
  2. Go to Layout.
  3. Click Add A Gadget.
  4. In Add A Gadget window, select HTML/Javascript .
  5. Copy the code highlighted below and paste it inside the HTML/Javascript box. 

<!– floating page sharers Start Share This With Friends–>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
<div id=’pageshare’ title=”Share This With Your Friends”>
<div class=’sbutton’ id=’fb’>
<a name=”fb_share” type=”box_count” href=””>Share</a><script src=”” 
<div class=’sbutton’ id=’rt’>
<a href=”” class=”twitter-share-button” data-count=”vertical” >Tweet</a>
<script src=’’ type=”text/javascript”></script>
<div class=’sbutton’ id=’su’>
<script src=”″></script>
<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’>
<script src=’’ type=’text/javascript’></script>
<a class=”DiggThisButton DiggMedium”></a>
<div class=’sbutton’ id=’gb’>
<script src=”″></script>
<fb:like layout=”box_count” show_faces=”false” font=””></fb:like></div>
<div style=”clear: both;font-size: 9px;text-align:center;”><a href=””>Get</a> <a href=””>this</a></div>
<!– floating page sharers End –>

Save the gadget and Click Save button on the upper right corner.

View Your blog and I hope it works for you.

UPDATE: If you want it to float to the right hand side of your blog, read:

Join the BloggersLab on facebook today for instant answers to your blogging questions, while also connecting with other Bloggers.

Feel Free to share this blog post with your friends using the share buttons below this post.

If you have anything to contribute or ask, Kindly make use of the comment form below.

Please, do not forget to SUBSCRIBE to this blog, so that you can be receiving future Blogging tricks/tips, articles, freebies DIRECTLY into your email inbox, even when you are not online.




    Written by Jide Ogunsanya

    Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here.


    Leave a Reply
    1. Thanks so much for this…i have really been wondering how you added this to your blog. Thanks once again.

    2. FWIW – This code isn't just for Blogger.

      I just took your code and added it to my HTML website. All I had to do was copy and paste, so easy. Out of all the floating social share codes I found, this was by far the easiest to ease.

    Leave a Reply

    We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

    [announcement_bar auto='5' class='bookmark']