facebook share button on blog post

How to put facebook share button in ur blog post....Learning now~~~

For example: My blog post....

 

 

Actually, they have 2 type of facebook button, you may choose you prefer one:

  

Now i will give you the facebook share code for different type and different side, you can choose whether you want put in left or right hand side:

Type 1

Code to put in left hand side:

<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>

Code to put in right hand side:

<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>

Type 2

Code to put in left hand side:

<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>

 

Code to put in right hand side:

<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>

☀ Before put the facebook share code, go design and edit HTML

 → tick the Expand Widget Templates and press ctrl+F to find

<div class='post-header-line-1'/>

☀ After that, put the above facebook share code in below "post-header-line-1"

As show in my picture...

** you may click the preview to see whether is you prefer type...anything you don't know, u may comment...