Let your visitors like your content by adding Facebook Like Button to your post content. In this article I will teach you step by step on how to add Facebook Like Button below blogger blog post title with different button styles that suit to your content for example we have a standard, with box count, and with buttoncount. Ok! Let’s start if you want more blogger tutorials and widgets.
INSTRUCTIONS:
- Login to your Blogger account.
- Go to your blog Template section.
- Then backup first your template.
- After that click Edit HTML.
- Find this <div class=’post-body entry-content’ expr:id=’"post-body-" + data:post.id’> tag, how to do that? Just click the anywhere inside HTML editor and press Ctrl+F and input the tag and hit enter.
- Then copy the code below and paste it after <div class=’post-body entry-content’ expr:id=’"post-body-" + data:post.id’> tag and save the template.
- View your blog content page and you’ll find the button below blog post title.
STANDARD CODE:
<b:if cond='data:blog.pageType != "static_page"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/></b:if>
WITH BOX COUNT CODE:
<b:if cond='data:blog.pageType != "static_page"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&height=65"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/></b:if>
WITH BUTTON COUNT CODE:
<b:if cond='data:blog.pageType != "static_page"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
</b:if>
In my next I will discuss how to add this Facebook Social Plugin below blogger blog post, so stay tune for more updates. Goodluck! Hope you found this article useful.
