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-->
<style>
#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 
0;z-index:10;}
#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;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></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>
</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: http://www.ogbongeblog.com/2011/05/how-to-add-floating-share-bar-to-right.html

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.

CLICK HERE TO SUBSCRIBE NOW!

CLICK HERE TO DOWNLOAD MY 20 FREE EBOOKS

Cheers!




    Comments

    Anonymous said…
    Thanks so much for this...i have really been wondering how you added this to your blog. Thanks once again.
    cat poop said…
    Thanks! it works for my blog well!
    Thanks man it worked for me.
    Very nice. But i think i have a problem..
    Look at mine
    http://photoshopph.blogspot.com/
    It doesnt look like whats the original looks.
    Baxterius said…
    Hi, nice job.
    But i don't want the box to appear on my home page, but instead in each post page of the blogg.
    Can you help me?
    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.
    Theodore said…
    Works perfectly -

    See it in action here: http://secretlivesofobjects.blogspot.com
    blogging tips said…
    wow, work perfectly, thanks blacky!
    Tblogger SM said…
    hello like button does not points any page of facebook . So if a person click on that . they will like what . please say me. thank you.
    gooodluck said…
    Thanks for nice update
    This is a nice post but i believe you can save some stress when you just use wibiya
    Aloy Son said…
    THANKS FOR YOUR NICE UPDATES
    Oyedepo John said…
    Just used this for my mini site and it worked so great. Very simple copy and paste. Thanks for the post.
    kampe blog said…
    thanks sir for this, great post installed on my blog now. thanks once again for this nice article and also tutorial
    Asim Nawaz said…
    Its not working on my site. I think that facebook has disabled this feature and replaced it with the like button.
    Samson Ojedeji said…
    Wow. Lovely. I av wondered how to get that done several times. It worked. Thanks. But couldnt find the facebook like tab amongst the buttons.