1. Blog
  2. Design
  3. Standards
  4. Facebook's Open Graph API
Facebooks Open Graph API & Protocol

Facebooks Open Graph API & Protocol

The Open Graph API underpins a huge piece of Facebook’s future viability. We’ll explain what is DublinCore, what is RDF, what is metadata & how will the Open Graph protocol impact the future of web development.

There is one single string connecting you from just about anyone in the world. Without going to the easy "Kevin Bacon" analogy, just think of it this way... Lets say for example, you love Karate Kid (and really, who doesn't?)... so does 12 year-old Paco (from Spain). Although you may have very little in common with Paco... You both know how to pull off a wicked Crane Kick - and that is a connection. Facebook's real genius, is allowing these connections to be aggregated, compiled, and queried. "Yeah... but how?"... The simplest answer? By utilizing Open Graph.

Facebook Explains Open Graph Like This...


The Open Graph protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page equivalent to a Facebook Page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook.

But it's not just Facebook... To be perfectly honest, this concept has shown it's face in other already existing technologies. Two Examples are DublinCore and RDF.

What is DublinCore?

The Dublin Core Metadata Initiative, or "DCMI", is an open organization engaged in the development of interoperable metadata standards that support a broad range of purposes and business models. DCMI's activities include work on architecture and modeling, discussions and collaborative work in DCMI Communities and DCMI Task Groups, annual conferences and workshops, standards liaison, and educational efforts to promote widespread acceptance of metadata standards and practices.

What is RDF?

RDF stands for "Resource Description Framework" which is not a particularly informative acronym. Put simply, RDF is the way information is expressed semantically on the web. RDF is constituted by triples which are subject-predicate-objects statements. This lets machines understand human knowledge statements. When many triples are aggregated they are stored in what's called a "triple store." By querying a triple store, we can learn information that might otherwise be hard to gather by just browsing the web with our eyes. As the semantic web evolves, it will become easier to query triple stores using natural language, and hopefully, discover things we wouldn't have ordinarily. And these protocols are really just ways of manipulating Metadata.

What is Metadata?

Metadata is loosely defined as data about data. Metadata is traditionally found in the card catalogues of libraries and is today commonly used to describe three aspects of digital documents and data: 1) definition, 2) structure and 3) administration. By describing the contents and context of data files, the quality of the original data/files is greatly increased. For example, a webpage may include metadata specifying what language it's written in, what tools were used to create it, and where to go for more on the subject, allowing browsers to automatically improve the experience of users.

Integrating Facebook's Open Graph API...

Getting Started: First you need to load Facebooks Javascript SDK into the head of your page. We Suggest using the Asynchronous SDK to speed up your page loading and avoid Javascript conflicts. Learn how to do that here: http://developers.facebook.com/docs/reference/javascript

Then begin adding your tags to each page: The tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future.

The Open Graph protocol defines primary properties


  • og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
  • og:type - The type of your object, e.g., "movie". See the complete list of supported types.
  • og:image - An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.
  • og:site_name - A human-readable name for your site, e.g., "IMDb".
  • fb:admins or fb:app_id - A comma-separated list of either Facebook user IDs or a Facebook
  • og:description - A one to two sentence description of your page.

With Your script in place, your page properly tagged... you should be good to go! YAY!! Now double check to make sure everything looks the way you want it.

Testing your Open Graph Metadata...

If your primary concern is how Facebook interacts with your site - I'd recommend using Facebook's own Linter.

Open Graph Protocol - Facebook Linter

Hopefully this post has helped many of you better understand the importance of Facebook's Open Graph API and how it impacts web development. If you have any Open Graph protocol facts or tips, please send them this way and if you've found this post helpful - Please Share.


Related Articles
  • 10 Responsive Frameworks You Need
    Bootstrap vs UIKit vs Foundation - We take a look inside all the popular frameworks on the market and find the 10 Responsive Frameworks You Need.
    10 Responsive Frameworks You Need
  • Effective Social Media Automation
    Paying attention to social media is important, but it can be time consuming. In this post we'll show you how strategically utilizing social media automation tools can save you that effort and give both you and your followers a better experience.
    Effective Social Media Automation
  • Open Graph Vector Logo
    This Open Graph vector logo is a free high quality download, perfectly rendered and available in either AI or PSD formats. We love the Open Graph logo, vectors, & freebies... You should too.
    Open Graph Vector Logo
  • Pinterest Branding and Marketing Strategy
    This Pinterest tutorial will help build your Pinterest marketing and branding strategy... and also has a few tips for using it effectively.
    Pinterest Branding and Marketing Strategy
  • Social Stamps - Icon Set
    A clean colorful set of stamp themed social networking icons. Available for free download to all you icon fans out there.
    Social Stamps - Icon Set
  • What is Schema? - A Schema Microdata Tutorial
    Answering "What is Schema?" for clients can be tricky since it's hidden in code, but that doesn't make it any less important. This Schema Microdata tutorial will answer that question for you and get you started on implementing it on your own website.
    What is Schema? - A Schema Microdata Tutorial
Videos
Written By:
Matthew Haeck
Raleigh, NC

Greetings, I'm the lead designer and resident full stack web developer at Haeck Design. A majority of my time is spent creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade.

Haeck Design - Stamp Logo