Adding a Facebook Like button to your blog can be done manually in just a few steps. There are plugins to manage this for you, but I wanted to aggregate all of my likes onto the the main blog URL, rather than splitting them up for individual posts, as is most commonly done in the plug-ins.

Getting the Like Button Code

To put the Like button in my sidebar. I took a screenshot and measured it to find out my theme has a sidebar that’s 250 pixels wide.

First, I visited the Facebook Like Button page to get the code. I put my blog’s main URL in the box, along with a width of 250. You can set a few other options such as whether or not to include pictures and which of the 6 available fonts you’d like to use.

Clicking the “Get Code” button brings up two text boxes with code to insert the Like button on your site.

The first box is an iframe. It’s a little simpler, in that you only need to insert one bit of code instead of two. But it’s worth the extra step to get the XFMBL code in the second box. This will do a better job of scaling the box vertically to match how much content is actually in it. The iframe code can leave a big gaping hole in your sidebar if you don’t have a long list of fans.

Using the Like Box Instead

If your blog already has a Facebook Page, people who “Like” your blog can automatically be added there in the way that used to be called “fans.” So they’ll get updates from your Facebook Page, and your existing fans will show up immediately in the box.

In that case, you want the Like Box. Adding the Like Box is almost exactly like adding the like button, but it has a few more options. Just go to the Like Box page to get the code instead of the Like Button page above. In the end, this is what I decided to do, so that’s what you’ll see in my current sidebar.

Putting It In Place

Next, it’s a trip to the widgets page. This is located within your blog at wp-admin/widgets.php and can be found in the side navigation under “Appearance.” Drag the “Text” widget from the “Available Widgets” over to the spot on the Sidebar where you want it to appear. A box will pop open for the text you want included. Choose a name for the box and paste in the code from Facebook.

And Finally…

Now there’s just one step left. In order for the XFMBL code to work, you need to pull Facebook’s javascript onto your pages. You do this by adding a big chunk of code known as the Facebook JavaScript SDK. (Click that link to get the code).

The javascript command may take some time to load, so I recommend putting it in the footer of your site. That way the rest of your page will load without waiting for the Facebook SDK. To edit your blog’s footer file, go to the Editor under “Appearance.” ( /wp-admin/theme-editor.php ). From there, select the Footer (footer.php) from your theme files.

Now paste the Facebook JavaScript SDK code into your footer just before the tag, so it will be the last thing to load on every page.

Just hit the “Update” button to save the changes to the footer, and you should now see the Like button showing up on your blog’s sidebar!