Imotiv

Tuesday, February 22, 2011

Tutorial: How to put facebook share button in post


I want to share how we can put the faceboook share button in our post... By click the Facebook share button, it will show a neat count of how many times your blog post has been shared on Facebook...

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...if you like it just share it o...Hope you all understand what i try to share....Any question may give me comment...

8 comments:

Isaac Tan said...

nice of you to share this info! :)

isaactan.net

Teratai Ibunda Catering said...

thanks for sharing.

~Snowman~ said...

Thanks for ur information!

Ronald Mohoni said...

Thanks the info

Candy10 said...

thanks for sharing!!!! =D now i got fb share button too =) *flying kiss*

x3,dayana said...

thank you for this :) really helpful!

Jeric Calvin said...

Thank you so much. I've been searching the whole night for this. Thanks again! :)

Anonymous said...

just a question, how will you put those codes on tumblr?

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Extra blog money with “HEARTBEAT”