OGP を使って Web ページと Facebook を連携する

私のごく狭い観測範囲で OGP （Open Graph protocol）なるものが流行ってるようなので，便乗してこのサイトでも設置してみることにした。

OGP は Web 上のリソースをソーシャル・グラフと関連付けるための仕組みのようだ。 Facebook の Like ボタンや mixi チェックなどでは OGP による記述を読み込むことで Web 上のリソースとユーザの活動を関連付けることができる。分かりにくいかな。少しづつ説明していこう。

OGP は RDFa の語彙として定義されている。主なプロパティを挙げてみる。

プロパティ	働き
url	リソースの canonical URL
title	リソースのタイトル
type	リソースの種別
description	リソースの説明
image	リソースを表現しているイメージ（画像データへの URL）
site_name	リソースが置かれているサイト名
author	リソースの作者

RFDa は XHTML に埋め込むことを前提にしているのでプロパティのみ定義される。クラスやインスタンスは定義されてない（したがってプロパティの有効範囲（ドメインやレンジ）も定義されない）。

リソースは URL で指示されるもので種別はOGP で定義されているものなら何でも良い。今回は Web サイトおよびページを対象とするので以下の type のうちいずれかを選択する。

article
blog
website

また Facebook の Like ボタンとの連携を前提に設定してみる。

まずはトップページから。

Facebook には OGP の設定方法について解説したページがある。

Open Graph protocol - Facebook開発者

これによると， XHTML のヘッダ内に meta 要素として記述するようになっている。 RFDa ではヘッダ以外にも記述可能なのだが， Facebook のパーサがどの程度の性能なのか分からないので，ここは大人しく Facebook に従うことにする。全部手作業で記述してもいいのだが， Facebook では OGP の meta 要素を生成するツールがあるので，これを使う。

Like Button - Facebook開発者（「Step 2 - Get Open Graph Tags」で生成される）

具体的にはこんな感じ：

<meta property="og:title" content="Baldanders.info" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:image" content="/profile/potrait3.jpg" />
<meta property="og:site_name" content="Baldanders.info" />
<meta property="fb:admins" content="XXXXXXXXX" />
<meta property="og:author" content="Spiegel" />
<meta property="og:description" content="..." />

※ fb:admins はリソースの作者と Facebook のアカウントを紐付ける記述。上述のツールが自動で生成してくれる。 Facebook のユーザ名ではないので注意。

また html 要素のプロパティとして OGP および FBML の語彙を追加するのを忘れないように。

<html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:og="http://ogp.me/ns#"
         xmlns:fb="http://www.facebook.com/2008/fbml" >

（http://www.facebook.com/2008/fbml は実在しない URL なんだけど，まずいんじゃないのかなぁ）

Facebook では Lint ツールも提供している。

URLリンター - Facebook開発者

OGP を設置したページを読み込ませて正しい記述になっているか確認すると良い。（トップページの Lint 結果がこれ）

確認手段としてはもうひとつある。

RDFa Distiller and Parser

このツールでページを読み込ませると RDFa の記述から RDF （XML）を抽出してくれる。ちなみにトップページを読み込ませると以下の RDF が抽出される。

<?xml version="1.0" encoding="utf-8"?>
<rdf:RDF
  xmlns:og="http://ogp.me/ns#"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
  <rdf:Description rdf:about="/">
    <og:image>/profile/potrait3.jpg</og:image>
    <og:description>...</og:description>
    <og:site_name>Baldanders.info</og:site_name>
    <og:author>Spiegel</og:author>
    <og:type>website</og:type>
    <og:url>/</og:url>
    <og:title>Baldanders.info</og:title>
  </rdf:Description>
</rdf:RDF>

これを RDF Validation Service に読み込ませれば OGP 記述が RDF 的にどのような構造になっているか分かると思う。

OGP を設置したページに Like ボタンを設置し（Like Button ツールで作成可能）そのボタンを押すと，ボタンを押したユーザの Wall に以下のリンク情報が書き込まれる。

ところで，ページの type を blog または website として設定すると，site_name と同名の Facebbook ページが作成される（既に存在している場合にどうなるかは不明）。この Facebook ページと実際の Web ページは OGP を通じて連携していて， Web ページの Like ボタンを押すと Facebook ページの Like ボタンも押された状態になる。したがって， Facebook ページの Wall を更新すれば Like ボタンを押したユーザにも（News Feed 上で）更新内容が通知されることになる。これをうまく使えば Web サイトの更新をリアルタイムに（Like ボタンを押した人に）広めることができる。ただし，ここで作成される Facebook ページは（fb:admins で指定される）管理者しかアクセスできない。管理者以外はあくまで Web サイトからの更新として News Feed 上に表示されるようだ。

さて，トップページの設定ができたので，次はブログのエントリページにも OGP を設置する。エントリページの場合は type に article を指定する。このページであれば以下のような感じになる。

<meta property="og:title" content="OGP を使って..." />
<meta property="og:type" content="article" />
<meta property="og:url" content="/blog/000521/" />
<meta property="og:image" content="/profile/potrait3.jpg" />
<meta property="og:site_name" content="Baldanders.info" />
<meta property="fb:admins" content="XXXXXXXXX" />
<meta property="og:author" content="Spiegel" />
<meta property="og:description" content="..." />

これをページのヘッダ内に追加する。 html 要素に OGP と FBML の語彙を追加するのを忘れずに。（このページの Lint 結果がこれ）

article ページはサイトの Facebook ページとは連携しない。 Facebook ページに Web サイトの更新を自動で行うには RSS Graffiti などのアプリケーションを使うと良い。

参考：