David Recordon of Facebook has an interesting post titled Why f8 was good for the open web where he talks about how some of Facebook’s announcements at their recent F8 conference increase the openness of the Web. He calls out the following four items as the key benefits to the web as a whole from the F8 announcements
Of these, the third seems to me to be the most beneficial to the Web as a whole. The first, second and fourth items are really about benefits to Facebook developers. Although I guess you could argue that such a significant service adopting OAuth 2.0 is great for increasing adoption across the Web. However this pales in comparison to the fundamental shifts in thinking introduced by the Open Graph Protocol.
The first question is what problem does the Open Graph Protocol solve for Facebook and why are they releasing it?
Figure 1: The Facebook Social Graph in 2006
The original Facebook social graph had a one type of node and edge. The nodes were users and the edges were friend relationships. The operations you could perform on the nodes are also straightforward. How many friends does Jane have? Is Kim a friend of Mary? And so on. As more features were added to the site, new nodes and edges were added to the social graph
Figure 2: The Facebook Social Graph in 2009
Each of these nodes supports similar operations. By counting the number of incoming connections you can tell how many fan's Justin Bieber has, how many people want to show the world their love for the Ramblin’ Wreck or how many people have added Mary as a friend. However as Facebook tries to model more of our offline world, it is clear that these aren’t the only types of relationships that users can have nor are these nodes the only entities users can have a relationship with. Which brings us to…
Figure 3: The Facebook Social Graph in 2011
The Open Graph Protocol is the first step in allowing Facebook users express relationships with arbitrary social objects. If you aren’t familiar with the concept of social objects, Hugh McLeod wrote a great introductory post on this concept entitled social objects for beginners which is excerpted below
The Social Object, in a nutshell, is the reason two people are talking to each other, as opposed to talking to somebody else. Human beings are social animals. We like to socialize. But if think about it, there needs to be a reason for it to happen in the first place. That reason, that “node” in the social network, is what we call the Social Object. Example A. You and your friend, Joe like to go bowling every Tuesday. The bowling is the Social Object. Example B. You and your friend, Lee are huge Star Wars fans. Even though you never plan to do so, you two tend to geek out about Darth Vader and X-Wing fighters every time you meet. Star Wars is the Social Object. Example C. You’ve popped into your local bar for a drink after work. At the bar there’s some random dude, sending a text on this neat-looking cellphone you’ve never seen before. So you go up to him and ask him about the phone. The random dude just LOVES his new phone, so has no trouble with telling a stranger about his new phone for hours on end. Next thing you know, you two are hitting it off and you offer to buy him a beer. You spend the rest of the next hour geeking out about the new phone, till it’s time for you to leave and go dine with your wife. The cellphone was the social object. Example D. You’re a horny young guy at a party, in search of a mate. You see a hot young woman across the room. You go up and introduce yourself. You do not start the conversation by saying, “Here’s a list of all the girls I’ve gone to bed with, and some recent bank statements showing you how much money I make. Would you like to go to bed with me?” No, something more subtle happens. Basically, like all single men with an agenda, you ramble on like a yutz for ten minutes, making small talk. Until she mentions the name of her favorite author, Saul Bellow. Halleluiah! As it turns out, Saul Bellow happens to be YOUR FAVORITE AUTHOR as well [No, seriously. He really is. You’re not making it up just to look good.]. Next thing you know, you two are totally enveloped in this deep and meaningful conversation about Saul Bellow. “Seize The Day”, “Herzog”, “Him With His Foot In His Mouth” and “Humbolt’s Gift”, eat your heart out. And as you two share a late-night cab back to her place, you’re thinking about how Saul Bellow is the Social Object here.
The Social Object, in a nutshell, is the reason two people are talking to each other, as opposed to talking to somebody else. Human beings are social animals. We like to socialize. But if think about it, there needs to be a reason for it to happen in the first place. That reason, that “node” in the social network, is what we call the Social Object.
Example A. You and your friend, Joe like to go bowling every Tuesday. The bowling is the Social Object.
Example B. You and your friend, Lee are huge Star Wars fans. Even though you never plan to do so, you two tend to geek out about Darth Vader and X-Wing fighters every time you meet. Star Wars is the Social Object.
Example C. You’ve popped into your local bar for a drink after work. At the bar there’s some random dude, sending a text on this neat-looking cellphone you’ve never seen before. So you go up to him and ask him about the phone. The random dude just LOVES his new phone, so has no trouble with telling a stranger about his new phone for hours on end. Next thing you know, you two are hitting it off and you offer to buy him a beer. You spend the rest of the next hour geeking out about the new phone, till it’s time for you to leave and go dine with your wife. The cellphone was the social object.
Example D. You’re a horny young guy at a party, in search of a mate. You see a hot young woman across the room. You go up and introduce yourself. You do not start the conversation by saying, “Here’s a list of all the girls I’ve gone to bed with, and some recent bank statements showing you how much money I make. Would you like to go to bed with me?” No, something more subtle happens. Basically, like all single men with an agenda, you ramble on like a yutz for ten minutes, making small talk. Until she mentions the name of her favorite author, Saul Bellow. Halleluiah! As it turns out, Saul Bellow happens to be YOUR FAVORITE AUTHOR as well [No, seriously. He really is. You’re not making it up just to look good.]. Next thing you know, you two are totally enveloped in this deep and meaningful conversation about Saul Bellow. “Seize The Day”, “Herzog”, “Him With His Foot In His Mouth” and “Humbolt’s Gift”, eat your heart out. And as you two share a late-night cab back to her place, you’re thinking about how Saul Bellow is the Social Object here.
There are more examples in Hugh’s post but you get the idea. Social objects had been represented by “fan pages” in the Facebook world but with the Open Graph Protocol, it is now possible for any random website to become a part of Facebook’s social graph. This is a very powerful and liberating concept both from the perspective of what it enables Facebook’s platform to do but also because it gets rid of some ugly forms of lock-in. For example, Robert Scoble would no longer need to maintain a brand presence on Facebook at http://www.facebook.com/scobleizer that is different from his website at http://www.scobleizer.com to stay connected with fans of his blog who are Facebook users.
The process of turning a web page into a social object that Facebook can add to their social graph is very straightforward. From the Open Graph Protocol documentation we learn
To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are: og:title - The title of your object as it should appear within the graph, e.g., "The Rock". og:type - The type of your object, e.g., "movie". Depending on the type you specify, other properties may also be required. og:image - An image URL which should represent your object within the graph. og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/". As an example, the following is the Open Graph protocol markup for The Rock on IMDB: <html xmlns:og="http://opengraphprotocol.org/schema/"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html> The following properties are optional for any object and are generally recommended: og:description - A one to two sentence description of your object. og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".
To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:
<meta>
<head>
og:title
og:type
og:image
og:url
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html xmlns:og="http://opengraphprotocol.org/schema/"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
The following properties are optional for any object and are generally recommended:
og:description
og:site_name
For now Facebook supports a limited set of object types from the following categories; activities, businesses, groups, organizations, people, places, products & entertainment & websites. Once your page is marked up and categorized, the next step is to provide a way for users to add it to their social graph on Facebook. This is done by using adding the Facebook Like button to the page. From then onward, when a user clicks the Like button they become a fan of that page.
Not only is your page added to their profile but you can also send news feed updates to all the people who have liked your page (just like “Fan Pages” can) if you associate the Like button with your Facebook ID. Doing that provides you with an admin page where you can post news feed entries from.
One of the things I find most exciting about this development is that sites now have significant motivation to be marked up with extremely structured data which can then be consumed by other applications. Having such rich descriptive metadata will be a boon to search engines especially those from startups since some of the big guys consider their ability to extract semantics out of HTML tag soup a competitive advantage and have thus fought the semantic web for years.
In the social media space, a few people have focused on the fact that this data is put in place to enable sites to be added to Facebook’s social graph. However there is little reason why other social networking services couldn’t also read the same markup as a way to add those web sites to their social graph. For example, Yelp is one of the sites that now supports the Open Graph Protocol so when I click like the Pro Sports Club it is added to the list of “pages” I’m a fan of on Facebook. However I could just as easily see that being a [Twitter – Like] button which would add the Twitter account for the gym to my following list along with tweeting to my followers that I liked the gym. It would only take adding a markup element to what Yelp is outputting to indicate the Twitter account of the page being liked. With my Windows Live hat on, I can imagine going to Amazon or IMDB and clicking a [Windows Live – Like] button which would add the movie to my list of favorite things. There are a ton of possibilities this opens up in a totally decentralized way without forcing services or users to be locked into a particular social network.
This has been the dream Tim Berners-Lee has been pushing for years and I’m quite surprised to see Facebook being the service to take RDFa mainstream. One of the things I’m happiest about is that Facebook chose RDFa for their implementation instead of the much hyped yet weaker solution, microformats. As Evan Prodromou wrote a few years ago in his post RDFa vs. Microformats, RDFa encourages interoperable implementations between organizations and avoids naming collisions via namespacing as opposed to the microformats approach which requires a centralized committee process to add/remove elements from data formats. From my example above, adding support for indicating the Twitter account of a page that implemented the Open Graph Protocol would be as simple as adding an element namespaced to some Twitter URI. That is distributed extensibility in action.
This is a very exciting time for the Web. I suspect that this will be another Facebook platform hit that exceeds expectations. The same way no one could have predicted Zynga and Farmville when the Facebook platform first launched is the way I feel we’ll all be surprised at the sorts of things that will be powered by the Open Graph Protocol in the next year or two.
Now Playing: Timbaland - Say Something (featuring Drake)