シェアする

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

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


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

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.

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開発者でサイト名とサイトURL設定してアプリを作成します。

アプリを作成

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

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

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

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

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

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

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

表示名は日本語でもOK。ネームスペースは多分他のアプリケーションと名前がかぶらないようにするためなのかな?分かりませんが半角英数字で。記号など使える文字に制限があります。僕はドメインから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ならボタンの右側に管理用ページとインサイトのリンクが表示されているはずですよ。

いいねボタンがちゃんと機能している図

いいねボタンがちゃんと機能している図

fb:app_idを追加する方法は手間がかかりますが、すぐに反映されるというメリットもあります。*[1]
急いでないよって方はfb:admins、すぐに反映させたいって方はfb:app_idを利用するのがいいでしょう。

この記事いいね!と思っていただけた方は
↓クリックをお願いします(笑)

  1. もしかすると管理用ページとかインサイトのリンクもその恩恵なのかな?fb:adminsを試していないので分かりませんが、そんな気もしますね []

シェアする

  • このエントリーをはてなブックマークに追加

フォローする