An Early Look at Facebook Open Graph Protocol Integration on News Sites

There has been a lot of news and reaction around Facebook’s new additions to the Facebook Platform: Social Plugins, the Open Graph protocol and the Graph API. News and content sites are a natural fit for participation and Facebook is encouraging news site adoption by showcasing sites that are already experimenting with it. So I thought I’d take a look at some early examples of Facebook Open Graph integration on news sites.

(You can jump to the end for the Takeaways).

The Huffington Post

The Huffington Post has added a “Hot on Facebook” module to its home page and in a sidebar on posts:

The Huffington Post Hot on Facebook module

I like this and think it will do a good job of encouraging user clicks, similar to the Digg widget that has worked well on news sites. Seeing that stories have been liked thousands of times certainly caught my interest.

They have also added the Like button to their post template:

The Huffington Post Facebook Like and Share buttons

At least to-date a prominent Share button is still present too. Users may be unsure which button to use, and since the like and share numbers are different it creates the impression of things being out of sync (even though they are two different things). Add in the Facebook chiclet below the headline and I’d say they are going a little overboard:

The Huffington Post Facebook buttons on blog template

I’m also not sure why the Hot on Facebook module shows 4,241 likes while the post itself shows only 1,363. is selectively applying the Like button in the “Must Reads” module on its home page: Facebook Like button on home page

It is not clear why in this particular case only one of four stories has the button. And interestingly when you click through on that story the Like button does not appear on the page: blog post template

Since this is a blog post it is likely that Time just hasn’t rolled out integration across all editorial templates yet.

The Like button does appear on their article template: Facebook integration on article template

But at least on my computer it was a little slow to load and once loaded it added some extra white space before the start of the editorial text. Like The Huffington Post there are also competing Facebook buttons at work.

The Washington Post

The Washington Post is using Facebook to create a branded featured called Network News that takes the form of a small widget on their home page and on editorial templates:

The Washington Post Facebook Like button on article template

This looks like a nice, simple, useful integration but apparently it has caused user uproar to the point where they had to add an opt-out feature to the widget (the red X):

The Washington Post Facebook Network News

Over the weekend the situation was serious enough that they felt the need to feature an article explaining the widget and how to opt-out right at the top of their home page:

The Washington Post link to Facebook article on home page has a “Friends Activity” module on their home page that shows stories that friends liked and those shared in high volume: Facebook module on home page

Clicking on “View more friends’ activity” brings up a full page version with more links and friend information: Facebook Friends Activity

As for button integration on articles, CNN has decided to go with “recommend” instead of “like”: Facebook Recommend button

It would be interesting to learn what impact that difference in language has on usage.


  • At this early stage news sites are still experimenting with various forms of integration, location and functionality. Start simple to see how users respond and measure the impact on Facebook referrals.
  • Many users are still unfamiliar with the new offerings and concerns about privacy seem to be a common first reaction. So tread carefully and provide clear instructions, settings and (when relevant) opt-out functionality.
  • Consider the impact that Facebook Open Graph protocol integration will have on your existing on-site community features and social functionality. This ReadWriteWeb article is a good resource: Facebook Open Graph: The Definitive Guide For Publishers, Users and Competitors.
  • When adding to editorial templates make sure the new Like button compliments any existing Facebook implementations. Avoid button overkill and the potential user confusion that goes with it.
  • It is also important to note that the Like button functions differently than the various Share buttons that many sites are already using, and at least in its basic form creates a less compelling output. (See Facebook Like Button Vs. Facebook Share: Why I’m Keeping Both from Danny Sullivan). Using the XFBML version instead of an iFrame allows for more customization.
  • Carefully monitor the effect of any integration on page load time. Site speed is now a ranking factor so this impacts SEO as well as usability.
  • Not covered in my examples above is the fact that Open Graph protocol can also provide sites with additional reporting data. This Inside Facebook post has the details: With the Open Graph Protocol, Any URL Can Be Treated Just Like a Facebook Page

Leave a Reply

Your email address will not be published. Required fields are marked *