How to Add the Facebook Like Button to Your Blog

You might have noticed that Facebook has gone a bit “like” crazy this week. One major change affected fan pages: instead of becoming a fan of a page like Coca-Cola, you now “like” the brand. Facebook also introduced a “Like” button that could be added to any page on the internet. This little like button is the easiest way to share content yet. With just one click, a user can share your content with all of his or her Facebook friends.

On Facebook, you can tell your friends if you’re interested in their status updates, posts, photos, or videos by clicking “like.” At the F8 conference this week, Facebook revealed a new social plugin that allows any webpage to add a “like” button and reap the benefits of this viral functionality. Although this new feature is integrated onto Typepad, there isn’t yet a customizable plugin for WordPress. Here’s how to easily add the Facebook like button to any website, including a WordPress blog:

1. Get the Like button code

This is the only code you’ll need to install the Facebook Like button on your WordPress blog. It will automatically detect your post title.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo
urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;
show_faces=true&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>

Please note that if you are adding this code to a website OTHER THAN a WordPress blog, use this code instead and customize the “URL.com” for your own domain name:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://URL.com
&amp;layout=standard&amp;show_faces=true&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>

2. Choose the button type

If you’d like to use the standard Like button, keep the code above the same (layout=standard).

If you’d like to use the button count version of the Like button, change “layout=standard” to “layout=button_count”.

3. Customize your Like button

There are various customizations you can make to your Like button, all of which you can see on the official like button social plugins page on Facebook’s developer site.

• Show faces or not: Show faces of your friends with “show_faces=true” or not with “show_faces=false”
• Like vs. recommend: Have a like button with “action=like” or a recommend button with “action=recommend”
  
• Color scheme options: If you have a light color scheme on your webpage, choose the correct contrast with “colorscheme=light”; if you have a dark color scheme, use “colorscheme=dark”
• Border: Add a border by changing “border:none;” to “border:1px;”

4. Adding the code to WordPress

Adding the Like button to each post

Open your single.php file and look for the_content(). Each theme will be coded differently, but this php call should always appear. I’ve added my code above the the_content() code so the like button appears at the top of my posts. You can choose to add the button below your posts by inserting the code below the_content().

Adding the Like button on your homepage

If you also want the like button to appear above each post on your homepage, like I do here at U Stand Out, open your index.php file and look for the_content(). Just as you did for single.php, add the code above the php code for the_content(). You can also simply add the code to a sidebar widget to give your readers the option to “like” your blog’s homepage.

Let me know if you have any questions in the comments below!

Related Posts:

How to Add Official Twitter Button to Your Site or Blog
How to Get More Facebook Page Likes Using Exclusive Content
How to Add Author Box to your WordPress Post Footers
How to Add Google Buzz To Your WordPress Blog