TIPS - Cara Meletakkan Like Button kat BLOG atau SITE

Facebook introduced the new Like button which enables your blog visitors to share your blog content on their Facebook profiles with one click. After the launch of this button I have seen many bloggers are adapting it and replacing it with Facebook share button. So why not add it to Blogger.

Update: Now Facebook has updated their Like button and added a new Send button along with it. Visitors who like your post will now also be able to send it to their Facebook friends (individually). Currently, this feature is only available to XFBML version. If you have enabled it for the iframe version, better turn it off, read the customization part.

For an example, click the below button to Like this post:

This is a standard button.

Standard Facebook Like Button for Blogger

Step 1: Go to Layout (Design) > Edit HTML and check “Expand Widget Templates”.

Step 2: Find <data:post.body/> and immediately after/before it (or both) add the following codes.

<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>

Like Button with Box Count for Blogger

Follow the first two steps mentioned above and paste the below script:

<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>

Facebook Like Button with Button Count

Follow the first two steps and paste the below script:

<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>