Facelection 2010
Yesterday afternoon, while wiling away time liking stuff on Facebook I got to thinking why voting couldn't be as easy as clicking a like button and decided to whip up a little like-your-candidate app in a few minutes using the new Facebook Like button and it became Facelection.
Who do you like in the UK General Election: Gordon Brown, Nick Clegg, or David Cameron? Vote with a click and tell your Facebook friends.
Technical details
As with most things, "a few minutes" when building the site turned into "a few hours" due mainly to annoying issues and a certain lack of polish that the Facebook APIs apparently have. Here are few of the issues I ran into, briefly summarized, in case they help anyone else out.
iFrames = trouble-free
First off, using the iFrame version of the Like and Share buttons worked like a charm and I initially thought I was done within about half-an-hour. I realized, however, that the iFrame version of the Facebook Like button doesn't let you customize the message that is displayed. To do that, as well as to allow the user to leave a comment and share their like on their wall, you have to use the XFBML version of the Like button.
XFBML gotchas
Using XFBML requires adding several namespaces to your (X)HTML file and adding a piece of JavaScript to your page.
What the docs fail to mention is _where_ you should add said JavaScript, which should be right after the opening <body> tag. I had it at the end of the page and that resulted in the Like button not initializing / not rendering.
Here's an example of the XML namespaces added to an HTML5 document:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
xd_receiver.htm wtf?
Also, some of the (outddated?) docs keep mentioning that you should create or download (using the application creation wizard) an xd_receiver.htm file. I found that this was unnecessary with XFBML and lost some time fiddling with it.
Link version of Share button doesn't like fb:like button
The other issue I ran into was that when I started mixing the fb:like button with the link version of the Share button, my Like buttons started not rendering some of the time (usually, they would render on the second load of the page, following a refresh). When I replaced the Share button with the XFBML version (fb:share), this problem also went away and things started working predictably again.
box-type share button with no shares
I also lost a bit of time due to what must be sloppy coding on the part of Facebook: the box-type (stacked) fb:share button does not render / layout correctly when it doesn't have a number of shares to display in its speech bubble. This bug does not appear to be present in the link version of the Share button which works fine.
Another difference is that the link version of the Share button displays the number of shares immediately following the first share whereas the XFBML version only appears to display the number after a few shares have occurred (I read somewhere that the actual number is three; I noticed mine pop up when five people had shared it.)
Hope these brief notes help you if you're currently pulling your hair with these issues.
It would be nice if Facebook devoted a little time to reviewing its developer documentation and removing outdated documents as well as possibly writing a few simple getting started guides to get developers up to speed with their APIs, especially the XFBML stuff.
(In hindsight, I would not use XFBML but rather follow the instructions in Using HTML to Imitate XFBML.)
Enjoy + share the ❤
Hope you enjoy Facelection. If you do, please don't forget to share it with your friends on Facebook! And, if you haven't seen Feathers for Facebook, my iPhone app for pimping your Facebook status messages with 200+ symbols, fancy text styles, and cute emoticons, check out the one-minute screencast here.! :)