How to Add Facebook Like Button in every post for Blogger

Many blogs are putting Facebook Like Button every post they have on their blog but there are still a few blogs that don't have Facebook Like Button. This How to Add Facebook Like button in every post in Blogger is for all newbie in blogging or even a blogger that don't know how to do it. Of course, this tutorial is for blogger that use Blogger.com Platform.

What is the benefits in putting Facebook Like Button on their blogs?

Some blogs put this because they just want to customize their blog others put Facebook Like Button because they want it. But the benefits of this to bloggers is traffic. Why? Not just a simple like it's done. When they like it, of course it will automatically link to the readers Facebook account. Whatever the user do it will automatically published to their account. So when they like, it will automatically published to their account they like on your link. So if their friends saw it, he/she might interested and view your blog post. Then, you get traffic!

Now, let me teach you on how to add Facebook Like Button in every posts for Blogger.

1. Sign in to your Blogger > Dashboard > your blog’s Template > Proceed > Edit HTML, and check “Expand Widget Templates” 

2. Look for this code (Ctrl + F)

<data:post.body></data:post.body>

3. Then, put this code above if you want to put before post body and below if you want to put after post body.

<!-- facebook like this -->

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=100&amp;action=like&amp; font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px;'/>

<!-- /facebook like this -->

That code will look like this

Other Facebook Like Layout Options

Facebook Like Button A

<!----Button Count---->

Code:

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

Facebook Like Button B
<!----Box Count---->

Code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding: 10px 0px 5px 0px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&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;'/>
</div>
</b:if>

Customize button

layout = standard / button_count        [choose layout]
show_faces = true / false               [show picture]
action = like / recommend               [option : Like or Recommended button]
colorscheme = light / dark              [color]
height: 60px                            [adjust height]

Share on Google Plus

About Jomar Lipon

Web Developer at your service and frustrated blogger in Cebu. Author of JomarPH.com, SEO Specialist.