I previously wrote an article about how I integrated the Facebook Like button into my knitting pattern site’s design, and promised to do a follow up with the code.

Chiagu.com is built on the Thesis theme, which is a great theme for people who’re knowledgeable enough about coding to “do some real damage” (as my boss likes to say). The site is a heavily customized version of the theme so don’t go be shocked when you check out both those links and they look nothing alike!

Regardless of how you customize your Thesis installation, you can follow these instructions to add the Facebook Like button to your site with very little effort.

First off, if you don’t have the Thesis Open Hook plugin installed, go get it! It makes customizing Thesis significantly easier. These instructions will be using the plugin.

Step 1 – Get the Code

The first thing you need is the Facebook code, which you can get from the FB Like Button page. That page has a great little widget that shows you the different options available for the like button, and then lets you grab the code to put on your site. Go ahead and set all the options you want but put http://google.com in the URL field. Copy the code and go to your blog’s Open Hook page.

Step 2 – Put the Code in the Right Place

Figure out which hook you want to put the like button into, and dump the code you grabbed into that hook’s text box. For Chiagu.com, I’m using the Before Headline hook. (by the way, for a handy visual guide to the hooks in Thesis, check this page out!)

Step 3 – Customize the Code for WordPress

The last step is to customize the code so that the right page/post is being liked. This is the reason why you used “google.com” for the URL instead of your actual site. Go into your code and find the spot where “http://google.com” is linked and replace that with this php function:

<?php echo get_permalink(); ?>

If you grabbed the iframe version of the FB Like code, your code might look something like this:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo get_permalink(); ?>

Silly side note: Do not put code like this into Word, not ever! Word special characters will break your site and drive you crazy. If you want to save your code somewhere, use plain old notepad or the equivalent. Don’t say I didn’t warn you!

That PHP function up there will print out the URL of the page or post that is being displayed by the theme at that particular point. It seems a bit magical that one function can know exactly what post/page you want to link to at all times, but that’s part of the wonder of WordPress!

Step 4 – Save your Changes

This is an obvious step, but you must be sure to check the box for “Execute PHP on this hook” or your like button will not work correctly!

Here’s what this section of my Open Hook screen looks like:

When you go to look at your page, you should see the FB Like button displayed. Wrap the code in a <div> tag so that you can apply some CSS to it and you’re done!

Extra Credit?

If you look carefully at the fraction of my live code above, you’ll see that I have two sets of like button codes and an if statement to serve either one or the other (or none) depending on the page. I’ve done this both because I want to drive Likes of my Facebook fan page for Chiagu.com and because I don’t want to display a like button on the shopping cart page or the search page.

I’ll tell you how to do the same thing in my next post!