How To Use Like Button In Your Blogger.com Blog

Hi! Everyone, hope you all are fine.
In this post I will tell you how you can use Facebook Like Button in your Blogger.com blog. Few people asked me how they can use Facebook like button on their blogger blog so here it is. If you don’t have a blog in Blogger then you can create it now.

1.       Go to your Blogger Dashboard –> Design –> Edit HTML –> now tick the Expand Widget Templates for the following blog in which you want to use Facebook Like Button.
2.       Search for the following code (to bring the browser search box press Ctrl + F or F3)
a)       If you want to use it before post and after title
<p class='post-header-line-1'>
b)       If you want to use it after post ends
<data:post.body/>
3.       Now place the following code just after any of the above code
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:70px;'/>
</b:if>
a)      Things you might need to change
(1)    layout=standard
You can change standard to button_count if you only want to show the button with no. of likes
(2)    show_faces=true
You can change true to false if you don’t want to show the face
(3)    action=Like
You can change Like to Recommend if you want to show recommend instead of like
(4)    font=arial
You can change arial to
(a)    lucida+grande
(b)   segoe+ui
(c)    tahoma
(d)   trebuchet+ms
(e)   verdana
Use anyone of follow font you like
(5)    colorscheme=light
You can change light to dark depending on your template color
(6)    change the width:450px and height:70px depending on your template
(7)    If you want to show Like Button in home page also then remove the following codes
<b:if cond='data:blog.pageType == "item"'>
</b:if>
4.       Now click on SAVE TEMPLATE, now check your blog everything is working fine
5.       Now everything is fine now again come to Edit HTML page for the same blog
6.       Now find opening head tag you will get it at the top of the page.
<head>
7.       Paste it just below the head tag
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.title' property='og:site_name'/> 
<meta content='Your Profile ID' property='fb:admins'/> 
<meta content='Category of your Blog' property='og:type'/>
i)        Things you need to change
(1)    Your Profile ID change it with your profile ID (If you want then you can remove the Profile ID line)
(2)    Category of your Blog choose the category of your blog from Facebook open graph page to go to Facebook open graph page Click here.
Note:- Before editing your Blogger template take the backup of your template by going to Blogger Dashboard –> Design –> Edit HTML –> now click on Download Full Template for the safe side.

2 thoughts on “How To Use Like Button In Your Blogger.com Blog”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.