Open Graph protocol - Facebook Developers

Introduction

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. Once your pages become objects in the graph, users can establish connections to your pages as they do with Facebook Pages. Based on the structured data you provide via the Open Graph protocol, your pages show up richly across Facebook: in user profiles, within search results and in News Feed.

Getting Started

To turn your web pages into graph objects, you'll need to add Open Graph protocol <meta> tags and the Like button to your webpages.

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. Here's an example for a movie page:

<html xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:fb="http://developers.facebook.com/schema/">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="movie" />
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/ "/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg" />
    ...
  </head>
  ...
</html>

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.
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 one required field to connect your page with :

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.
og:site_name - A human-readable name for your site (especially if your page is part of a larger site; should not include 'www' or '.com' in most cases)

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.

For example:

    <meta property="fb:admins" content="USER_ID" />
    <meta property="og:site_name" content="IMDb" />
    <meta property="og:description"
         content="A group of U.S. Marines, under command of
               a renegade general, take over Alcatraz and
               threaten San Francisco Bay with biological
               weapons." />

In the sample News Feed story below, the og:title links to og:url and the og:site_name is rendered pointing to your site's domain automatically:

On a user's profile, og:type defines which category your link will appear within; og:image is the image thumbnail.

For some objects, it makes sense to specify additional meta data, such as location for a restaurant. You can add as many og:-prefixed properties as you would like to provide additional context about your web pages. Learn more about the other property fields.

Adding a Like button

Once you configure the meta tags on your web page, you can now add a Like button associated to this page. The Like button can be simply added with an <iframe>, or you can use the JavaScript SDK for the <fb:like> XFBML tag:

<fb:like href="http://developers.facebook.com/" width="450" height="80" />

Go here to learn about additional Like button options. Here's a sample Like button for an Open Graph-enabled page:

You can also add any of a number of social plugins to your site with a line of HTML.

Administering your page

You can update the attributes of your page by updating your page's <meta> tags. Note that og:title and og:type are only editable initially; after the page receives 10 likes, these properties become fixed to avoid surprising users who have liked the page already.

Once users have liked your page, you can publish stream updates to the users who have liked your page and get statistics about your pages just like you can with Facebook Pages. To administer your page, you need to associate it with your Facebook account. To do so, add the additional property fb:admins to your page with a comma-separated list of the user IDs or usernames of the Facebook accounts who own the page, e.g.:

<meta property="fb:admins" value="USER_ID1,USER_ID2" />

Each listed user must click Like on the URL to be approved as an admin. This is to prevent users being made admins without their consent.

Once you have associated the page with your Facebook account, the page will show up in Pages You Admin on Facebook. From that interface, you can publish stream updates and get detailed analytics about the users who have liked your page.

Programmatically administering your pages

Some sites may have hundreds or even thousands of pages with Open Graph protocol meta data. To handle a site with lots of pages, you can link your pages to your Facebook Platform application, which will enable you to publish stream updates to your pages programmatically. To connect your Page to your Facebook application ID, include your application's id in the fb:app_id property of your pages:

<meta property="fb:app_id" value="1234567" />

Once your page has been associated with your Facebook application, you can publish updates to the users who have liked your pages via the Graph API. First, you need to get the Facebook ID of your page from its canonical URL:

curl 'https://graph.facebook.com/id?url=http://www.imdb.com/title/tt0117500/'

Assume the ID of your page is 1234. Then you would publish a stream update to all of the users who have liked your page using the stream.publish call. We will very shortly provide support for publishing through the Graph API.

See the authentication guide for details on generating an OAuth access_token for your application that you can use for these Graph API calls.

Recommended Meta Data

Two commons pieces of information many profile pages have are location and contact information. Below are examples of how you can provide this information as meta data.

Location

This is useful if your pages is a business profile or about anything else with a real-world location. You can specify location via latitude and longitude, a full address, or both. For example:

<html xmlns:og="http://opengraphprotocol.org/schema/">
  <head>
    ...
    <meta property="og:latitude" content="37.416343" />
    <meta property="og:longitude" content="-122.153013" />
    <meta property="og:street-address" content="1601 S California Ave" />
    <meta property="og:locality" content="Palo Alto" />
    <meta property="og:region" content="CA" />
    <meta property="og:postal-code" content="94304" />
    <meta property="og:country-name" content="USA" />
    ...
  </head>

Contact Information

Consider including contact information if your page is about an entity that can be contacted. For example:

<html xmlns:og="http://opengraphprotocol.org/schema/">
  <head>
    ...
    <meta property="og:email" content="me@example.com" />
    <meta property="og:phone_number" content="650-123-4567" />
    <meta property="og:fax_number" content="+1-415-123-4567" />
    ...
  </head>

Object types

Facebook currently supports the following object types. They're specified using the og:type property. For example:

<meta property="og:type" content="athlete" />

Activities

activity
sport

Businesses

bar
company
cafe
hotel
restaurant

Groups

cause
sports_league
sports_team

Organizations

band
government
non_profit
school
university

People

actor
athlete
author
director
musician
politician
public_figure

Places

city
country
landmark
state_province

Products and Entertainment

album
book
drink
food
game
product
song
movie
tv_show

For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties. These properties help uniquely identify products.

Websites

blog
website

Best practices

Make it easy for users to Like things on your site. Place the Like button close to the object they are liking.
Make only real-life things into objects. Users don't want news articles and other transient content as objects on their profile. You can use some of the og tags to enrich these types of URL too, see here.
When publishing, use only the 'voice' of the object. For example, if users are liking an actor in a TV show, that actor should publish stories about themselves, not general information on the show, or the TV network.

Building standards

Facebook Platform uses the Open Graph protocol to enable integrations of your web pages into the social graph. While a new technology, we've tried to build off of existing open standards to create a more semantically aware web.