The Facebook implementation of the Open Graph protocol (http://developers.facebook.com/docs/opengraph) allows a site owner to represent his site, business, or product page as if it were a Facebook page, without it actually residing in the social network.
The Facebook Open Graph consists of a few pieces, implemented by a site owner:
The Open Graph protocol
<meta>tags to define the site objectA few Facebook administration tags
The Facebook Like button
It currently only supports web pages that represent real-world things such as sports teams, movies, actors, restaurants, etc.
The Facebook Like button is a simple page implementation that displays a button with the word Like on it. When a user likes a page, his name and profile—as well as those of any of his friends who have liked the same page—is displayed, as shown in Figure 10-2.
Once the user clicks Like, he is connected to the page containing
the Like button, and the like instance is subsequently published on his
profile. The Like button is included on a page via either an iframe or
the Facebook JavaScript API and the <fb:like> XFBML tag.
Under the likes and interests sections of the user’s profile, the new like instance will be displayed, and under his news feed’s recent activity, a like notice will be posted (Figure 10-3).
When a user likes a page, he enables the liked page source to publish updates, much as if it were a real Facebook page.
Now that we understand how the Facebook Open Graph works from start to end, let’s take a look at what the code looks like within a website. We will use the Open Graph protocol website as the source of our markup: http://opengraphprotocol.org/.
The first pieces of markup information that we want to look at
are the <meta> tags that will
add the Like button so we can build an entity profile for the page. If
we view the page source, we are presented with the following Open
Graph tags:
<meta property="og:title" content="Open Graph Protocol" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://opengraphprotocol.org/" />
<meta property="og:image"
content="http://opengraphprotocol.org/open_graph_protocol_logo.png" />
<meta property="og:description" content="The Open Graph protocol enables any
web page to become a rich object in a social graph. " />
<meta property="fb:admins" content="706023" />We’ve already talked about the standard Open Graph tags, but the Facebook Open Graph adds a few administrative tags that we need to go over.
Note
You can create a Facebook application from its setup site at http://developers.facebook.com/setup/. This will allow you to associate a series of Open Graph–defined pages with a single umbrella application.
The fb:admins <meta>
tag enables you to associate a Facebook Like button with an
account or page that you own. This gives you access to Facebook’s
well-associated graph of entity information and allows for trackback
to an internal Facebook page where users can collect more information
about your page.
<meta property="fb:admins" content="USER_ID1, USER_ID2, ..." />
The other administrative tag is the Facebook application ID, which provides a way for you to associate a series of pages with a single application. This allows you to treat all sources as if they were under the application umbrella.
For example, let’s say that you have a news site with thousands
of pages that all have Facebook Like buttons on them. With the
fb:app_id tag, you can associate
all of those pages with a single application ID, allowing you to
programmatically publish updates to individuals who have liked any of
the pages under that application ID umbrella.
<meta property="fb:app_id" content="143306585343"/>
The last piece of markup required can either be the JavaScript
API and the <fb:like>
XFBML tag, or an iframe that loads the actual Like button. This markup
allows you to create a direct link for already signed-in users to like
a page without having to go through their Facebook accounts.
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2F opengraphprotocol.org%2F&layout=standard&show_faces=true& width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:450px; height:80px;"></iframe>
The Facebook Open Graph is definitely the biggest implementation of the Open Graph protocol. As such, it is pushing adoption of the protocol, allowing developers who don’t necessarily care about the Facebook implementation to take advantage of the same metadata tags that those who do use it have implemented on their sites.