I want to offer a quick look inside the technology behind Facebook’s Open Graph initiative to show how easy it is to mark up your website and let Facebook users interact with it.
This is only a part of the broad Open Graph strategy the company announced at its 2010 F8 developer conference. (Read our full coverage of the keynote).
Basically, Facebook is offering up a set of widgets — it calls them Social Plug-ins — that you can drop into any web page to make that page more “Facebooky.” There’s a Like button, a Recommendations widget that shows what other pages people’s friends are reading, an Activity Stream widget that shows a simplified version of the visitor’s personal Facebook news feed, and a Facebook Bar, a toolbar site owners can float at the bottom of the screen that serves all of these things at once.
Using the Open Graph widgets, you can incorporate some of Facebook’s key social interaction features into any page on the web.
The most important Social Plug-in, and the one we’ll no doubt see the most use of, is the Like button. Put it on your page, and if a Facebook user visits your site and clicks on it, a link to your page gets added to their activity stream. Suddenly, all of their friends can see that link, click on it and be led directly to your page. When that second person arrives, the Like button is personalized for them — it shows which of their friends have already clicked it, and when they click on it, a link to your page gets added to their stream.
There are actually two versions of the Like button, one that uses an i-frame and one that uses JavaScript.
The i-frame version
For the simple i-frame version, it’s one line of code:
<iframe src="Some Facebook URL" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px">
You can generate your own bit of i-frame code for any URL of your choosing (and tweak the parameters) using the tool at the bottom of this page on Facebook’s developer site
The content inside the i-frame is hosted by Facebook, and Facebook can detect whether the user is logged in or not using a cookie. If the person is logged in to Facebook, the stuff in the i-frame is personalized for them. It shows a list of their friends who have also liked the page. If they’re not logged in, they’ll be prompted to log in or to join.
The JavaScript version
The slightly more complicated JavaScript version of the button utilizes two other bits of Facebook technology: the XFBML fb:like tag and Facebook’s JavaScript SDK.
<fb:like href="Your URL" layout="standard" show-faces="true" width="450" action="like" colorscheme="light" />
You get all the same personalization features as the i-frame version, so each logged in Facebook user who visits your site sees which of their friends have clicked the “Like” button, and a link to your site gets shared across their social graph. Also like the i-frame version, you can tweak the parameters however you want.
But the JavaScript version offers some extras. In the code above, you can also see there’s a show-faces flag that will show the profile pictures of your friends who have clicked on the Like button.
The JavaScript version also gives your visitors the chance to add a comment to the link when they click on the Like button.
If a user is not logged in to Facebook when they visit your site, you can authenticate them automatically using OAuth 2.0, which Facebook now supports. Full details are here.
Tag up your page
When a user Likes your page, it does more than just pass the link around. If you’re a band, or you run a site for a movie, you can add some semantic markup to your page that tells Facebook the type of thing your page represents. That way, if I go to your movie page and “Like” your movie, Facebook can easily add a link to your movie’s website in my profile. If I keep a list of my favorite movies in my Facebook profile, a link to your public website will be added there, where it belongs.
This part is optional, but it’s recommended. Just add some Open Graph meta tags to your page so Facebook knows what you are. There are four that are required, the rest are gravy. You can claim your entity’s identity by picking the most relevant content type. The list is long — musician, sports team, blog, drink, hotel, movie, book, city, cause — so whatever your page represents, Facebook can understand it and deal with the link properly when somebody clicks your Like button.
Get used to it
Like buttons are a step up from the other sharing buttons that have been on the web for years. Unlike those for Digg and Twitter, which just display a blind count of aggregate clicks from everyone on the social network, the Facebook Like button shows you how your friends are interacting with the page you’re on.
We can certainly expect other social networks to pick up on this model and start serving up lists of your friends, and maybe even their faces, along side their own social widgets.
As if the number of icons and little doo-dads at the bottom of blog posts wasn’t distracting enough…
See Also:
