How to Add Facebook Like Button in Blogger Posts?

Social Media has become necessary to drive traffic from towards your blogs. Whether it is Facebook, Twitter or now Google+, all of them are important in order to get the most potential. So today, I'm going to share a Facebook like buttonwith you, which you can insert inside your blog's posts. You can either add it below the posts titles in Blogger or below the posts. So the trick is very simple and you just need to have a basic understanding of blogger designing.

Now let's start adding a very simple Facebook like button along with counter. This button will appear next to blog's every post where you want it to be appear. And this will make your blog more share-able on Facebook. Your readers would just love to click the button and share your content on Facebook.

Adding Facebook like Button

Now here is a straight forward tutorial for you to add the button in your blog posts:

• Go to your blogger dashboard
• Go to Template >> Edit HTML
• Tick the check box where it says "Expand Widget Template"
• Now find this peice of code inside your HTML coding: Tip(Use CTRL+F)

<data:post.body/>

Having found above code inside your template, now decide whether you want to display the Facebook like button below post titles or below the entire post, so if you want to show the button below the post titles then simply insert below code above<data:post.body/> or if you want to display the button below the post then simply paste below code below <data:post.body/>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

Save your template and you've successfully done the installation of Facebook button.  This button will be having a counter and will be looking like below image:

The above button is actually a vertical button, and if you want to show a horizontal button which is smaller than the above one then add this code to your template and use same syntax as described above:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

Save your template and now view your blog, the button should appear next to every post. And will be looking like this image:

Note: These two buttons will only appear on the post page and won't be shown on the home page. Also these buttons will only share your post to Facebook and these don't belong to your Facebook page like box.

Hope you liked this small tip and also let me know in comments if something went wrong.