How To Add Facebook Like Button Below Blogger Blog Post Title

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 button count. Ok! Let’s start if you want more blogger tutorials and widgets you can visit my other blog at Trickiezone. For the demo, you can visit Facebook Like Button page.


Instructions:

1.Login to your Blogger account.

2.Go to your blog Template section.

3.Then backup first your template.

4.After that click Edit HTML.

5.Find this <div class=’post-body entry-content’ expr:id=’&quot;post-body-&quot; + 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.

6.Then copy the code below and paste it after <div class=’post-body entry-content’ expr:id=’&quot;post-body-&quot; + 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 != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' 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 != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &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=65&quot;' 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 != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &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>
Goodluck! Hope you found this article useful.

0 comments:

Blogger Tips And Tricks
Copyright © 2013 Bloggers Hiden Tricks and Blogger Templates - Anime OST.