This is a big nerd post, so if you don’t build websites you’ll probably want to pass.
Thought I’d throw together a quick post about how I got Facebook’s new “like” button (plugin?) to function correctly at work. I haven’t implemented it on this site yet, because conceptually, it’s more suited to relating a person’s interests to places or objects – like a favorite vacation spot or a good book.
Let me back up a sec. A few days ago Facebook unveiled their strategy for socializing the web. From what I can gather, everything keys off of a new ‘open standard’ called The Open Graph Protocol. The official definition: “The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.”
To facilitate this movement, Facebook has released a bunch of Social Plugins allowing web developers to drop in a few lines of code and easily get some basic social networking functionality quickly. I haven’t tried them all, so I’m just going to focus on the one I spent the better part of two days working with, the Like Button.
"Like Button" on an external site when you're logged into Facebook
You’re given two options for implementation: a basic button via an iframe or a more robust version using Facebook’s XFBML tag (which requires using Facebook’s Javascript SDK). I played around with the iframe method first, but had trouble getting it to work with urls containing multiple query variables (ie. http://www.mysite.com/?var1=X&var2=Y, etc.). The iframe calls a php script from Facebook, passing the current url (the page being ‘liked’) as a GET parameter already. So no matter how I tried to encode the url, the page being ‘liked’ always got chopped off after the first variable (meaning http://www.mysite.com/?var1=X&var2=Y and http://www.mysite.com/?var1=X&var2=Z both ended up being http://www.mysite.com/?var1=X).
After I've clicked "Like", the button looks like this.
After banging my head on that for a few hours, I tried the XFBML method. This method passes the url as a string, so it worked as-is with no encoding. I was also able to get the dynamic meta tags working so when you “like” something on our site, you get the product’s name, short description, a photo and so on. My advice is definitely to go the XFBML route if you’re able. But if you’re looking for a quick way to get up and running (and you don’t have urls with query strings), you can easily get ready-made code with Facebook’s Like Button wizard.
This is what shows up on my Facebook profile after I clicked the "Like" button.
You can see other sites starting to implement these buttons in various ways, such as IMDB, CNN and others. Say what you will about Facebook taking over the internet with these new strategic maneuver, but it’s pretty slick when you get it all working.
UPDATE: While this worked great, it only works in Safari (and maybe Chrome). All versions of IE and Firefox I could find simply don’t show anything at all. No errors, but no “Like” button either. Back to the drawing board…
UPDATE 2: Ok, got this working in all browsers now for the most part. The trick lies in the initial html tag. You need to make sure to add two namespace attributes: xmlns:fb=”http://www.facebook.com/2008/fbml” xmlns:og=”http://opengraph.org/schema/” Once I added those in, everything worked in IE, Firefox, etc. Only problem I’m still working on is that some urls are still getting truncated at the first “&=”. Can’t determine a pattern yet…
Nicely done. I figured this out on my own, but it could be beneficial to describe in a little more detail putting in more about how to do the JavaScript SDK insert into your page. No other sites really clarify this.