Blog

How to successfully implement Facebook’s Open Graph to generate insights and start contacting fans

by Christian Bartens on
What is Facebook’s Open Graph

The Open Graph is an open protocol for semantically labelling web content, but more importantly it provides the underlying logic for seamless integration into Facebook’s social graph. Each configured URL becomes an object in the graph with various properties, like a title, author, image, URL, etc. People can be linked to objects through things like the Facebook like buttons (i.e. Johnny likes Datalicious). These relationships are then formatted nicely in Facebook news feeds and profiles to provide a means of virally sharing web site content. They also serve as semantic signatures, which can help search engines deliver more personable results.

Open-graph
Why would you bother implementing the tags?

There are many advantages to adding and configuring these tags properly. The key reasons are as follows:
  • Social relevance and influence is now officially part of Google/Bing search engine algorithms, so if you’re into SEO and you’re not looking at the Open Graph, then you’re destined for rough times ahead. The “like” button is acting as a form of popularity score, much like Google’s innovative PageRank, but each “like” is linked to a persons profile, allowing it to be authenticated and weighted accordingly.
  • Objects in the Open Graph drive traffic as they appear in news feeds and profile streams. For many sites this traffic is now greater than traffic from search engines. Without Open Graph tags and social widgets, you ARE losing potential traffic.
  • Properly formatted objects allow you to determine how the object will look in peoples profiles and searches. You can set the picture, title, description and many other important tags. This allows you to optimise your image.
  • Probably the most underutilised capability is the ability to contact users who have clicked like on your object. Effectively each like is functionally equivalent to subscribing to an email list, except it doesn’t cost to send messages into users news feeds. Every “like” has a $ value, tapping into this new communication tool can be an extremely valuable exercise.
  • Objects in the graph are searchable in many other applications and likely will become a greater part of Facebook’s built in search engine.
How to begin Implementing

There are several key pages on Facebook that explain the installation (see below), but don’t believe everything you read, some of it is wrong (ironically eventually this post itself will likely be wrong). And to make matters more difficult, Open Graph tags do not create an object in the graph immediately (it takes time, sometimes a little, sometimes a lot!). The other thing that seems to influence the creation of the object is whether people have “liked” it, this appears to be important (although how many likes are required is also not clear).

Once you have worked through the creation of the meta tags on the site and they’re testing ok (see the Linter below), you should be on track to start accumulating likes and generating traffic. To make use of the traffic you need to associate yourself as an administrator of the objects, to do this skip to the next section.

Resources
Facebook’s Open Graph Developer Page
The Open Graph Protocol Page
The Facebook Linter – use this to check if things are working ok
Good blog article on how to get your web sites into your Facebook Insights

Sending messages into Users feeds

To do this you firstly need to make sure the URL has an object ID in the graph and secondly you must be an administrator of the object. To check the URL is indeed an object, go to the following address in your browser, but replace http://www.datalicious.com with the URL you want to check:

You want it to return something like the below (note the highlighted part means the object has an ID). Note: When you do this for thousands of URL’s you won’t do this manually, but initially it’s a quick way to troubleshoot before attempting to post messages!

"http://www.datalicious.com/": { "id": "116002505130390", "name": "Datalicious | Data > Insights > Action", "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs463.snc4/50260_116002505130390_7413361_s.jpg", "link": "http://www.datalicious.com/", "category": "Website", "website": "http://www.datalicious.com/", "description": "Smart data driven marketing. Actively helping companies to optimise their marketing programs by providing accessible reports and actionable insights generated from solid data platforms.", "likes": 4 } 

Once you’ve confirmed your URL has an ID, you need to make sure you’re an administrator of the object. This is usually easy to see, as next to a Facebook “like” or “recommend” widget you will see an “admin” button like below:

Screen_shot_2011-01-19_at_5
Note: The admin button does not appear next to like buttons without the “show faces” set to on, so if you have a button where you don’t see peoples photos when they click like, then you won’t see an admin button. If you’re using a comments box, sometimes you need to click on “like”, then “unlike” to make the admin button appear. Failing all of this, you need to check the open graph meta tags to ensure you’re either giving admin access to either 1. An application, or 2. To specific user ID’s, you should see something like one of the following on every page with OG tags:
<meta property="fb:admins" content="USER_ID1,USER_ID2"/>
<meta property="fb:app_id" content="1234567"/>
To send a message to the “likers” of your Open Graph Object, you can click on the “Admin Page” link and you will be taken to a page that looks similar to a fan page, from there you can post to the wall, which effectively pushes your post to all the people who have liked the object. Note: The post can also include URL’s, etc.

If you want to send messages programatically or to thousands of objects at once, then you need to look at the programmable solution, the one thing to note here is that the “id” field must be numeric, it cannot be the URL as is incorrectly documented on the Facebook page and shown below:

Open_graph_issue
Case Study: GoPetition.com

Below shows the statistics from a site where the Open Graph tags were implemented properly. The site has recently peaked at over 3500 new likes in a single day, which is approximately an order of magnitude above new daily email subscribers. The staggering statistic is the ability to generate viral traffic and accumulate new subscribers to a key communication channel in a single step, with efficiency far beyond most other mechanisms.  

Fb_growth_dec_10

Contact us now if you need help implementing Facebook Open Graph on your website!

About the author

Comments

Ian Lyons responded:

For another example, check out http://www.sydneyfestival.org.au/2011/

Bret Schaller responded:

I already have a fan page for our business with 1100+ fans. I don’t want to start over on a newly created admin page. Can the ‘admin url’ be changed to the current fb page?

Christian Bartens responded:

I'm pretty sure that can be done, you just have to make sure that the admin ID in the meta tag of the page/site matches the one in Facebook.

Bret Schaller responded:

<p>We have two admins for our Facebook page and both ID's were listed.  I'll try adding the Facebook page ID to the list but it will probably throw an error message.</p> <p>Kind regards,<br> Bret</p>

Ian Lyons responded:

You tell opengraph which page you want to crate an OG object for so you can move it. Actually, you want to have the App ID rather than the page ID – your admins then need to be admins of the app.

Bret Schaller responded:

I have a personal fb page, a business page, and a website. I don’t have a fb app (at least not that I’m aware of). Do I need a personal app to make this work?

Ian Lyons responded:

<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">You only need an app to make admin management easier. &nbsp;You can simply add an admin to the app rather than having to update all your web pages. &nbsp;There’s no development – it’s just the basic app registration.<div><br><div><div></div></div></div></body></html>

Sara responded:

please help me. What is: <meta property="fb:admins" content="USER_ID1,USER_ID2"/>With what should I replace USER_ID1,USER_ID2 ??Where do I get the numbers from users id?

Ian Lyons responded:

<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Actually facebook has made this almost impossible to find – especially if you have a vanity URL<div><br></div><div>Go to your facebook photos and copy the Albums link – it will look something like …</div><div><br></div><div><a href="http://www.facebook.com/media/albums/?id=646295765">http://www.facebook.com/media/albums/?id=646295765</a></div><div><br></div><div>that's your ID</div><div><br></div><div><div><div></div></div></div></body></html>

Sara responded:

There is another method, too.1. Go to YOUR facebook aplication (https://developers.facebook.com/apps)2. Go to: Edit Settings 3. In left menu click on: Graph API ExplorerYou will GET a code, something like this:https://graph.facebook.com/1214517489 (THIS IS THE USER_ID)or, on the code (It will also apear a code)look at the first Id: { "id": "1214517489", (THIS IS THE FIRST) "name": "Your Name", "first_name": "X", "middle_name": "Y.", "hometown": { "id": "1078712432964328", (THIS IS THE SECOND, I DON’T KNOW WHAT IT IS) "name": "NewYork, United States" }, "location": { "id": "1078712432964328", (THIS IS THE SECOND, I DON’T KNOW WHAT IT IS) "name": "NewYork, United States" },

Christian Bartens responded:

<html><body bgcolor="#FFFFFF"><div>Thanks Sara, you’re a champion!<br><br></div></body></html>

Ranniel responded:

Hi!I’ve been searching the net for answer to my question and somehow stumbled upon your post. I’m having problem locating the admin page for my website. I’ve tried your method of checking whether it has an object ID but it returns not a numerical ID as shown here:https://graph.facebook.com/?ids=http://www.ampota.com/but when I try to use the debugger it shows an ID and other details:https://developers.facebook.com/tools/debug/og/object?q=www.ampota.comWhen I install the "Like" button on the homepage, it shows 44 "likes" which was reflected on the first link but not on the 2nd link.Do you have any idea what’s wrong with my setup? I just want to have access to my admin page on facebook. :( TIA. :)

sam responded:

FYI – i have data-show-faces="true" on my like button impl, but i don’t see an Admin Page link. this is the iFrame impl: <!– this is the like button–> <div class="fb-like-box" data-href="http://apps.facebook.com/friend_mender&quot; data-width="292" data-height="100" data-show-faces="true" data-stream="true" data-header="false"></div>BTW – logging in thru the FB login to leave on comment on this blog didnt’ work for me.

Leave a Comment