モブログに「いいね!」ボタンを設置する

Posted by
ぴろり
Posted at
2011/02/03 23:12
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
開発メモ カテゴリ

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

 おそらく、個別にパーマリンクを持てるオブジェクトであれば、何にでも「いいね!」ボタンを付けられるハズ。このブログ内で、個別のブログ記事の他にもどこか設置できるところがないかなぁ…と考えていたところ、モブログの画像に設置することを思いつきました。モブログは今まであまり活用できていなかったので、これで少しは賑やかになってくれるといいんですが。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

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

 何はともあれ、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. 画像ファイルを直接「いいね!」した時のウォール

画像に OGP のメタデータを付ける

 「いいね!」ボタンの 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 の今後に目が離せません。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

  1. *1 HTTP ヘッダなどで実現できるのかも? 誰か試してみて!
  2. *2 サイト名についてはog:site_nameを指定しても無視されるようです


関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。