http://developers.facebook.com/docs/opengraph/

Open Graph Protocolは、あなたのwebページがソーシャルグラフと連携することを可能にします。今のところ、実世界に存在する物（映画、スポーツチーム、セ レブ、レストランなど）を象徴するwepページ用にデザインされています。Open Graphタグをwebページに含めることで、あなたのページはFacebook Pageと 同等の物になります。つまり、ユーザがページ上のLikeボタンを押すと、ページとユーザの間にconnectionが作られます。ページはユーザプロ フィールの"Likes and Interests"セクションに表示され、更新情報をユーザへ通知することが可能になります。ページはFacebook Pageが表示されるのと同じ場所（検索結果など）に表示され、あなたのコンテンツをlikeした人をターゲットに広告を出稿することさえ可能です。 Open Graph Protocolを通じて提供されるデータが、ページがどのようにFacebook上で表示されるかを決定します。　

open-graph

Getting Started

webページをgraphオブジェクトにするには、Open Graph protocolの<meta>タグとLikeボタンを足す必要があります。これらのタグは、webページに関する構造化された情報を指定することができます。より多くの情報を提供すれば、その瞬間や将来、Facebook上であなたのwebページが表示される機会が増えます。以下が、映画ページのサンプルです。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <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"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <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."/>
    ...
  </head>
  ...
</html>

Open Graph protocolはには、4つの必須プロパティがあります。

  • og:title - graph上で表示されるべき、このページのタイトル（The Rockなど）
  • og:type - objectのタイプ（映画など）
  • og:image - graph上でこのobjectを象徴する画像のURL。画像サイズは最低縦横50px、アスペクト比は最高3:1である必要があります。FacebookはPNG,JPED,GIFフォーマットをサポートします。複数のog:imageタグを指定することも可能です。
  • og:url - graph上で恒久的にIDとして使用される、objectのURL。（http://www.imdb.com/title/tt0117500/など）.
それ以外にも、Facebookと連携させるために必要な二つのメタデータを拡張してあります。
  • og:site_name - サイトのタイトル（IMDbなど）
  • fb:adminsもしくはfb:app_id - サイト管理者のカンマ区切りのFacebook IDか、Facebook PlatformのアプリケーションID。fb:adminsとfb:app_idの両方を含んでも大丈夫です。
these multi-part propertiesと同様に、以下のプロパティを含めることをお勧めします。
  • og:description - A one to two sentence description of your page.

ユーザがLikeボタンを押してlikeした場合、以下のようなnews feedストーリーがFacebookに投稿されます。og:title に og:url で指定したリンクが貼られ、og:site_nameがサイトのドメインを指すように表示されます。og:typeが、ユーザのプロフィール上のどのカテゴリに表示されるか決めます。og:imageは、画像のサムネイルです。


open-graph-profile

objectによっては、レストランなら位置情報を付与するなど、追加のメタデータが意味をなす場合があります。og:のプレフィックスで始まるプロパティを好きなだけ使って追加情報を足すことができます。上記以外のプロパティに関してはLearn moreをご覧ください。

Adding a Like button

メタタグをwebページに追加すると、そのページと連携するLikeボタンを置けるようになります。シンプルにiframeで足すこともできますし、Javascript SDKを用いてXFBMLタグの<fb:like>を使うこともできます。

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

Likeボタンの詳細なオプションについては、こちらをご覧ください。それ以外にも、たった一行のHTMLを足すだけで social plugins を足すことが可能です。

Check your work

metaタグを正しく埋め込めていることを確認するは沢山あります。

  • 公式のFacebook URL Linterは、LikeボタンなどのOpen Graph Protocolの読み込み部分と同じプログラムで解釈します。そのため、webページをクロールする時の挙動と最も近い動作をします。
  • opengraphprotocol.orgは、プロトコル利用に役立つ数多くのコミュニティツールを提供しています。

Page Administration

ページを管理するには、Facebookアカウントと紐づけるか、Facebookアプリケーションと紐づける必要があります。ユーザアカウントとアプリケーションの両方を紐づけるのも可能です。

ページをFacebookアカウントと紐づけるには、カンマ区切りの管理者ユーザIDを値に持つ、fb:adminsというプロパティをページに足します。以下のように書きます。

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

管理者として紐づけられたユーザは、該当URLをLikeすると管理者として認められます。気付かぬところで管理者になってしまうのを防ぐためです。

サイトによっては、数百、もしくは数千ものページにOpen Graph Protocolを含んでいます。大量のページを含むページを管理するには、ページとFacebookアプリケーションを紐づけることができます。これにより、プログラマティックに更新情報を投稿することが可能になります。webページとFacebookアプリケーションを紐づけるには、アプリケーションIDをfb:app_idプロパティに指定します。

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

Editing Meta Tags

ページのアトリビュートを更新するには、metaタグを更新します。og:titleとog:typehは最初のみ変更できることに気をつけてください。ページが50回Likeされるとtitleは固定され、10,000回Likeされるとtypeは固定されます。すでにLikeしたユーザを混乱さないための措置です。これらの制限回数の後の変更は何も影響を持たず、最初のtitle,typeが維持されます。

変更がFacebookへ反映されるようにするには、ページがスクレイピングされるようにしなくてはなりません。ページの管理者がLikeボタンをクリックするか、Facebook URL LinterにURLを入力した時にスクレイピングされます。プログラマティックに実行するには、以下のようにcURLコマンドを用います。

curl http://developers.facebook.com/tools/lint/?url={YOUR_URL}&format=json

Publishing

webページをlikeした人に対して、Facebookページに対すして投稿するのと同じように、情報を投稿することができます。投稿フォームへの導線は２種類あります。

  • webページ上で、Likeボタン横の「Admin Page」をクリック
  • Facebook上で、Accountタブ下のManage Pagesをクリック、ページ名横のGo To Pageをクリック

自分のwallに投稿するのと同じようにして、ユーザに対して発信することが可能です。"What's on your mind?"と書かれている部分に書き込んで投稿したときと同じように、webページをLikeした人のNews Feedに表示されます。

fb:app_idでwebページがFacebookアプリケーションと紐づいている場合は、Graph APIを用いて、ページをlikeした人に対して発信することができます。まず、アプリケーションのアクセストークンを取得します。以下のようにして取得します。

curl -F type=client_cred \
 -F client_id=your_app_id \
 -F client_secret=your_app_secret \
 https://graph.facebook.com/oauth/access_token

このアクセストークンとwebページのURLを用いて、APIで投稿します。

curl -F 'access_token=...' \
 -F 'message=Hello Likers' \
 -F 'id=http://www.myopengraphpage.com/page1.html' \
 https://graph.facebook.com/feed

PHPのサンプルは以下の通りです。

<?php

$ogurl = "INSERT_YOUR_OG_URL_HERE";
define(FACEBOOK_APP_ID, "YOUR_APP_ID_HERE");
define(FACEBOOK_SECRET, "YOUR_SECRET_KEY_HERE");

$mymessage = "Hello World!";

$access_token_url = "https://graph.facebook.com/oauth/access_token"; 
$parameters = "type=client_cred&client_id=" . FACEBOOK_APP_ID .
    "&client_secret=" . FACEBOOK_SECRET;
$access_token = file_get_contents($access_token_url . "?" . $parameters);

$apprequest_url = "https://graph.facebook.com/feed";
$parameters = "?" . $access_token . "&message=" .
    urlencode($mymessage) . "&id=" . $ogurl . "&method=post";
$myurl = $apprequest_url . $parameters;

$result = file_get_contents($myurl);

// output the post id
echo "post_id" . $result;
}
?>

publish
アプリケーション名と共に投稿されます。

Recommended Meta Data

プロフィールページが持っている情報で一般的に使われている項目はlocationとcontactです。以下が、それら二つをmetaデータとして提供する例です。

Location

あなたのページがビジネス向けであったり、実世界の位置情報に結びつく物であったなら有用な情報です。住所、緯度経度、もしくはその両方で指定することができます。以下の通りです。

<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    [REQUIRED TAGS]
    <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

コンタクトできる対象に関するページであれば、コンタクト情報を含むことを是非考えてみてください。以下のようにです。

<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    [REQUIRED TAGS]
    <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は現在、下に列記するtypeをサポートしています。以下のようにog:typeプロパティで指定します

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

Open Graph Protocolが実在するオブジェクトをサポートするようにデザインされていることを覚えておいてください。もしも対象URLがコンテンツの一部であるなら（たとえばニュース記事や写真、ビデオなど）、og:typeにはarticleを指定すべきです。articleが指定されたページは、実在するオブジェクトではないため先述の情報発信ができませんし、ユーザのプロフィールにも表示されません。

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

UPCやISBNが割り振られている製品に関しては、og:upc, og:isbnを利用できます。製品を特定するのに役立ちます。

Websites

  • blog
  • website
  • article
一時的なコンテンツを象徴するURL（新着記事やブログ投稿、写真、動画など）はarticleを指定してください。websiteを指定してはいけません。websiteやblogはサイト全体を象徴するようにデザインされていますので、og:typeにwebsiteやblogが指定されているページは、通常、ドメインのルート部分にのみ存在すべきです。もし上記のtypeの一つに絞り込めない場合は、独自のtypeを指定できます。Facebook上ではotherとして扱われます。最もよく使われる独自typeを監視し、公式にサポートするようにします。

もし独自のtypeを指定するのなら、独自のネームスペースを使うことをお勧めします。例えば、moviesite.comを運営していてディレクターとしてページを設定したい場合は、以下のようにします。

<html xmlns:moviesite="http://www.moviesite.com/ns#" > 
<head>
....
    <meta property="og:type" content="moviesite:director"/>

Attaching Audio and Video Data

OGPを用いたページに動画をひも付け対場合は以下のように銅がURLを指定します。
  • og:video - 例： "http://example.com/awesome.swf"

また、下記のような追加情報を足すこともできます。

  • og:video:width - 例： "385" (max 398)
  • og:video:height - 例： "400" (max 460)
  • og:video:type - 例： "application/x-shockwave-flash"

FacebookはSWFフォーマットのみサポートしています。動画がNews Feed内に表示されるには、og:imageを指定しなくてはいけません。以下のようにです。

<html xmlns:og="http://ogp.me/ns#"> 
    <head>
        ...
        [REQUIRED TAGS]
        <meta property="og:video" content="http://example.com/awesome.swf" />
        <meta property="og:video:height" content="640" />
        <meta property="og:video:width" content="385" />
        <meta property="og:video:type" content="application/x-shockwave-flash" />
        ...
    </head>
同じように、音声ファイルも指定できます。
  • og:audio - 例："http://example.com/amazing.mp3"

そしてオプションとして、下記を足すことができます。

  • og:audio:title - 例： "Amazing Soft Rock Ballad"
  • og:audio:artist - 例： "Amazing Band"
  • og:audio:album - 例： "Amazing Album"
  • og:audio:type - 例： "application/mp3"
<html xmlns:og="http://ogp.me/ns#">
    <head>
        ...
        [REQUIRED TAGS]
        <meta property="og:audio" content="http://example.com/amazing.mp3" />
        <meta property="og:audio:title" content="Amazing Song" />
        <meta property="og:audio:artist" content="Amazing Band" />
        <meta property="og:audio:album" content="Amazing Album" />
        <meta property="og:audio:type" content="application/mp3" />
        ...
  </head>

Best practices

  • ページ上でLikeしやすいようにしてください。Likeする対象の近くにLikeボタンをおいてください。
  • 投稿するときは、オブジェクトの「声」を扱ってください。例えば、ユーザがテレビ番組の俳優をlikeしてるのであれば、俳優たちについて投稿すべきです。番組についての情報ではありません。

Building standards

Facebookは、Open Graph protocolを用いてあなたのwebページをソーシャルグラフに取り込みます。よりセマンテックなwebを作り出すため、諸々のテクノロジーの中から、既存のオープンなスタンダードに準拠する方法をとりました。
タグ ：
#ogp