How To add Facebook Like and Share Button to Website & Blog

NEW Facebook Like  Button

 

1. Go To Blogger > Template > Edit HTML
2. Backup your template
3. Click Expand widgets templates box
4. Search for <data:post.body/>
5. Now add the code below it so that button appear at bottom of your post
   Or
   Add the code above "<data:post.body/>" so that button appear at top of your post

Easy alternate method

 code style 1::

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

 

                                       Go down for FB New Like button

 code style 2::

<!-- Facebook Like button Start --><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='float:left;padding:5px 5px 5px 0;'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:35px;'/></div></b:if><!-- Facebook Like button End -->

 

 

 FB like Box

 

 

 

Share Button for Blog

 

 

Code for Facebook Share Button Style 1

<div style="float:right;padding:4px;"> <b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> </b:if> <fb:share-button expr:href='data:post.url' type='box_count'/> </div>

    This style 1 add the share button to right side in your post

Code for Facebook Share Button Style 2

<div style="float:left;padding:4px;"> <b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> </b:if> <fb:share-button expr:href='data:post.url' type='box_count'/> </div>

Code for Facebook Share Compact Button Style 1

<div style="float:right;padding:4px;"> <b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> </b:if> <fb:share-button expr:href='data:post.url' type='button_count'/> </div>

                        Download

Know   how to  add FB  comment Box below your blog post

Facebook Blogger Plugin by Pradeesh | Techie Touch