Bri Manning

The Simple Developer’s Guide to Facebook’s Open Graph

May 22, 2012

In working with Facebook’s Open Graph at VEVO, I’ve found that sometimes the docs and tools are not always simple. Because of that, I decided to create my own how-to/explanation of sorts to make it easier for people trying to work with Facebook’s Open Graph implementation. This will be primarily focused on some of the things I’ve done at VEVO as a guide, though there are many more things you can also do beyond what I’ll cover here.

The first thing to realize is that Facebook’s OG is built around a Facebook user doing an action to an object. When you really look at it, someone liking a wepage using Facebook’s Like Button, this is just a pre-built way of doing this.

Many of VEVO’s actions revolved around a user watching a music video. Similarly, they could create a playlist. The first step in all of this is adding the required Open Graph metadata. You’ll want to add this to any and all pages (which will then be considered Open Graph objects) to have the most accurate and compelling OG metadata as possible.

<meta property="og:title" content="[A very short description
  of the page that appears as the title on Facebook and can be
  the same as the <title> tag]" />
<meta property="og:type" content="[What the object is that the
  page represents (movie, article, person, product)]" />
<meta property="og:url" content="[The url of the page, note
  that this should match the canonical url on the page as
  well]" />
<meta property="og:image" content="[The url of the thumbnail
  you want people to see on Facebook, can be more than
  one]" />
<meta property="og:description" content="[Something to tell
  you about the page, shows in the preview text on
  Facebook]" />

As a rule, the required properties that the Facebook linter throws an error for are:

Though, in reality, to have a high click-through rate (you can see your application’s at https://developers.facebook.com/apps/[YourFacebookApplicationId]/insights), you’ll likely want to have all of these filled out with accurate and compelling information about the page.

Now that we’ve gone over creating a basic OG object, you can add additional properties to objects as well. You can create and add any properties you want to this OG object – this comes into play later with actions and relating objects to one another. When you’re editing your object in Facebook’s admin (https://developers.facebook.com/apps/[YourFacebookApplicationId]/opengraph), you can add a custom property. Then you’ll add them in addition to the metadata above like so:

<meta
  property="[YourApplicationsNamespace]:[YourCustomProperty]"
  content="[Whatever content that might be appropriate
  here]" />
<meta
  property="[YourApplicationsNamespace]:[YourCustomProperty2]"
  content="[More content appropriate to this
  property]" />

The next issue we want to deal with are actions. In this case, you’ll want to call to Facebook using FB.api (we’ll be using the Facebook JavaScript SDK directly, though you can also make the calls directly. If we wanted to record a video watch, we would call:

FB.api('/me/video.watch', 'post',
  { video: '[UrlOfVideoOGObject]' });

This will record an action on a user’s timeline. You can also create your own custom actions and once you’ve done that in the Facebook Developers app admin area, you’d call the JavaScript API using your custom action combined with the action’s name. It would look something like this:

FB.api('/me/[YourApplicationsNamespace]:[YourCustomAction]',
  'post', { [YourObject]: '[UrlOfYourOGObject]' });

Note that these custom actions must also be listed in that object’s page’s metadata as a custom property above for Facebook to respect the action call.

Finally, in your application you can have that content attribute point to another object (ie page on your site) to relate them. So, if you have an application with namespace AwesomeApps where Developers can create a variety of Applications, where both a Developer and an Application are objects and an Application has the ability to be created, you’d have OG metadata like so:

Developer:

<meta property="og:title" content="Brian Manning" />
<meta property="og:type" content="profile" />
<meta property="og:url" content="http://brimanning.com" />
<meta property="og:image"
  content="http://brimanning.com/img/bm.jpg" />
<meta property="og:description" content="Feel free to find
  out more about me, Brian 'Bri' Manning. I'm a web
  developer." />
<meta property="AwesomeApps:created"
  content="http://www.vevo.com" />
<meta property="AwesomeApps:primary_focus"
  content="Web Development" />

Application:

<meta property="og:title" content="VEVO" />
<meta property="og:type" content="application" />
<meta property="og:url" content="http://vevo.com" />
<meta property="og:image"
  content="http://www.vevo.com/a/img/logo-vevo.png" />
<meta property="og:description" content="See. Music. Play." />

JavaScript API Code:

FB.api('/me/AwesomeApps:created',
  'post', { application: 'http://www.vevo.com' });

Next Post:
Previous Post: