Open Graph Protocol の具体的な効能については、amachang の記事を参照して頂くとして^*1、このエントリでは、MovableType で構築されたサイトに「いいね！」ボタンを設置し、OGP で定義されている適切なメタデータを HTML に記述するところの説明をしたいと思います。

「いいね！」ボタンの設置

　まずは Facebook の「いいね！」ボタンを設置します。ボタンを設置するページとしては、個別アーカイブページが適切でしょう。月別アーカイブやカテゴリアーカイブ、トップページに設置しても、あまり意味はないように思えますし^*2。
　「いいね！」ボタンの HTML コードは以下のようになります。ボタンの表示スタイルなどは個別に変更することができ、Like Button のページから HTML コードを取得することができます。肝心なのは、URL の指定部分を、MovableType のテンプレートタグ MTEntryPermalink で置き換えることです。この時、encode_url モディファイヤを忘れずに付加します。

<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink encode_url="1"$>&layout=button_count&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0"></iframe>

　とりあえず、ここまでの作業で、自分のサイトにも「いいね！」ボタンを設置できました。ただ、このままでは、ボタンがクリックされた時に引用されるサイト名や記事タイトルが適切ではありません(Fig.1 )。次のステップでは、Open Graph Protocol で定義されているメタデータを HTML に埋め込むことで、これらの表示を適切にします。

Fig.1 Open Graph のメタデータを埋め込む前に「いいね！」した時のウォール

Open Graph タグの設置

　次に、「いいね！」ボタンを設置したページの HTML 内に、そのページが何について書かれているかを示す Open Graph タグを設置します。Open Graph タグは HTML の head セクション内に以下のように記述します。

<meta property="og:url" content="<$MTEntryPermalink$>" />
<meta property="og:title" content="<$MTEntryTitle encode_html="1"$>" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="<$MTBlogName encode_html="1"$>" />

　これで、「いいね！」ボタンがクリックされた時にアクティビティに表示されるサイト名、記事名、記事へのリンク URL が、メタデータで指定したものになります(Fig.2 )。メタデータが正しく埋め込まれているかを調べるには、Facebook が提供する URL リンターを用いてチェックすることができます。下の図を見ると、og:site_name で指定したサイト名、og:title で指定した記事タイトルが正しく表示されていることが判ります。

Fig.2 Open Graph メタデータを埋め込んだ後に「いいね！」した時のウォール

　Open Graph Protocol では、ブログ記事のなどの他にも、カフェやホテル、レストラン、俳優、書籍などなど、様々なオブジェクトに対してのメタデータを設定することができます。URL を持つものであれば、何でも「いいね！」できるわけですね。この辺りのアイディアは、また今度...