Hacking the Open Graph Protocol into Drupal 6

**********
Update 05/01/2011: There's now a module on Drupal that will handle this for you and let you set your different properties on a post by post basis. It only generates the code however, when you enter into a node (e.g. not on the home page). Because of the nature of my site (one full post per page), it's highly likely that anybody reading this isn't going to be in the node (unless they're following a link), so I've kept my original meta tags and just placed them above where the Open Graph module would generate them. This way, if they're generated, they overwrite the defaults - as currently there's no way of providing defaults with the module. So the spirit of the hack continues! \o/
**********

All the cool kids are on Facebook nowadays, and if you're anything like me, you want your page showing up in the social graph – then all your friends can listen to your inane ramblings!

Drupal 7 seems to have a module in the works to make all this relatively painless, but seeing as I'm not dangerous enough to try an unstable build, not to mention that I just rehauled this blog so my motivation for installing another Drupal version is about as powerful as Rooney's attacking prowess in South Africa (yeah, I went there...), I'm going to show you how to hack it into your Drupal 6 site.

This isn't a perfect solution, but it's enough to get you up and running, and it has a pretty good chance of being the only one on Google.

Note: I'm using a Zen sub-theme. All of the variables used should be available, but I haven't checked.

What you need to implement

The Facebook documentation says there's 5 required properties, while the Open Graph docs say 4, so for the sake of argument, I'm going to implement all 5.

First up, you'll need to add the schema to your page. Find your html tag and add this to it:

xmlns:og="http://opengraphprotocol.org/schema/"

og:title

Inside your head tag, add the line:

<meta property="og:title" content="<?php print $head_title; ?>" />

If $head_title isn't there, find where you print out your title and set it as a php variable before printing it, so you can use it here. i.e.

<title><?php $siteTitle = "My Page Title"; print $siteTitle; ?></title>

og:type

The type describes what type of content this object is. You can get the list of types from the Open Graph Documentation. This one is a bit hacky, as we can't really change it depending on what page we're on (well you could add some properties to the node object and use them). For simplicity's sake we'll blanket set the type.

<meta property="og:type" content="article" />

Other types which pretty much cover what'll be on your site are "website" or "blog".

og:site_name

The site name tag is the human readable name of your site. Stands to reason with a name like that really. As this pretty much never changes, we can just put it in like this:

<meta property="og:site_name" content="Damian Connolly | divillysausages.com"/>

og:image

This is the image that represents your object in the social graph. Ideally this should be different for each page, but this is a bit hard to keep dynamic. It needs to be at least 50 x 50 and have a max aspect ratio of 3:1. I've just stuck it as a logo image for my site. At the very least all your links will have a consistent look, so make it beautiful.

<meta property="og:image" content="https://divillysausages.com/sites/default/themes/dsThree/logo.png" />

og:url

The URL is meant to be a permanent link to your content in the social graph. It should link directly to your node page rather than your homepage. Luckily this is pretty easy to check for. If you're in a particular page, the $node object will be set, if not, then we'll just link to the homepage.

<meta property="og:url" content="<?php print ( $node ) ? 'https://divillysausages.com/' . $node->path : 'https://divillysausages.com'; ?>" />

$node-path links to the page, minus your site base path. $base_path seems to just return "/" for me so that's why I've hardcoded the address. Also, it's good publicity.

The Facebook specific stuff

Facebook also require an additional Facebook-only tag. Either the fb:admins or fb:app_id tag, which is a comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page. If it's a personal site, just link it to your profile like this:

<meta property="fb:admins" content="517736987" />

Etcetera

There are other meta tags such as og:description, or the positioning tags. The ones I've shown are the only ones that are required. If you want to add more semantics to your pages, knock yourself out.

Testing it all

How do you know that I'm not just writing vexacious content on the net for my own amusement? Facebook happily provide a tool for checking that what you've put in actually makes sense to it's mind. Go to the URL Linter and hit up your webpage to see if everything you've added is actually in there. Just like this.

Also, this will only work for you if you hit the Like button under this.