An introduction to using Facebook's Open Graph protocol

Roughly a 3 minute read by Admin

Ever shared a site on Facebook and had to click 'no thumbnail' because the choice of images was so poor? Or had to edit the title/description because they pulled through unrelated text?

Well, this quick tutorial will show you how to stop that happening when someone shares your site on Facebook, by using the built-in objects in the Facebook Open Graph.

The Open Graph protocol was originally created by Facebook, and is used to assign properties (title, url, image etc) to your object (the page you're sharing). Sound complicated? It's not!

The markup for the Open Graph protocol is very simple; infact, if you've ever placed a meta tag in the head of your site, you'll be familiar with the syntax already.

The Basics

First, for Facebook to parse the page correctly, we need to add the Open Graph protocol namespaces to our <head> tag: 

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# 
                  website: http://ogp.me/ns/website#">

Depending on which object you'll be using, the namespace will change. We'll explain what objects are further on.

Now, let's specify our title. Place the following code in the <head> of your site: 

<meta property="og:title" content="Your awesome site title">

And that's it! There are a wealth of properties you can add, and you add them all the exact same way: 

<meta property="og:url" content="http://engageinteractive.co.uk">
<meta property="og:image" content="http://engageinteractive.co.uk/logo.png">

If you're using a server side language like PHP, you can print out the content value dynamically: 

<meta property="og:title" content="<?=$page_title?>">

Adding an Admin ID

You can also add either your App ID or your User ID. Adding these will allow you to see the Insights of your domain.

For the purposes of this tutorial, we'll add our User ID (which can be found by viewing the Graph Explorer, and copying the ID value): 

<meta property="fb:admins" content="USER_ID">

Open Graph Objects/Properties

Facebook has a quite a few built in objects, which should cover all the needs of an average site. (Custom objects are available, but are out of the scope for this tutorial.)

Have a look through each object, and choose the best one for your site/section of your site. Here on the Engage site, we use the article object for all our blog posts, and the website object for all other pages.

Each object gives you access to unique properties. The article object lets you set an author, the book object an ISBN, the movie object a writer etc. Take your time when setting up your object and make sure you're getting the most from it.

It's also worth noting that some properties can be set multiple times. The best example of this is the image property: if you were to share one of our about pages, you'd see you have the choice of using the default logo or the person's avatar as a thumbnail.

Testing

To test your page, simply try to share it on Facebook; all of your custom content should show up in the preview.

If something's not working, you can use the Facebook Debugger, which will show you information about the object properties you've used, as well as any errors encountered. You can view the output for our homepage as an example.

Conclusion

And that concludes the tutorial. We've only scratched the surface of what Facebook's implementation of the Open Graph protocol is capable of, but it should be enough to get your site shared exactly how you want it.