Adding Facebook Like Button For Blogger

Facebook has already been a part of our everyday lives and it is also one of the best tools to share your blog posts. Great news that these days, you don't have to go your Facebook page and post the url of your blog post for everyone to see it. Facebook like button are already available and you could include it in your posts for easier sharing.

Facebook already improved their like feature button just like their share button. If before the liking activity would only appear in your recent activities, now it will be posted with the link's summary and picture if it is available in your wall thus giving your friends a glimpse of what you've just liked.

Having this button in your posts is indeed essential and placing it in your posts isn't that difficult> Just follow the simple steps that I listed below. 

Step 1. Add it to your template

• 
  Log in to your blogger account Design>Edit HTML (tick the Expand Widget Box)

Look for the code below: (Code 1)

<div class='post-header-line-1'/>

• Paste the following the code after it: (Code 2)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=false&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:40px;'/>
</b:if>

• In case you were not able to find Code 1, look for this code instead (Code 3)

<data:post.body/>

• Then place Code 2 before it.

The Facebook Like button will now appear in your posts (not in your homepage). The reader still needs to click on the posts title to see the button. If you want to it to appear to your homepage, just remove the code in orange and you're good to go.  

Step 2: Customizing your button

• Note the code in color red (like), you make replace it with the word (recommend) if you want
• If you want to change the font, notice the code in green. You may use lucida+grande, segoe+ui, tahoma, trebuchet+ms, verdana, juts replace it.
• The code in blue is for the color, you have three options for this: light, evil, dark

If you have other suggestions, please feel free to place it in the comment box. I hope I was able to help.

-niceurdaneta-

Read More