Open MagicVox.net
Open Graph Protocol 付きで「いいね！」ボタンを設置する
Open Graph Protocol では、ブログ記事のなどの他にも、カフェやホテル、レストラン、俳優、書籍などなど、様々なオブジェクトに対してのメタデータを設定することができます。URL を持つものであれば、何でも「いいね！」できるわけですね。
おそらく、個別にパーマリンクを持てるオブジェクトであれば、何にでも「いいね！」ボタンを付けられるハズ。このブログ内で、個別のブログ記事の他にもどこか設置できるところがないかなぁ…と考えていたところ、モブログの画像に設置することを思いつきました。モブログは今まであまり活用できていなかったので、これで少しは賑やかになってくれるといいんですが。
何はともあれ、Like Button の生成ページでデザインを選択して、「いいね！」ボタンの HTML を取得します。今回、指定する URL はモブログに投稿された画像の URL になります。とりあえず、これだけでモブログに投稿された画像ごとに「いいね！」ボタンを設置することができます。
このサイトのモブログは MovableType を利用して運用しており、投稿された画像の URL は、ブログ記事の追記フィールドに保存されています。すなわち、画像ごとに「いいね！」ボタンを設置するためのテンプレートは以下のようになります。
<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryMore 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. のように画像の URL がそのままウォールに表示されてしまいました。そこで、ブログ記事の時と同様に、Open Graph Protocol を利用して、画像のメタデータを渡せるようにしてみます。
Fig 1. 画像ファイルを直接「いいね！」した時のウォール
「いいね！」ボタンの URL に画像ファイルを直接指定してしまったのでは、Open Graph Protocol のメタデータを含めることができません*1。求める結果としては、ウォールにサムネイル画像とタイトルが表示されれば良いわけですから、画像ごとに以下のような Open Graph Protocol のメタデータだけを含んだ HTML を用意し、この HTML ファイルの URL に対して「いいね！」を投票できるようにしてみます。
具体的に、MovableType では、個々の投稿画像ごとに個別アーカイブを生成し、その個別アーカイブの URL を指定することになります。
<html xmlns:og="http://ogp.me/ns#"> <head> <meta property="og:type" content="article" /> <meta property="og:title" content="<$MTEntryTitle encode_html="1"$>" /> <meta property="og:description" content="<$MTEntryBody encode_html="1"$>" /> <meta property="og:image" content="<$MTBlogURL$>archive/<$MTEntryMore$>" /> <head> <body></body> </html>
その結果が Fig 2. です。期待した通りに、画像サムネイル(og:image で指定)、タイトル(og:title で指定)、ついでに概要(og:description で指定) がウォールに表示されました*2。
Fig 2. OGP メタデータのHTMLファイルを「いいね！」した時のウォール
「いいね！」ボタンの URL は、実体を直接に示している必要はなく、そのメタデータを含んだ URL で十分なことが判ります。アイディア次第で、様々に活用できそうな Open Graph Protocol の今後に目が離せません。
English