A Passing Note About Facebook Like Buttons

In Facebook's documentation of the like button, they mention that the like button tag needs an href attribute that specifies the URL you are liking. A little further down, in the section on Open Graph tags, when discussing the og:url Open Graph tag, it says:

og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.

Now, the problem here is that the iframe version of the like button does not, in fact, post a link to the og:url—it still requires the href attribute¹. If you have the href attribute set correctly, after someone likes the page, Facebook will crawl it and properly import your Open Graph tags; however, the href attribute on the iframe's URL must be correct for this to work.

I spent a while banging my head against the wall wondering why the like button wasn't working before I figured this one out. The symptoms the like button shows are flashing briefly to a `1 person' like message and then immediately reverting to the 0 people `Like' button. Also note that the way to debug this is to pull up Firebug or the WebKit Inspector and watch the AJAX that goes back in forth. Look for the response to the facebook AJAX call and check out the body to see what error message you received.

¹ – I'm not sure whether or not the XFBML version of the button correctly uses the og:url tag or not, as I didn't try using it.