Facebook’s New Open Graph API

Last week at its f8 developers’ conference, Facebook announced some significant updates to its API. You may already have heard about this, but basically it boils down to this: every page on the Internet is now a Facebook fan page. Okay, maybe I’m being a little dramatic, but the core of it is true; any page can now have a “Like” button, which will cause it to behave like a Facebook fan page. When a visitor clicks that button, your page will show up in the activity stream on Facebook without any further action on their part. How is this witchcraft accomplished?

Your page will have a few meta tags in its head, which describe it using Facebook’s new Open Graph protocol. The required bits of metadata are title, type, url, site_name, and image, with a few additional optional ones. Thanks to these, the Like button figures out how to display your site in the user’s Facebook news feed, categorize it, and link back to it. The Open Graph protocol is nicely and clearly detailed on Facebook’s Documentation site.

As with a regular Facebook fan page, if you link that Like button to your Facebook account, you then gain the ability to message all the people who’ve liked your page.

This new functionality comes with a new Graph API for developers to read and write Facebook data, and a few new “social plugins” for your site to interact with Facebook.

These changes make it extremely easy for developers make their pages more shareable without having to devote resources to creating a separate Facebook fan page that then needs to be updated. This is even more significant when it comes to sites that contain hundreds or thousands of pages they’d like Facebook users to be able to share. The example given on the Facebook development blog is imdb.com, which has a Like button for each movie and actor page.

On the flip side, some might see these developments as Facebook wanting its users to consider the entire Internet as part of Facebook. As a web designer or developer, how do you see this change? Will you rush to enable all your site’s pages with Facebook’s Open Graph? Or is this just another play by Facebook to control even more of users’ internet lives?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • ChrisCD

    I began looking at implementing it until I pressed the like button on another page and my picture showed up. That was a little creepy to me. I think there are some privacy concerns and at this point did not complete the addition to our site.

    cd :O)

    • JuanRa

      Hi ChrisCD,
      interesting point but…
      when you say:
      “I pressed the like button on and my picture showed up”
      what is?? “another page ”
      and where did your “picture showed up”??

      i mean, could you please give a more detailed explanation of what you did and what did happend??

      thx

  • Dee Dee

    I have a carpet cleaning supply website with 100′s of pages. How do I put this “like” button on each page? I already have a “like” or “become a fan” button on my home page, [url=http://www.magicwandco.com/]carpet cleaning supplies[/url], but what do I need to do to get it on all my pages?
    I also have a Facebook page, http://www.facebook.com/pages/Magic-Wand/271702120404?ref=ts
    Please advise me on how I can make all my pages using this Open Graph.
    Thanks!

  • http://fcOnTheWeb.com ferrari_chris

    I’m just waiting for the Facebook browser to be released.

    Or maybe you only ever go to Facebook.com, and then there’s an iFrame there were you can access the rest of the Internet, while still having all that Facebook goodness (I actually mean Facebook crap) around the outside.

  • http://01-global.net 01globalnet

    I like it! But I do not like the implementation. To use advanced options they propose to change html xmlns to their dtd… guess what.. pages do not validate hahah!! Bye bye standards…

    The plugin (iframe) is simple, cool.

    • Anonymous

      I’m not up on the whole dtd/validation thing, but isn’t this a case of something new that will validate once it’s standardized? It looks like the dtd is being opened up to any use, just like my understanding of the microformats. And is this really anything more than a new microformat?

    • http://www.business-spreadsheets.com Excel_templates

      The facebook open graph meta tags can be added as valid XHTML by using the combined XHTML 1.0 Strict and RFFa DTD as the doc type declaration and declaring the “og” and “fb” namespaces in the opening html tag. RDF accepts the “property’ attribute of the “meta” node.
      Of course, this means that the rest of the HTML must comply to XHTML strict.
      Interestly, the IMDb source shows them using the “name” attribute.

  • http://www.appropriatesolutions.co.uk AppSol

    OK, you may see that as creepy, but the privacy issues are covered. You saw your avatar as you were looking at the page. Only you or your Facebook friends will see your picture, not random strangers.
    From an e-commerce point of view this is a massive change. Imagine a shop where you can ‘like’ a product. Then 3 months later a new version of the product comes out (or a new add-on / alternative product / etc), the site owner can now contact all the ‘likees’ and tell them about it.
    This is reviews on steroids. Anyone who’s read ‘What makes them click’ will know the impact of a positive review by someone you know and trust!
    “Count me in Sarge”

    • Doubter

      That very nice for product owners, because they can adapt the product according to the biggest nominator, which generally means that products get worse, not better, since the bulk of the human race are, let’s put it mildly, nos so intelligent?

  • tomm

    @ferrari_Chris – this is a lot like Google’s Sidewiki, except more invasive

  • San

    I’m interested to see if this will have any effects on search engine marketing and the SERPs.

  • http://twitter.com/ianlyons Ian

    Has anyone managed to group all these web fan pages together into categories? Let’s say there are 1,000 fan pages in 4 categories. I’d like to programatically trigger updates per category – and avoid spamming people who might have liked 2 pages from the same category.