How to add Facebook Like button in Blogger or Wordpress



Facebook has introduced Like button for websites and blogs. People can Like or Recommend the webpage or website or blog to their friend by clicking this button, thereby increasing the reach of your blog or website.

How to add Facebook Like button below every Blogger post?

1. Log in to Blogger. Go to Layout > Edit HTML option of your blog and tick the checkbox that says "Expand Widget Templates".
2. Look for ‹data:post.body/› and post the following code below it:

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

3. If you want the Like button to appear below all posts even on homepage, use the following code instead:

<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;'/>

4. Save the template.

How to customize the Like button?

1. You can change the button text from "Like" to "Recommend". Look for action=like in the code and replace it with action=recommend.

2. To change the colour scheme of the button, change colorscheme=light to colorscheme=dark or colorscheme=evil.

3. Replace the font=arial parameter with the font of your chhoice:
  • font=arial
  • font=lucida+grande
  • font=segoe+ui
  • font=tahoma
  • font=trebuchet+ms
  • font=verdana

How to add Facebook Like button in Wordpress?

1. Open the Single.php file and look for <?php the_content(); ?>. Paste the following code above or/and below the code, depending on wether you want the Like button to appear above the post or below the post or both.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>

Customize the button as mentioned above.

If you want a Like button for your blog or website, Facebook has created a tool for it. The tool for generating the Like button code can be found at the bottom of the Like plugin page. Just type your website or blog URL or address in the designated box, make your desired changes and generate the code. Copy the code and paste it on your website or in blog sidebar.

Showing images of those who liked the post: If you want to show images of people who have Liked the post, look for show_faces=false in the code and replace it with show_faces=true.

Labels: 

Author: Nyutech

Date: Saturday, April 24, 2010

2 comments | Leave a comment

2 Responses to "How to add Facebook Like button in Blogger or Wordpress"

Scandinavia House  (December 20, 2010 at 1:53 PM)
This comment has been removed by the author.
Moncler Jacka  (March 16, 2013 at 2:08 AM)
So appreciate for teaching me a lot! charmingdate charmingdate

Post a Comment