Adding Facebook Share Button To Blogger

Adding facebook share button to your blogger site is just by logging in to your blogger account and click on the design link at the dashboard area. This will lead you to your blogger site layout page there you will see all the gadgets on your blogger site example like the search box gadget, the follower gadget etc.

You know to add more gadget to your blogger site then you need to use the add gadget link to pop up the entire free gadget being offer to you by blogger.

Now we are no longer adding the gadget for photos, search box, follower, converters etc to the site we are going to use the html or javascript gadget where you can add any css, html, javascrip code to or script to.

Once you click on the plus sign or adding it and the page changes asking you to add the title of the script you wants to add and a large text area for the code where you will copy this code bellow and add it in there or paste it there.

<!-- 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="http://www.ogbongeblog.com">Get</a> <a href="http://www.ogbongeblog.com/2011/04/how-to-add-facebook-share-like-buttons.html">this</a></div>

</div>

<!-- floating page sharers End -->

Once you are done adding it, then the next thing to do is to scroll to the save button area and click on it for the script to be save on your blog.

After saving the script, the pop up window will automatically disappear and you will be taking to your blogger site layout page then you will see the gadget you added with the name you added to it. You can move the gadget to any place of your choice on the page and then finally save the page. Refresh your blogger site or go to your blogger site then you will see the facebook share button being fixed at the background template at the  position you moved it to or you added the gadget to, now people can share your blog on there facebook wall.