Facebook Share Button with Live Counter for blogger in 4 different Styles

Today we will learn How to add a facebook share button with live counter in our blogger and blogspot blogs.
Facebook has finally launched official share counter button just like twitter retweet button from tweetmeme.com. This button will help your visitor to share your story on facebook. It also shows a neat count of how many times your story have been shared on facebook.

Facebook share button counter Style 1

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/> 
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share counter Style 2

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/> 
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook share counter Style 3

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> 
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook share counter Style 4

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> 
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Now lets see How to add facebook share button with counter
1. Choose one of the counter buttons from above and copy its code.
2.Now log into your blogger dashboard. go to layout and click on edit html.
3.Now check on expand widget content.
4. search for the following code in your template.

<data:post.body/>

and just before it paste the facebook share button code that you copied above.
5. Now save your template. you can now see a facebook share badge in each of your posts.