Now that the initial rush revolving around adding “Like” buttons to a site has died down a bit I’ve decided to revisit it a bit. Of course having spent a little more time researching and reading the docs it seems my initial implementation was a little off, well not for adding the like button but in terms of the wider Open Graph protocol. If you want to share in the Open Graph goodness there’s a bit more that you need to do to your site, I for one believe these extra steps are worth doing, especially if you look at it taking into account the direction Facebook seems to be taking, more on that later.

First whats wrong with my original implementation? Well in terms of showing the “Like” button there was nothing wrong, but being the curious little bee I am I want looking to see if I could find information on who had “Liked” my page. My understanding was that if you know the ID of the object which is being “liked” then you can find out more about it using the Facebook Open Graph API but how do you find out the ID of your site that has the “Like” button on it?

My first attempt was to fire up Firebug and inspect the “Like” button code to see if the ID was contained within. Not much luck there I’m afraid. I then had a thought why not use the Open Graph itself to find out the ID, I “Liked” the page so surely I could use myself as the starting point and see what I liked to get the the ID of the page. Using the URL: https://graph.facebook.com/me/likes returned me a JSON object like this:

{
   "data": [
      {
         "name": "Billy Joel",
         "category": "Musicians",
         "id": "57084011597"
      },
      {
         "name": "Muse",
         "category": "Musicians",
         "id": "8762738724"
      },
...
   ]
}

Unfortunately my site wasn’t in this list, it wasn’t part of the Open Graph. At this point I obviously suspected something was wrong and did what any good developer should have done from the start and read the documentation. Having the “like” button on the page isn’t enough to satisfy being in the Open Graph you also need to add meta data to the page for it to show up. Fortunately this is pretty easy (as always) in wordpress. Edit the template file header.php and add the following lines:

<?php if ( is_single() ): ?>
  <meta property="og:title" content="<?php wp_title('',true, 'right'); ?>"/>
  <meta property="og:type" content="article"/>
  <meta property="og:url" content="<?php the_permalink();?>"/>
<?php else : ?>
  <meta property="og:title" content="Al Binns' Web Stuff"/>
  <meta property="og:type" content="blog"/>
  <meta property="og:url" content="http://www.albinns.com"/>
  <meta property="og:description"
          content="Welcome to the personal blog of Al Binns. This blog is my 
                   playground on all things web related. The views expressed 
                   here are soley mine and do not represent the views of my 
                   employer."/>
<?php endif; ?>
<meta property="og:image" content="<?php bloginfo('template_directory'); ?>/images/fb-image.png"/>
<meta property="fb:admins" content="685696835"/>
<meta property="og:site_name" content="Al Binns' Web Stuff"/>

Adding this meta data and then clicking the “Like” button adds the following entry to my likes JSON Object, my blog is now in there:

{
   "data": [
...
      {
         "name": "Al Binns' Web Stuff",
         "category": "Personal blog",
         "id": "138016126225295"
      },
...
   ]
}

I now had the information I was looking for and a whole lot more as well. Using the Open Graph in this way also created a page on Facebook for my site with all the bells and whistles that go with it. My site is effectively part of the Facebook eco-system, check out the page here: http://www.facebook.com/pages/Al-Binns-Web-Stuff/138016126225295

This brings me back to the importance Facebook is placing on the Open Graph. Not only are they mapping multitudes of objects and their relationships from the real world they are also changing the way some of their internal functions work to reflect this. I noticed today that if you go into your profile and had previously entered certain profile information – education and work experience for example – the information was no longer valid. They now map things like this based on pages on the site, which in turn are all objects in the Open Graph. To fundamentally change how the profile system works for 400 million people shows how much weight Facebook are throwing behind the Open Graph and I suspect they have only just begun tapping the potential of this.

The good things is that it is based on an open system and is not proprietry, as other systems also embrace this the possibilities are staggering. As for how I’ll be using it we will have to wait and see. Currently my graph is small but you can change this by liking my stuff!