Open Graph Protocol 付きで「いいね!」ボタンを設置する

Posted by
ぴろり
Posted at
2011/02/03 00:20
Trackbacks
関連記事 (3)
Post Comment
コメントできます
Category
開発メモ カテゴリ
カバーイメージ

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 ...... 決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。

 このブログにも Facebook の「いいね!」ボタンを取り付けてみました。ただ、そのままボタンを設置しただけだと、サイト名や記事タイトルが適切に引用されなかったので Open Graph Protocol にも対応することに。「いいね!」してもらうと、Open Graph Protocol で指定したサイト名と記事タイトル、URL が表示されるようになりました。

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

 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 を持つものであれば、何でも「いいね!」できるわけですね。この辺りのアイディアは、また今度...

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

  1. *1 ホント、上手にまとめてあると思います
  2. *2 月別アーカイブに「いいね!」する意味が判らない

この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:ギャンブル必勝法をシミュレーションしてみる

関連記事/トラックバック (全 3 件中、最新 5 件まで表示しています)

nlog(n) のスクリーンショット
タイトル
OGP のメタタグの追加と XHTML+RDFa 1.1 への移行
Trackbacked at
2013/03/07 00:47
from
nlog(n)
概要
Open Graph Protocol に対応するメタタグをブログ記事に埋め込むことにした。すると XHTML が Valid でなくなってしまったので ...

Open MagicVox.net のスクリーンショット
タイトル
「いいね!」ランキングを作る ~ 準備編
Trackbacked at
2011/02/05 00:26
from
Open MagicVox.net
概要
サイトに設置した「いいね!」の押され具合をデータで解析する方法  たとえばWeb担では、APIで取得したデータを使って、Facebook「いいね!」数の...

Open MagicVox.net のスクリーンショット
タイトル
モブログに「いいね!」ボタンを設置する
Trackbacked at
2011/02/03 23:14
from
Open MagicVox.net
概要
Open Graph Protocol 付きで「いいね!」ボタンを設置する  Open Graph Protocol では、ブログ記事のなどの他にも、カ...

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

コメントを投稿する

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