Gotcha of the Day: Facebook Like Button Not Working

The Facebook Like buttons on one my client's sites had stopped working. The button appeared and all, but always showed 0 likes. You could click the like button and it appeared to register the click. But a refresh showed that it didn't take.

My first attempt to fix this was to look at the Net panel in FireBug. I was able to find the requests made to facebook and they all looked legit.

Moving on, I realized that the Facebook widget is actually generated by a single, easily reproducible request. The following link does all the heavy lifting:

http://www.facebook.com/plugins/like.php?href=XYZ&layout=button_count&show_faces=false&width=100&action=like&font=arial&layout=box_count

(Where XYZ is the URL encoded URL you wish to have liked.)

When I plugged in the page I wanted to like, it gave me the broken behavior. If I plugged in another URL, say http://www.google.com it worked fine.

Simplifying matters even more, I took the above URL and stripped it down even further to just:

http://www.facebook.com/plugins/like.php?href=XYZ

Aha! When I did this I actually got notified of an error when I clicked the like button.

Unfortunately, the message was pretty dang cryptic:

The app ID "ABC" specified within the "fb:app_id" meta tag was invalid.

Huh?

This, however, led me to this handy dandy page: the Facebook Debugger.

Putting the URL in there that I was trying to like popped up a much clearer error message. Apparently one of the meta tags I was using for the OpenGraph spec had an incorrect value. Fixing that, fixed the problem.

The Facebook debugger is actually handy for more than just fixing problems like this. It will give you a preview of what your Like'd posts will look like on Facebook and give you an easy way to experiment with new values.