Facebookのいいねボタンのカウントが表示されないときの対処法

先日このブログで紹介した座右の銘.comにソーシャルボタンを追加したのですが、ページ別の「いいねボタン」のカウント数が表示されずに困っていました。
いいねボタンをクリックするとそのときはカウントが１になりますが、ページをリロードすると０に戻る。
Facebookのウォールにはそのページのリンクが表示されており、http://graph.facebook.com/のあとに該当ページのURLをつなげてアクセスすると、sharesはちゃんと１になっている。でもカウント数が表示されないという状況。。。

layoutをstandardにするとエラーが表示された

いろいろ試していると、あることに気づきます。
いいねボタンのlayoutをbutton_countにしていた時には分からなかったのですが、standardに変更すると「いいね」した後にボタンの右側に赤字でエラーと表示されます。

button_countの時には表示されないが・・・

いいねボタンのlayoutがbutton_countの時には表示されないが・・・

layoutをstandardにすると赤字でエラーというリンクが表示される

エラーをクリックすると、次のページがポップアップします。

The page failed to provide a valid list of administrators. It needs to specify the administrators using either a "fb:app_id" meta tag, or using a "fb:admins" meta tag to specify a comma-delimited list of Facebook users.

このことに気づかずずいぶん遠回りしてしまいましたが、どうやらメタタグにfb:app_idかfb:adminsを追加しろってことのようです。
それって何よ？ってことで検索すると、まったく同じ問題を解決された方のページがヒット（笑）

WEBサイトを作り始めたひとの覚書: Facebookのいいね！ボタンを設置しても赤字のエラーが出てしまう＆押してもカウントされない(ボタンが元に戻る)時の解決方法

WEBサイトを作り始めたひとの覚書さんはfb:adminsを追加する方法をとっていたので、同じようにやってみますが状況は変わらず。
上記の記事にも書かれている通り、反映に何日かかかってしまうのかもしれません。
そこで、fb:app_idの方法を試してみることにしました。

メタタグにfb:app_idを追加する

app_idの取得方法はWordPressとFacebook連動にチャレンジしたときWPBookの設定で経験していたのですぐにできました。
具体的な手順は次の通り。

Facebookのapp_id取得方法

Create an App – Facebook開発者でサイト名とサイトＵＲＬ設定してアプリを作成します。

アプリを作成

サイト名とサイトＵＲＬを設定してアプリを作成します

次に新しいアプリケーションを作成します。

新しいアプリケーションを作成します

＋新しいアプリケーションを作成を押下

アプリケーションの表示名とネームスペースを設定します。

アプリケーションの表示名とネームスペースを設定

表示名は日本語でもＯＫ。ネームスペースは多分他のアプリケーションと名前がかぶらないようにするためなのかな？分かりませんが半角英数字で。記号など使える文字に制限があります。僕はドメインからtheyouknowmayと設定しました。

はい、これでapp_idが取得できましたね？
アプリケーションの編集画面に入ると画面の最上部にApp ID:とApp Secret:というものが表示されていると思います。今回使うのはApp IDのほうです。
あとは、アプリケーションにアイコンを設定したり、カテゴリーやアプリをFacebookに結合する方法を選択したりできますが今回の設定には必要ないのでスルーしてもいいです。
アイコンくらいは設定するとカッコいいかな。

アプリケーションにアイコンを追加するとかっこよくなる図

いいねボタンを追加するページにfb:app_idを追加する

いいねボタンを追加するページにfb:app_idを追加しましょう。

<head>
省略
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website" />
<meta property="og:description" content="説明文" />
<meta property="og:image" content="画像のパス" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
?↑はOGPの設定?
<meta property="fb:app_id" content="（取得したapp_id）" />
省略
</head>

OGPの説明についてはこちらが詳しいです⇒フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

さあ、メタタグにfb:app_idを追加したらページを表示していいねボタンを押してみましょう！
ページをリロードしてもちゃんといいねされていますか？layoutがbutton_countならカウントが表示されていれば成功です。standardならボタンの右側に管理用ページとインサイトのリンクが表示されているはずですよ。