Exploring OG: What is the Open Graph?


Even if you don’t know what Facebook’s The Open Graph is, you know what it is. Because you’ve been clicking the little “like” icons on any site where you see them—for probably about 18 months now.

The beauty to Facebook’s open graph like button is that it follows Steve Krug’s number one website design principle—it’s so intuitive, you don’t think twice about it. You simply see a thumb’s up, click it, and move on with your life.

But to be honest, integrating the “like” button to your website was just Phase 1 of Facebook’s Open Graph plan. If you don’t know what the other phrases are, let’s explore this open graph some more.

What is the Open Graph?

Philosophically, It’s All About (My) Relationships

At its core, I believe the open graph is 100% based on the idea that relationships are often the number one driver or restrainer in our lives. If that is true, then the choices we make—even on the internet—can be positively or negatively affected by our relationships. But we don’t care nearly as much about other needs and wants as we do our own—therefore, it is our own personal relationships that affect our choices the most.

Facebook is simply figuring out how to leverage this foundational aspect of human nature. And having a social media site isn’t enough. Facebook can’t go out and force every business to build their websites inside of Facebook just so the nebulous and difficult-to-objectify-relationship-driver-and-restrainer element can be present in a user’s choice online . . . or can they? Have they?

If you don’t recognize that this is the philosophical underpinning to Facebook’s Open Graph movement, your head is in the sand and you definitely needed to read this post.

Practically, It’s Three Ways For You (And Your Business or Idea) to Leverage the Power of Relationships

Phase 1: Website Integration (Open Graph Protocol code and Social Plugins)

A few years ago, I remember pasting a URL for an article on my Facebook wall. Suddenly, the URL disappeared and the lead to the story showed up—I think even with a picture. I was impressed. Cool! No ugly URLs and a photo!

That was years ago.

Today, you probably don’t think twice about this feature, but do you ever wonder how that story lead and photo got there? I remember wondering at the time whether Facebook was scrapping the internet to grab <img srcs> and <h1>s from sites.

I don’t know how they used to do it, but I know how they’re doing it today. They created a specific set of code—called the Open Graph protocol—that coders can add to their site. Once that code is added, Facebook can then pull in your blog’s or story’s appropriate image, the description or lead to your story, your headline, etc. The advantage to this set of code is that it is uniform—if every website does this, then Facebook can portray these stories and articles consistently on walls, the newsfeed, and the ticker (yep, that’s a new one!).

But to get programmers to do this work and to bring in the power of relationship sharing, Facebook pushed out several social plugins.

The current list of plugins are

  • Like Button and/or Box
  • Login Button
  • Registration Button
  • Send Button
  • Subscribe Button
  • Comments
  • Activity Feed
  • Facepile
  • Live Stream

The advantage for website designers is several:

  • We don’t have to build our own version of a social network world in order to have comments on a story or blog article.
  • We don’t have to rebuild a user’s community of friends for every article—we simply integrate into the user’s existing community.
  • We’ve just created a rich piece of content (complete with story lead, link back to our site, and images) that friends share in a user-friendly, engaging manner in their social world.

The marketing potential, brand saturation, and search engine optimization benefits can be huge for people who want to spread their ideas.

But Facebook didn’t stop with simple website integration.

Phase 2: APP Integration and Single Sign-On

Granting third-party application developers access to these same principles will certainly create similar effects for third-party applications, but Facebook is allowing application developers, as they say it, to go deeper. In fact, they’re inviting a new class of applications (as Mark Zuckerberg is calling them)–see list below–to “deeply integrate” into Facebook’s “core user experience.”

This new class will be business and companies with services and products who can leverage the power of real-time social media marketing relationships and back-end data integration.

Introducing Timeline: A New Facebook Profile and Structure for a New Kind of App

To let this new class of apps in, Facebook recently beta-tested and launched their new profile page—the Timeline. While this view is nice for squishing your life into key and pertinent (algorithmically-determined highlights), the real power to the Timeline is the ability for Facebook to nearly automatically share activity from this new clas of apps on your wall, in the news feed, and in Timeline’s ticker (a real-time stream of your activity).

Some examples of the new class of apps include (or will probably soon include, provided they can work out the legal pieces):

  • Spotify: digital music service that posts every song you are listening to in real-time (in other words, become a DJ for your friends)
  • Washington Post: see and read what your friends are reading in real-time
  • Netflix: posts what you’re watching in real-time

List of New Facebook Applications

To get into the new Timeline, developers must run their apps, using the formula of a verbs (cook) and objects (recipe). Here’s a list released on Wednesday, January 18, of new Facebook applications available:


  • Gogobot
  • Airbnb
  • TripAdvisor​
  • Wipolo
  • Where I’ve Been


  • Foodspotting
  • Cookpad
  • Snooth (wine)
  • Urbanspoon
  • Yummly
  • ​Foodily

Shopping / Fashion

  • Pose
  • Pinterest
  • Polyvore
  • Oodle
  • eBay
  • Giftrocket
  • Payvment
  • Livingsocial


  • MapMyRun
  • Runkeeper


  • Rotten Tomatoes
  • Dailymotion (French video site)
  • Cinemur (French video site)
  • Metacafe (videos)
  • Ford (game)
  • Wooga (Bubble Island, Diamond Dash)
  • OMGPOP (Draw My Thing)
  • Zynga (Words with Friends, Castleville


  • Causes
  • Fundrazr


  • BranchOut (job search)
  • Monster (job search)
  • Color (photo and video sharing)
  • Courserank (education)
  • Grockit (education)
  • Foursquare (location)
  • Goodreads (books)
  • Kobo (books)
  • StubHub (ticketing)
  • Ticketmaster (ticketing)
  • Ticketfly (ticketing)
  • ScoreBig (ticketing)
  • Appsfire (app discovery)
  • Artfinder (art)
  • Autotrader (cars)

Phase 3: Going Where the Users Are—Mobile Devices

Oh, and did we mention—all of the above power of integration and marketing applies to mobile devices?

Putting it All Together Now: Levi’s Friend Store

To date, the best case study of close integration with the power of the Facebook’s Open Graph, is perhaps Levi’s Friend Store.

Clothes have always been more about who is wearing what than what it costs (or whether it actually even looks good). So what better way to leverage the like button and single-sign on feature than to integrate it to the online clothing store?

If you’ve been around technology and philosophy, you know that “The Web is Us/ing Us” YouTube video is thought-provoking and prophetic.

I’m no fortune teller, so I don’t know what Facebook has up its sleeve next, but I guarantee it will continue to build on this principle—that it’s all about teaching the system to make connections while leveraging the power of relationships.

What do you think? Where do you think Facebook is heading next?