2014年7月17日

Facebook いいねボタン 不具合修正

7月6日のエントリー記事以降、Facebookの【いいねボタン】が動作していない事が判明。つまりカウントが0のままの状態で、押してもカウントされません。

Facebook 旧いいねボタン

ブログのシステムに変更などは一切行っておらず、それ以前のエントリー記事のFacebookの【いいねボタン】は正常に動作している状況なので調べる事に。

しかし、これが一筋縄では行かず( ̄。 ̄;)

その内容を下記に記載してみましたが、意味不明な部分が多いかと(__;)

一つ分かった事は、今自分のブログでFacebookの【いいねボタン】を設定は古いことが判明。

と言う事で、【いいねボタン】が正常に動作していないエントリー記事に対して、新しい【いいねボタン】を導入することにしました。


新しい【いいねボタン】を作成するには、Like Buttonのページで作成します。

Facebook Like Buttonのページ

このときに必要となってくるのが、Facebookのapp_id。

Facebookのapp_idとは、名前の通りFacebookのアプリのIDの事なのですが、【いいねボタン】を作成するために、Facebookのアプリと【いいねボタン】とを紐付けする必要が有るようです。

そのためFacebookのアプリを作成するとアプリのIDが発行されるので、そのアプリのIDをLike Buttonのページで【いいねボタン】を作成するときに登録します。

アプリ作成と言っても難しことはなく、単純にIDを取得するためだけのアプリ登録を行えばOKです。

このFacebookのapp_idを調べるうちに判明したことなのですが、自分のブログは、この「fb:app_id」を始め「fb:admins」などのOGPの設定を行っていませんでした(^^ゞ

OGPとは、ウェブページの内容を記すための仕様のことで、通常<head>~</head>のタグ内に設定します。

と言う事で、Facebookの【いいねボタン】を作る前に、このOGPを設定してみました。

OGPを設定するために、

htmlタグに「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"」を追加します。

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

な感じになります。


次に下記のタグを<head>~</head>の間に設置します。

<meta property="og:type" content="article" />
<meta property="og:description" content="サイトの簡単な説明。" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

ここまでFacebook関連のOGPは、まだ設定していません。

余談ですが、以上の設定を行うことでGoogle+にエントリー記事を投稿した時の画像が大きくなりました。これは収穫でした。
(但し、ブログの画像が400px以上で、og:typeは、articleの設定の必要あります。og:typeがwebsiteだとダメでした。)


同様にFacebook関連のOGP(下記2行)についても、<head>~</head>の間に設置します。

<meta property="fb:admins" content="××××" />
<meta property="fb:app_id" content="●●●" />

この××××の値ですが、これはFacebookのIDを登録する必要があります。

このIDを探すのが分からず苦労することに。


このFacebookのIDは、Facebookの自分のプロフィールページにあるプロフィール画像をクリックしてプロフィール画像を表示させます。

Facebook プロフィール画像 Facebook プロフィール画像

このときブラウザのURLをコピーしてテキストファイル等に貼り付けます。

https://www.facebook.com/photo.php?fbid=123456789012345&set=a.123456789012345.○○○○.123456789012345&type=1&theater

テキストファイルに貼り付けたアドレスの中の○○○○と記載した4桁の数字を

<meta property="fb:admins" content="○○○○" />

に設定します。


次にFacebookのapp_id取得します。

FacebookのDevelopersのAppsページに移動します。

Facebook Developers Appsページ

右上の「+Create New App」をクリックすると、新しいアプリを作成するウィンドウが表示されます。

ここで、Display Name(アプリケーション)とNamespace(ネームスペース)を入力してカテゴリを選択します。ここはエラーが出ないよう適当に入力すればOKかと。

すべて入力が完了すれば、アプリケーションを作成をクリックし、セキュリティチェックを送信して完了です。

ページがDashboardに変わって、ここでApp IDが15桁の数字で表示されるので、この15桁の数字を、

<meta property="fb:app_id" content="●●●" />

の●●●に貼り付けます。


以上で、Facebook関連のOGP(下記2行)が出来ました。

<meta property="fb:admins" content="○○○○" />
<meta property="fb:app_id" content="●●●" />

これを<head>~</head>の間に設置します。

以上で、OGPの設定は完了です。


次に、Like Buttonのページで、【いいねボタン】を作成します。

作成したら、【いいねボタン】を表示したい箇所に設置します。

Facebook Like Buttonのページ


以上により、新しい【いいねボタン】を設定したハズなんですが、何故か上手く行きません(ノД`)

新しく設定した【いいねボタン】は、Facebookで【いいねボタン】を押されたカウンタが、ブログの【いいねボタン】のカウンタに反映(加算)されません。

つまりブログの各エントリー記事で【いいねボタン】で押されたカウンタのみの値が表示されます。

色々と調べてみたのですが、とりあえず保留にしておきましたσ(^◇^;)


それでも全てが直ったわけではなく、エントリー記事によっては直ってません。カウントが0のままの状態で、押してもカウントされなかったり、404 Error - Not Foundが表示したりと。

404 Error - Not Found

その場合、Facebook-Debuggerを使います。

Facebook-Debuggerのページ

Facebook-Debuggerとは、OGPタグの正当性を診断するためのツールです。

Facebook-Debuggerのページを開いて、調べたいURLを入力して「Debug」をクリックすると情報が表示されます。

で、動作が上手くいかないエントリー記事のURLを入力したら、

Error parsing input URL, no data was scraped.

と言うメッセージが表示されました。

このエラーですが、アクセス権限の問題とか構文エラーとか有るようですが、そもそも他のエントリー記事が正常にいいねボタンが動いているのに、アクセス権限とか構文エラーとかはないでしょう。

調べてみたのですが、<meta property="og:~">関連のタグを外すとか、Twitterの短縮URLを貼り付けると、記事URLに「ハイフン(-)」が入ってるとシェアできないとか、色々と不確定要素がありすぎて分かりません。

結局調べてみても全く分からないので、投げておいたのですが、2,3日置いてまた、Facebook-Debuggerのページで、調べたいURLを入力したら、Error parsing input URL, no data was scraped.のメッセージが表示されることなく正常に情報が表示されました。

また、いいねボタンとシェアボタンが合わせて設定できるので、シェアボタンも出しておきました。

Facebook 旧いいねボタンとシェアボタン


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



トラックバックURL

このエントリーのトラックバックURL:
http://masaa.me/cgi-bin/mt-tb.cgi/3386

コメントする