FC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる : Web Memo. SE

FC2ブログをFacebookのOpen Graph protocol(OGP)に対応させる

Web・Blog
ブログカスタマイズ
2011年04月25日 03時26分

FC2ブログをFacebookのOGP（Open Graph protocol）に対応させるカスタマイズコードと、その使い方を紹介。コピーしてテンプレートに貼り付けるだけでいいので、かなり簡単にFC2ブログをFacebook対応にすることが可能なはず。（設定されるのはブログトップと個別記事ページ。）OGPが具体的にどういうものなのかは以下を参照。

簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。

まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。

ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別することが難しいのです。

なので、決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

リンク先にはさらに詳しく書かれているので、興味があるならば直接読みにいってもらった方が恐らく早い。画像も多く使われているから、（このページのような）文章だけの説明よりわかりやすい部分も多いはずなので。

それで実用面で何ができるかというと、これを書いてる時点で主に以下のようなメリットがある。

「いいね！」やシェアしたときのタイトルや引用部分、引用画像をページ（運営者）側で設定できる。
コンテンツページの正式なURLを指定できる。（重複URL対策。）
ブログとFacebookアカウントの紐付けができる。
3.と関連して管理者による「ブログの公式Facebookページ」や「Facebookインサイト」といういいね！数やシェア数の推移・集計ページを作成することができる。
- 単なる非公式のFacebookページ（旧ファンページ）なら自由に作れるので、運営者のFacebookアカウントと紐付けして「公式」と明示（告知）できる点が異なる。

ということで「Facebookを利用していて、ブログと能動的に連動させたい」あるいは「Facebookで共有される情報を（ある程度）管理したい」という場合に有用なカスタマイズといえるはず。ただ前提として、Facebookはかなり頻繁に仕様が変わるため、（読んだときに）ここに書かれた内容がすでに正しくない可能性はあるという点に注意してほしい。

FC2ブログ用OGP追加コード

まず下準備としてテンプレートの「HTMLタグ（<html>の部分）」に次の属性を追加する。

xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"

実際にタグ部分に追加すると、以下のような感じになるはず。（例はXHTML 1.0の場合。）

<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

次にheadタグ内のどこかに以下のタグを追加する。

<meta property="og:site_name" content="<%blog_name>" />
<meta property="fb:admins" content="ユーザーID or ユーザーNo" />
<!--myimage--><meta property="og:image" content="<%image>" /><!--/myimage-->
<!--index_area-->
<meta property="og:title" content="<%blog_name>" />
<meta property="og:type" content="blog" />
<meta property="og:description" content="<%introduction>" />
<!--/index_area-->
<!--permanent_area-->
<meta property="og:title" content="<%sub_title>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<%url>blog-entry-<%pno>.html" />
<meta property="og:description" content="<!--topentry--><%topentry_discription><!--/topentry-->" />
<!--/permanent_area-->

どのタグが何を設定しているかは以下で説明するので、必要がないと思ったものは任意で消してもらえばOK。（公式の説明ページはOpen Graph protocol - Facebook開発者にあるんだけど、全文英語でわかりやすいとは言い難いので。）

property="og:site_name"

サイト名やブログ名を設定する。多くのサイトでは記事タイトルとサイト名は併記されていて、基本的に機械はそれを区別できない（しない）が、これを設定しておけばサイト名だけを明示しておくことができる。

なお少し前まではいいね！やシェアをしたときに「○○（サイト名）の××（記事タイトル）について『いいね！』と言っています」などのかたちでウォールに表示されていて、設定したサイト名が明確に表示されていたものの、これを書いている時点では表示されなくなってしまった模様。（ただ内部的にはデータを持っているのではないかと思う。）

property="fb:admins"

Facebookアカウントとそのページやサイト・ブログを紐付けするための設定。登録した名前（ID）か、アカウントを取得したときに割り当てられた数字のID（ユーザーネームを取得する前にはURLにも使われている）を記述する。紐付けしたくないなら特に書き込む必要はない。（ので削除しても構わない。）

OGPを設定するつもりがなくても、いいね！やシェアの動向を見るためのツールのFacebookインサイトを使うためには必ずこのタグを記述する必要があり、下準備として貼り付けコードが表示される。ただずっと設定しておく必要はないようで、試したところ一回Facebook側で認識してしまえばタグを外してしまっても特に問題はないようだ。

property="fb:app_id"

ユーザ名の代わりにFacebookプラットフォームアプリケーションID（Facebook app ID）を使う場合はこちらを設定する。（併記することもできる。）とはいえ普通はユーザ名かユーザNoを使えばいいはずなので、上記のコードには含まれていない。使うなら任意で書き換えるというかたちで。

property="og:image"

いいね！やシェアされたときに、セットでウォールに表示される画像を設定する。かつてはシェアしたときはページに表示されている画像から任意のものを選べたが、現在はシェアがほぼ廃止状態になりいいね！に統一されたせいか、Facebook側で勝手に選択した画像が表示されるようになっている。そのため場違いな画像が選ばれたり、全然関係ないブログパーツの画像が表示されがちになったので、設定しておく意味は大きい。

今回のコードではFC2ブログでプロフィール画像を設定している場合に、自動的にその画像を指定するようにしている。従って、プロフィール画像を設定していないと機能しない。「プロフィール画像を設定してない」あるいは「プロフィール画像以外の任意の画像を使いたい」という場合も当然あるはずなので、そのときは以下のコードに差し替えてもらえばOK。

<meta property="og:image" content="[画像のURL]" />

property="og:title"

記事のタイトルを設定する。「og:site_name」とセットで使うことによって、サイト名と記事タイトルを明確に区別させることができる。設定しておくとFacebookのウォールに表示されるとき、このタイトルが実際のページタイトルより優先される様子。

property="og:type"

そのページのカテゴリ（種類）が何であるかを示す。Webサイトの場合は「blog」「website」「article」が用意されていて、blogとwebsiteはサイトそのもの（つまりサイトトップ）に、articleは個別ページに設定するのが正しい。（要はブログだからといって、すべてのページに「blog」を設定してはいけないということ。）

この基準に従って、今回のカスタマイズでもブログトップページには「blog」を、個別ページには「article」を設定済み。