How to Place a Facebook Like Button on Your WordPress Blog

facebook like buttonI’ve been trying to come up with a smart introduction to this post for a while now. But in the end I think I’ll just save you the unnecessary and extremely boring info about what Facebook is and how it has grown over the years. You already know that. So this time it’s a straight-down-to-business post.

Why do you need a Facebook Like button

The purpose of every social media button (no matter if it’s Twitter, Facebook, Delicious, or something else) is to give your readers an easy way of sharing your content with their friends and followers.

And Facebook is the biggest and baddest player in the game. This means that whenever someone visits your blog there’s a much bigger possibility of him having a profile on Facebook than elsewhere.

(That being said, there are also other places it’s worth to be available at. Twitter and YouTube for example. For that you need a twitter avatar and a YouTube background.)

What’s more, Facebook users are extremely accustomed to using Like buttons all the time while browsing photos of their friends and other Facebook pages. That’s why a Like button is the first social media button you need to provide on your blog. (Check out what Pat has to say in his Blogger’s Guide to Facebook.)

Facebook Like buttons also have some additional advantages simply because of the way they’re built.

Not everyone is aware of the fact that once they click a Like button while visiting some website what they’re actually doing is sharing this fact on their Wall. You see, the word “like” sounds much safer and less obliging than “share” in terms of taking action. Admitting that you like something is easier than committing yourself out-loud to sharing it with other people. The latter implicates an action to be taken while the former doesn’t. It’s just easier to click “like” in comparison to “share.”

What does a Facebook Like button look like

Not all Like buttons look the same. Here are some examples.

Standard:

facebook like button 1

Mini:

facebook like button 2

Box:

facebook like button 3

You can also choose whether or not you want to show faces of people who have already liked the content.

As you can see there is some choice but not a particularly big variety here. Because of this you can’t really customize the looks of the button to fit your blog’s design. And that’s a good thing. You don’t want the button to blend in. It has to stand out (that’s one thing), and look as familiar to the visitor as possible (that’s the other) if you want it to be effective.

There’re basically three main ways of creating a Like button and placing it on your WordPress blog.

1. How to create a Like button via Facebook

Facebook provides its own mechanism of creating a Like button. It has one big advantage. If you’re using it you can be sure that the button you generate is always 100% correct and working. The downside is that you need to create a separate button for every new post or page. This is not the most hassle-free approach.

Anyways, go to this page: http://developers.facebook.com/docs/reference/plugins/like/ (great document by the way, lots of interesting things there regarding the Like button, worth a read) fill out the form and get the code (image below).

facebook like button form

Next step is to put the code on your blog. The best way of doing it would be either to include it as a part of your post/page (in the WordPress’ HTML editor) or as a custom field that’s handled by your theme. A lot of work in my opinion, but it’s your call.

2. How to create a Like button by hand

Sounds like a lot of work but it isn’t. (It involves some PHP code editing though.)

Step #1. Log in to the admin panel of your WordPress blog. Go to Appearance > Editor and choose the PHP files you want to add Like buttons to (usually page.php and single.php).

Step #2. Edit the files. Find the best place for a Like button and add these lines of code:

<?php
$fblike_url = str_replace('/', '%2F', str_replace(':', '%3A',
get_permalink()));
$fblike_layout = 'standard'; /*instead of standard you can
also use: button_count, box_count*/
$fblike_show_faces = 'false'; /*instead of false you can
also use true*/
?>
<iframe src="http://www.facebook.com/plugins/like.php?href=
<?=$fblike_url?>&amp;layout=<?=$fblike_layout?>&amp;show_faces=
<?=$fblike_show_faces?>&amp;width=450&amp;action=like
&amp;colorscheme=light&amp;height=35" scrolling="no"
frameborder="0" style="border:none; overflow:hidden;
width:450px; height:35px;"></iframe>

Step #3. Save your changes by hitting the “Update File” button.

Now everything happens automatically. Every time you create a new post/page the Like button appears without any additional work on your part.

The only problem with this approach is that if Facebook introduces some major changes to the Like buttons’ implementation, they are likely to stop working on your blog. This will force you to do some adjustments to the code above to make them functional again.

3. How to create a Like button via a WordPress plugin

Last but not least. Not surprisingly, there are some WordPress plugins for handling this task.

These advantages seem like using a plugin is the best solution for getting a Like button on a WordPress blog, and maybe it is, but there are some flaws. Two of them.

(1) You don’t have complete control over where the button appears, like you do with a manual insertion. (2) It’s yet another plugin for your web server to handle. Nevertheless, if you’re concerned with none of this stuff just go with a plugin.

Your turn

Choose the method you want and create some nice Like buttons for your blog. It shouldn’t take you more than 15 minutes, and I’m sure you won’t regret spending this time doing it.

P.S. One more thing worth checking out is a post by Christine on how to connect Twitter to Facebook.