Adding the Facebook “Like” button to your WordPress site.

There’s a lot of chatter about Facebook’s new “Like” button. There are some important strategic considerations about implementing it and you should really think it over first–I’ll write a post on that later. For now, if you just want to jump headlong into it, here’s how.

There are two parts to the whole “like” button thing. One is adding some data from Facebooks simultaneously released Open Graph format to your header. The other part is getting the button to work. Oh yeah, and a disclaimer here–this is all pretty new and likely beta beta beta. But it’s working on this site anyway.

Implementing Facebook’s Open Graph on your website

You’ll want to put a little data into the head tag of your site. The data you’ll be adding increases the semantic value of your content. Just like RDFa and microformats and other bits of code that tell computers what the content is about, Facebook’s Open Graph protocol is a way of saying what kind of content is on the page.

There are a lot of options here, but these are the ones you need to get going:

<meta property="og:title" content="The title of your social object"/>
<meta property="og:type" content="The kind of content you're adding"/>
<meta property="og:url" content="The permalink of your content"/>
<meta property="og:site_name" content="The name of your site"/>
<meta property="og:description" content="A short description of your content"/>

<meta property="fb:admins" content="Your FB User ID"/>

So you can get that all into your head template. I recommend using WordPress PHP stuff to get the permalink, description, title and so on into this. Let me know if you need help with that.

A resource that you’ll want is the complete list of the different types that Facebook is supporting right now. If you’re not sure, you can skip over that one. But if you do have a supported type, then go ahead and put it in–you’re adding semantic value to your page.

Getting the Facebook “Like” button into your site with the fbLikeButton Plugin

Now that you’ve got the semanticky stuff dealt with, time to get the button in. You could hack it into your template, but there’s a plugin that appears to be working pretty well right now. It’s called fbLikeButton.

Once you install this plugin you’ll have a few options, found in the Settings area of the WordPress admin area.

You’ll have checkboxes to determine placement (above and below content, on pages or not, on the home page or not). You can also configure the sizes, layout and typography. It defaults to 25px high, but if you want the profile pics to display, you’ll need to open it up a little. For reference, as of this writing I have the height of the Facebook Like button set to 80px high.

Lastly, you can give a custom CSS class name to the container for your Facebook Like button. This should help you with positioning and styling.

You’ve got the Facebook “Like” button, now what?

If you have your FB user id or application ID in the headers (as mentioned above) you should be able to track usage just like one of your “normal” Facebook pages. This should give you access to some rich demographic data about the consumers of your web content.

I’m also hopeful that other applications will be built that take advantage of the semantic data that will be added to everyone’s page heads. I think there’s some real hope there. Of course, we’ll have to wait and see how that goes.