A Look at Facebook's Open Graph

Tony Siciliani

May. 23, 12 · Interview

Like (0)

Save

5.55K Views

a bit of history

back in 2007, facebook (fb) created beacon to make it easier for users to automatically share what they were up to on sites outside of facebook. beacon didn't work too well mainly because of privacy considerations and poor communication from fb. beacon was finally shut down in 2009, and the next year fb launched it's open graph api , with a set of plug-ins ('like' button, activity feed, comments, etc..) that could be simply dropped onto web sites, making them "social objects", i.e. extensions of the fb ecosystem.

the rise of social objects

what is a "social object"? social sites are not limited to friends, they are also built around shared interests that connect people together, like the iphone or macintosh, hicking, cooking, java development, etc... these can be considered 'social' objects as they help build social connections. social objects have of course to be talk-worthy enough to bring individuals together.

fb has expanded the social graph concept to include more than just relationships between individuals : the web of connections is not only between people, but between things people have interest in and like to share , like a song , a game, a news article, a movie, a picture, a favorite restaurant or a cooking recipe.

technically, social objects become nodes on a social graph , the online equivalent of a social network in the real world. these objects can eventually spread through fb's social channels (timeline, news feed, ticker..).

the open graph protocol and the graph api

the open graph protocol (ogp) enables any web page to become equivalent to a fb page, by turning to an object in fb's social graph. it is done quite simply, by placing rdfa -formatted html meta tags. an og tag has the folowing format:

<meta property="og:tag_name" content="tag_value"/>

here's for example how to mark up the movie "the matrix" on imdb.com , as a social object:

<html prefix="og: http://ogp.me/ns#">
<head>
<title>the matrix(1999)</title>
<meta property="og:title" content="the matrix" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0133093/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/m/.../m.jpg" />
...
</head>
...
</html>

once the object is created with ogp meta tags, action on that object needs to be published via the graph api.
the graph api allows read-write access to the social graph, pending user permission for anything other than searching & reading public data. for write operations, the user gives an application an access token , and the application can publish (http post) or delete data on that user's social graph. for read operations, an application can fetch a social object in fb's social graph by making a secure request to graph.facebook.com with the object's id in the graph, to retrieve its properties in the json format.
there are a few open source facebook graph api written in java, like restfb or the lower-level batchfb .
here's for example, how to get the number of the coca-cola page fans on fb, using restfb:

try{
  // after getting access_token from fb, 
  facebookclient facebookclient = new defaultfacebookclient(access_token);
  // page graph api type with id = "cocacola"
  page page = facebookclient.fetchobject("cocacola", page.class);
  // get the number of likes the page has:
  long coca_likes = page.getlikes();
  //...
}
catch(facebookexception fex){
  // handle failure ...
}

again, keep in mind that, for anything other than public data, even a simple fetch requires authorization by the user who needs to grant an access token to the application.

social object design

we, as third parties can design open graph applications to do the following:

define social object (s). for instance, youtube has videos, flickr has pictures. what is our product?
define the user actions associated with those objects by including the corresponding plugin, for example a "like" button if we want users to rate our objects, a comment box if we want them to comment, and so on.
connect the object created to the users using ogp and social plugins .

as much of everything becomes "social", product design does not escape that rule. conceptually , the difficulty resides in designing objects that bring people together by sparking interest and discussions, and hence grow in the community by what would be the online equivalent of "word of mouth". technically , all that is needed for fb integration is using plugins, ogp and the graph api.

conclusion

open graph is a simple yet powerful technique. the fb graph is continuously fed by the use of plugins outside of fb: "like" button, recommendation, activity feed, etc... wherever you navigate on the web, you bring your social luggage (friends and interests) with you.

of course, all roads lead to rome . what fb is also doing, is recording your activity away from its site, via third parties (even when you're logged out). so, while on the plus side it brings a lot to the semantic web , on the minus side, it can be seen as a service lock-in . it can be argued that open graph is an important step away from actual lock-in , in the sense that third parties don't need a brand page on fb anymore to have their fb fans. however, any "liking" requires a fb account, and all the information flows back to fb. this near-monopoly in centralizing social data had led some to look for alternatives, like openlike and diaspora . but whether those alternatives will gain wide acceptance remains to be seen, as the biggest potential rival, google+ is still playing catch up. some real competition in this area would be a good thing, by steering innovation. let the battle for the social minds rage on.

references: open graph (facebook developers site)

from tony's blog .

Graph (Unix) Object (computer science) facebook

Opinions expressed by DZone contributors are their own.

Comments