HTML サイト運営

Facebookのソーシャルボタンのくるくるが止まらない場合の解決方法(2016年9月時点)

[PR]記事内のアフィリエイトリンクから収入を得る場合があります

f:id:photoblg:20160903114225p:plain

更新:2016/11/5

7月にGraph APIのv2.7がリリースになりいいね数が取得できない問題があったのは記憶に新しいです。

わたしは、Yukihy(id:ftmaccho)さんのソーシャルボタンカスタマイズを利用させていただいてるので先日修正も行いました。

当ブログのシェアボタンを使っていただいている方のFacebookボタンで不具合が生じています2! - Yukihy Life

ただ、昨日気づいたんですがくるくるが止まっていない気がします。

くるくるが止まらないのは全部の記事じゃない

まず昨日書いた記事を開くと以下のエラーが出ていました。(※この記事を書き始めたタイミングです)

www.weblog-life.net

Uncaught TypeError: Cannot read property 'share_count' of undefined

share_countが未定義というエラーなんですが、未定義ってことは間違えてる?という気になりますよね。

そうなると同じソーシャルボタンを使っている他のブログはどうだろう?ということになっていろいろ巡回してみたんですが、くるくるしたままのブログときちんと表示できるブログがあるので、当然ソースを見てみると・・・。

特にわたしと違いがないんですよね(苦笑)

というわけで他の記事を開いてチェックしてみるとくるくるが、すぐ止まるんですよ(困)

www.weblog-life.net

さて困りました。

Graph APIの返却データ

問題ないページはやはりshare_countがきちんと返却されています。

f:id:photoblg:20160903111841p:plain

おや?この記事を書いている間にこっちも返却されるようになりました。

f:id:photoblg:20160903112116p:plain

share_countが無い場合はこのような感じです。

f:id:photoblg:20160903112209p:plain

何故こうなるのか?

恐らくFacebookのGraph APIの返却用データに、ページのいいねやシェアの情報が反映されていないためこのような現象になると思われます。

Facebookのキャッシュを削除をしたいときのためにSharing Debugger(※Open Graph Debuggerから名前が変わったようです)というツールがあります。

https://developers.facebook.com/tools/debug/

このツールを利用するとFacebookのクローラーが再度クロールしてくれるので、先ほどエラーが出たページで試してみると・・・

f:id:photoblg:20160903112838p:plain

昨日の7:00にはページ情報を取得しているようで、like(いいね)もあるようです。

念のため「Scrape Again」を押してみた結果・・・

予想通りちゃんと表示されるようになりました。

f:id:photoblg:20160903113244p:plain

f:id:photoblg:20160903113159p:plain

まとめ

先日の修正が済んでいるのにFacebookのくるくる止まらない場合は、Facebookのデータの反映が遅れているだけ。

早めに反映したい場合は面倒ですがSharing Debuggerを使えばクルクルは止まりますよ。恐らくこの記事もしばらくはクルクルしてるはず・・・。

追記(2016/11/5)

まだFacebook側にデータがない場合は「0」を表示するように分岐処理を追加しました。

if (res.share !== undefined) {
  jQuery( selcter ).text(res.share.share_count);
  } else {
  jQuery( selcter ).text('0');
  }

-HTML, サイト運営