TOP » Blog
« ë·¼ë£î¯ì¯í»¼ê¿ë¿³à äâ¸â¸ | Monthly List | タイトルバナー画像のランダム表示 »
FacebookのOpen Graph protocol対応
ソーシャルブックマークボタン（AddThis）の設置で勢いがついて、今度はFacebook, mixi, GREEなどで使われているOpen Graph protocol (OGP)対応をすることにしました。
この対応をするとFacebookなどでBlog記事がシェアされた際、こちら（Blog作者）の意図通りにFacebookなどのSNS上に表示されるというメリットがあります。
参考にしたのは、以下のFacebook開発者ページ。
で、ジェネレータの力を借りつつ見よう見まねで作ってみたのが以下のタグです。
これを記事の個別ページのヘッダに埋め込みます。
<meta property="og:title" content="<$MTEntryTitle$>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<$MTEntryPermalink$>" />
<meta property="og:site_name" content="<$MTBlogName encode_html="1" trim_to="19"$>" />
<meta property="og:description" content="<$MTEntryExcerpt$>">
<meta property="fb:admins" content="100000028796766" />
以下、それぞれのタグを簡単に解説。
- og:title
- 記事タイトル。このBlogを構築しているMovableTypeには<$MTEntryTitle$>というタグがあるので、これを使用。
- og:type
- 対象となるサイト/ページのタイプを記載。タイプについてはhttp://developers.facebook.com/docs/opengraph/#typesに列挙してありますが、ここは無難に「blog」を選択。
- og:url
- ページのURL。これもMoVableTypeの<$MTEntryPermalink$>タグを利用。
- og:site_name
- サイト名。サイト名を変えることはないと思いますが、全ページのテンプレートで<$MTEntryBlogName$>タグを使用しているので、ここでも例外なく同様に。
- og:description
- 記事概要。同じく<$MTEntryExcerpt$>タグを利用。
- fb:admins
- FacebookのIDを記載することで、自分の記事がどれだけFacebookでシェアされたかトラックできるとのこと。自分のFacebook IDを記載。
あとog:imageというタグがあり、サムネイル画像を設定できるとのことだったのですが、実際にFacebookで試してみたら無くても支障なさそうだったので割愛。
タグの挿入が終わったらページを再構築して、Facebookが提供しているURL Linterでチェック。
全てのページを再構築すると大変なので、適当なエントリーを一つだけ選んでやればよいかと。
あと忘れがちなのが、以下のタグをhtmlタグに埋め込むこと。
<html xmlns:og="http://ogp.me/ns#">
実際にFacebookで投稿してみたら思い通りに行きました。
個人のサイトではあまり必要ないかもしれませんが、Facebookを使って発信した情報シェアしていきたい、という方にはお勧めかと。
Update 2012/05/09
トラックバック
トラックバックURL:
コメント（新着順） / コメント投稿
コメント投稿フォーム
