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

Image by gahlord via Flickr

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.


  1. Posted May 10, 2010 at 7:35 pm | Permalink

    Here’s the WordPress plugin with full support for Open Graph:
    No coding necessary, you can customize the look and placement of the button in the settings interface.

  2. Posted May 10, 2010 at 9:11 pm | Permalink

    Awesome. Thanks Bottomless! I’ll give it a whirl, hopefully it will make the header-code stuff in this post obsolete. Though with all the changes coming in the Open Graph specification I hope you’re staying on the ball with development.

  3. Posted July 29, 2010 at 12:32 am | Permalink

    One thing I’ve been wondering – if you 301 redirect a page that has the like button on it, do the previous “likes” disappear?

  4. Posted July 30, 2010 at 10:41 am | Permalink


    Not sure about what happens to likes with a 301. My guess would be that the likes would still exist, but that you wouldn’t be able to get new ones. I’ll post the question on the OpenSocial forum and see what I can figure out on that. Good question.

  5. Posted September 29, 2010 at 3:10 am | Permalink

    I’m wondering about this too. I just tried doing a 301 redirect on one of my most popular posts and it looks like I lost all the facebook likes! They appear to have simply been reset to zero. Any ideas on how to get them back?

One Trackback

  • […] on the implications of the Facebook Open Graph. Kicking it all off was an excellent presentation by Gahlord Dewald explaining the implications for semantic search. For those of us that chase SEO trends, this is a […]

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>