World Blog

How to Add the Facebook Like Button Below every Post

1. First Generate the Facebook code using the options below. (Code will be updated with these details)

<b:if cond='data:blog.pageType != "static_page"'>
<div style='float:left'>
<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:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="segoe ui" action="like" colorscheme="dark"></fb:like>
</div>
</b:if>

2. Copy the Above code. Login to your Blogger Account and go to Design > Edit HTML and click on the check box which says “Expand Widget Templates”
3. Look for <data:post.body/> and immediately below that place the copied code.
4.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.

This is necessary for all FBML widgets using the fb tag. So if you have already added the namespace while adding some other FB plugin, then you can skip this.
4. Now Save the template and you should see the Like Button near each of your posts. You are done :)
Do you feel that the Like Button is boring and not so likable? – Then checkout the Facebook Like box, a styled version of the Like Button which would definitely bring you more “Likes” Also Check out :

Button Type
Text on Button
Show Send Button
Color Scheme
Font
Float
Location of the Button
Display

Saturday, February 2, 2013

Facebook Like Button

How to Add the Facebook Like Button Below every Post