自分のサイトとFacebookページを統合すると、自分のサイトをFacebookページのように動作させることができます。ユーザーはFacebookページでするのと同じようにサイトに「いいね!」して友人たちと共有することができ、サイト管理者もまた、Facebookページでするのと同じように「いいね!」してくれたユーザーのストリームにアップデートをプッシュすることができます。この記事ではその機能の導入方法を紹介します。

このページの内容は執筆時のもので、すでに古くなっています。2012年11月現在、外部Facebookページは廃止の方向(またはすでに廃止)となっています。ご注意ください。

どんなことができるの?

サイトをFacebookのOGPに対応させると、サイト管理者にはFacebookページのそれとほとんど同じ管理画面がFacebook上に発行されます。この管理画面は見た目も機能もFacebookページそのものですが、一般のユーザーには公開されず、管理者だけがアクセスできます。

この管理画面をFacebookページとして使うと、管理者はサイトのいいね!ボタンを押してくれた人のストリームへとアップデートをプッシュできます。アップデートは管理画面(Facebookページと同じインターフェイスです)からウォールに書き込んだり、アプリでRSSを取り込んだり、といった通常のFacebookページでするのと同じ操作方法でおこなえます。

要するに「Facebookページを作らずに、Facebookページの機能だけを活用できる」のです。

実際の挙動

言葉だけではわかりにくいので、実際に動作を見てみましょう。下に表示した Like Box の「Facebookで「SEO 検索エンジン最適化」を見る」というリンクは、通常のFacebookページであればFacebookページに接続していますが、この場合はこのサイトにリダイレクトされます。本物のFacebookページは存在しないからです。

次にLike Boxの「いいね!」ボタンを押したときの挙動ですが、押すと『あなたがSEO 検索エンジン最適化について「いいね!」と言っています。』というアクティビティが自分のウォールに追加されるのと同時に、友達のストリームにも『○○さんががSEO 検索エンジン最適化について「いいね!」と言っています。』というアクティビティが表示されます。

さらに、このサイトにアップデートがあったときに、その情報がストリームに流れてきます。このサイトで発信される情報は平日なら1日数件はありますから、あとで自分のストリームを見てみれば、このサイトからの情報が流れてきたことを確認できると思います。宣伝くさくて申し訳ないですが、実際に上のLike Boxの「いいね!」ボタンを押して確認してみてください(いいね!はあとで取り消してもらっても構いません)。

またLike Button の挙動ですが、基本的な挙動はOGPに対応しただけの普通のサイトと同様です。しかし、Like Button タグの中でサイトのトップページを対象URLとしてポイントしたものだけは挙動が違っており、どうやら一度のクリックでFacebookページっぽいものへのいいね!とトップページへのいいね!が同時におこなわれるようです。下はこのサイトのトップページ用のLike Buttonですが、上でいいね!してくれた人が見ると、ボタンがグレーアウトされ非アクティブになっていると思います。

制限事項

ここまでいいことずくめのように書いてきていますが、通常のFacebookページと比較すると、統合されたサイトには一部制限があります。制限の内容は次の通りです。

  • アカウント切り替えの「ページ名でアカウントを使用」オプションが利用できない
  • 管理画面全体が管理者以外には表示されないので、他のユーザーがウォールを見に来ることができない(代わりに自分のサイトが表示されます)
  • 同じ理由で、他のユーザーがサイトのウォールにポストすることもできない
  • 同様にノートも利用できない
  • すでにFacebookページを持っていた場合、既存のFacebookページにいいね!してくれた人を引き継ぐことはできない

これらの制限が問題にならないサイトもあるでしょうし、致命的になるサイトもあることでしょう。では、どのような人や会社には向いているのでしょうか。

どんな人(または会社)に向いている?

Facebookページと自分のサイトの統合にはわずかですが制限もあることから、人や会社によって向き不向きはあると思われます。たとえば、Facebookページを使って積極的なコミュニケーションをしたい(これがFacebookページの本来の使い方ですね)という人や会社にとっては、Facebookページのウォールを使ったコミュニケーションが取れない(第三者がウォールに書き込めない)という制限がネックになるでしょう。

一方で、次のような人や会社には向いていると言えます。

  • 自前のサイトがあるのに、それとまた別にわざわざFacebookページも作るというのは面倒すぎる
  • Facebookページには興味があるけど、facebookページ上でのコミュニケーションを積極的にやるだけの人手がない
  • ユーザーとのコミュニケーションには消極的だが、Facebookの集客力は活用したい

このサイトは僕が一人でやっている個人サイトですので「手間がかからず手抜きに見えないFacebookページっぽいもの」をゲットするというのは魅力的なことで、その誘惑に勝てず、統合に踏み切りました。要するに、このサイトは上記の各項に当てはまっていた、というわけです。

実はこのサイトには既設のFacebookページがあり、そこではすでに350人を超える人たちにいいね!してもらっているのですが、そのFacebookページで何かコミュニケーションを図るわけでもなく、ただアップデートを淡々と流しているだけというFacebookページの本来の活用法からは程遠いお寒い現状だったので、それならいっそFacebookページはやめてサイトに統合してしまったほうがいい、と考ました

導入の方法

導入の方法、と言っておいてアレですが、現時点ですでにサイトをOGPに対応させた上で Like Button を設置しているウェブマスターであれば、Facebookウェブページ管理インターフェースもすでに自動で生成されています。管理画面へは、以下の3種類の方法でアクセスできます。

  • 自分のサイトのトップページのLikeボタンを自分でクリックすると、ボタンの右側に「管理用ページ」と「インサイト」の2つのリンクが表示されます。その「管理用ページ」リンクをクリックすると管理画面に遷移します
  • Facebookで自分のアカウントに接続し、画面右上の「アカウント」タブをクリックします。その中の「ページ名でFacebookを利用」をクリックすることで、管理画面ページへのリンクが表示されます
  • Facebookサイトで自分のアカウントに接続し、左カラムに旗のアイコンのついた「Facebookページ」というリンクを探してクリックすると、管理画面へのリンクが表示されます。

これらのどの方法を試しても管理画面が見つからない場合、サイトが Facebook OGP に対応しておらず、まだ管理画面を利用する条件が整っていません。まずはサイトをOGPに対応させることからはじめましょう。

サイトをOGPに対応させる

この説明については、僕がいまさら説明するまでもなく、たくさんの優れた説明がネット上にありますので、それらを参照して作業を進めていってほしいのですが、僕のほうでも簡単に手順をリストにしておきます(僕が参考にしたサイトは最後のほうで一覧にします)。

サイトのHTMLを編集して、OGP と FBML の語彙を宣言

僕のこのサイトの場合で言えば、ソースコード冒頭の次の部分です。

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

上記のように、もともとついているW3C(またはお使いのCMS)の語彙に加えて、OGPとFBMLの語彙を加えます。僕のサイトでは改行やインデントがありますが、インラインやタブなしで記述しても問題ありません。

<head></head> 内にmeta要素としてOGPの情報を記述

このセクションの情報のほとんどは、お使いのCMSの何かしらの情報から引っ張ってこられるはずです。僕のこのサイトの場合で言えば <head></head> の次の部分です。

<meta property="fb:admins" content="100001095493902" />
<meta property="fb:page_id" content="232710843432076" />
<meta property="fb:app_id" content="198090586918829" />
<meta property="og:site_name" content="SEO 検索エンジン最適化" />
<meta property="og:title" content="SEO 検索エンジン最適化" />
<meta property="og:image" content="https://www.searchengineoptimization.jp/image/seologo4ogp.jpg" />
<meta property="og:description" content="自分で検索エンジン最適化を行うための方法や無料ツール、基礎知識、チュートリアルも掲載しているほか、忙しいWebサイト制作者・Webサイト運用担当者に最適な最新情報を素早く簡単にチェックできるSEO・SEMのニュースも配信しているSEOの総合情報サイトです。" />
<meta property="og:url" content="https://www.searchengineoptimization.jp/" />
<meta property="og:type" content="website" />

上記ソースの冒頭に並んでいる下記のそれぞれについて説明します。

<meta property="fb:admins" content="100001095493902" />
<meta property="fb:page_id" content="232710843432076" />
<meta property="fb:app_id" content="198090586918829" />

このうち、初期の段階でかならず入れておかなければならないのは fb:admins だけです。これは管理者個人のIDを示す部分で、ここにはFacebook個人アカウントのID(数字)が入ります。自分のIDがわからない方は、Like Button – Facebook 開発者の「Step. 2」の項にある OGPタグのジェネレーターを見ると、最下部に表示されているはずです。なお、fb:page_id は後ほどIDが発行されたあとで指定、fb:app_id は必要がなければ指定しなくてもいいはずです。

<meta property="og:site_name" content="SEO 検索エンジン最適化" />
<meta property="og:title" content="SEO 検索エンジン最適化" />
<meta property="og:image" content="https://www.searchengineoptimization.jp/image/seologo4ogp.jpg" />
<meta property="og:description" content="自分で検索エンジン最適化を行うための方法や無料ツール、基礎知識、チュートリアルも掲載しているほか、忙しいWebサイト制作者・Webサイト運用担当者に最適な最新情報を素早く簡単にチェックできるSEO・SEMのニュースも配信しているSEOの総合情報サイトです。" />
<meta property="og:url" content="https://www.searchengineoptimization.jp/" />

上記の部分の記述については見たとおりですので問題ないと思います。上から順にそれぞれ次のような項目が並んでいます。

  • meta property=”og:site_name” content=”サイト名”
  • meta property=”og:title” content=”ページのタイトル”
  • meta property=”og:image” content=”イメージファイルの場所”
  • meta property=”og:description” content=”ページの説明文”
  • meta property=”og:url” content=”ページのURL”

例えば別のページ、例としてこのサイト内の「SEOの方法」ページであれば、記述されている内容は次の通りとなります。

<meta property="fb:admins" content="100001095493902" />
<meta property="fb:page_id" content="232710843432076" />
<meta property="fb:app_id" content="198090586918829" />
<meta property="og:site_name" content="SEO 検索エンジン最適化" />
<meta property="og:title" content="上位表示・SEOの方法" />
<meta property="og:image" content="https://www.searchengineoptimization.jp/image/seologo4ogp.jpg" />
<meta property="og:description" content="検索結果には数千から数百万以上もの関連サイトがリストアップされますが、実際にユーザーの目にとまるのは、上位に表示された10〜20件程度です。もしあなたのサイトの関連キーワードでの検索において、検索順位が低かったなら、多くのインターネットユーザーにとって、あなたのサイトにアクセスすることは困難なものになってしまいます。SEOによる上位表示で、あなたが発信する情報への到達性を高める方法について解説します。" />
<meta property="og:url" content="https://www.searchengineoptimization.jp/tutorial/" />
<meta property="og:type" content="article" />

ここで注意したいのは “og:type” の記述です。通常のウェブサイトまたはブログで使う場合には、トップページだけに content=”website” または content=”blog” を指定し、トップページ以外のすべてのページでは content=”article” を指定してください。そうしないと管理ページが大量に生成されて手に負えないことになります。というか僕はなって、とっても困りました。

なお、指定できるオブジェクトのタイプはOpen Graph protocol – Facebook 開発者の下の方に一覧があります(普通は “website” または “blog” と “article” しか使わないと思いますが念のため)。また、Like Button – Facebook 開発者の「Step. 2」の項には OGPタグのジェネレーターがあります。もしかしたらこれも有用かもしれません。

Debugger で正しく記述されているか確認する

ここまでHTMLやCMSのテンプレートなどの修正を終えたら、それを公開中のサーバに反映させ、Facebookが提供しているデバッガでコードが正常に機能しているかどうかテストします。

  • og:image のファイルをサーバにアップロード
  • 修正したHTMLをサーバに反映
  • Debugger – Facebook 開発者 にアクセスしてURLを入力、実行

ここで「エラー」や「注意」が表示される場合どこかがおかしいので、HTMLの編集に戻ります。僕は運がよかったのか意味もわからないまま問題なく進めましたが、ここでつまずく人も多いようなので、つまずいても挫けないでください。つまずいた人が多いぶん、ググると数多くの情報がヒットします。

管理ページにアクセスする

先述のデバッガでエラーがなくなったら、そのままそのエラーのないデバッガの出力結果ページを下にスクロールさせ、「いいね!」ボタンが表示されていることを確認します。これはOGPへの対応が完了したあなたのサイトのいいね!ボタンです。このいいね!ボタンを自分でクリックしてみてください。

するといいね!ボタンがグレーアウトし、ボタンの右側に「管理用ページ」と「インサイト」の2つのリンクが表示されると思います。この「管理用ページ」が、Facebookページと統合されたウェブサイトの管理インターフェイスです。そこへ進んで設定をし、いろいろ試してみてください。インターフェイスはFacebookページそのものなので、特に困ることはないと思います。

そして、管理ページに入ることに成功したら、はじめのほうで修正した OGP の meta要素に fb:page_id を追加します。管理ページのURLの最後のほうに並んでいる15桁くらいの数字が fb:page_id です。このIDによって、管理画面とあなたのサイトが紐付けられます。

<meta property="fb:page_id" content="232710843432076" />

僕が参考にしたページ

気になる点

海外のフォーラムでも話題になっていたことですが、Facebookウェブページ管理インターフェイスと通常のFacebookページは、どちらか一方しか使えないのではなく、同時に運用することもできます。しかし、両方をいいね!したユーザーには両方から同じようなアップデートが送られてくるため、かなりスパムっぽく、やるならどちらか一方にしたほうがよい、という意見が多くありました。僕も同意見です。

既存のFacebookページがない場合には問題ないのですが、すでに公開されいいね!が一定数ついたFacebookページがある場合、サイトとの統合には熟考が必要です。というのも、既存のFacebookページにいいね!してくれた人を、新しいインターフェイスに移動したりマージしたりする機能がないからです。

これはつまり、新しく作った管理インターフェイスだけに移行しようとした場合、既存のfacebookページにいいね!してくれた人を捨てるか、お手間を取っていただいて新しいインターフェイスにいいね!しなおすようにお願いする、といった、あまり好ましくない移行手順を踏むことになるわけです。

感想

僕個人としては、ウェブサイトとFacebookページの統合はとても気に入っています。自分のサイトは独立したサイトとして存在させながら、Facebookページの一部機能を取り込むことができ、かつFacebookページのメンテナンスは必要ないというのは素晴らしいです。サイトや運営方針によって向き不向きはありますが、向いている場合には検討する価値はあるのではないでしょうか。