Facebook's Open Graph API

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.

So how do we get our metatdata to play nice with Facebook?

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 four required 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/.

In addition, we've extended the basic meta data to add two required fields to connect your page with Facebook:

• 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

Platform application ID that administers this page. It is valid to include both fb:admins and fb:app_id on your page.

It's also recommended that you include the following property as well as these multi-part properties.

• 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 Meta:

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

By plugging in your url, you will see what meta Facebook utilizes. If you are thinking about the bigger picture, we'd suggest testing with og:it.