FaceBookのシェア数取得が反映されない場合の対策 - ふわ日記～将棋が好きな30代既婚男性のブログ

f:id:fuwa2730:20160911134346p:plain
どうも、ふわです。

昨日、ブログのデザインを変更したのですが、タイトルの通りFaceBookのシェア数が取得できずに、ずっとクルクル回っていました。（こんな感じね）

f:id:fuwa2730:20160911125121p:plain

ちょっと調べたところ、何処にも対応策が書いていなかったような気がしたので、対策についてまとめようと思います。

ふざけた記事が多いですが、一応エンジニアだかんね！

発生理由と確認方法

FaceBookの「GraphAPI」でid以外の要素が取得できていないのが原因です。

問題が何故発生するかは不明なのですが、私のブログは発生しました。。

以下の方法で、問題の発生有無を確認できます。

graph.facebook.com/?id=確認したいURL

ちなみに私のブログだとこんな感じです。

http://graph.facebook.com/?id=http://www.fuwa-journal.com/entry/2016/09/11/070000

この結果が普通は、こうなります。(google.co.jpで試した結果)

{
   "og_object": {
      "id": "10150233968913589",
      "description": "\u4e16\u754c\u4e2d\u306e\u3042\u3089\u3086\u308b\u60c5\u5831\u3092\u691c\u7d22\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u3055\u307e\u3056\u307e\u306a\u691c\u7d22\u6a5f\u80fd\u3092\u6d3b\u7528\u3057\u3066\u3001\u304a\u63a2\u3057\u306e\u60c5\u5831\u3092\u898b\u3064\u3051\u3066\u304f\u3060\u3055\u3044\u3002",
      "title": "Google",
      "type": "website",
      "updated_time": "2016-09-10T18:14:54+0000"
   },
   "share": {
      "comment_count": 8,
      "share_count": 106628
   },
   "id": "https://www.google.co.jp/"
}

しかし、私のブログはこんな感じの結果になっていました。

http://graph.facebook.com/?id=http://www.fuwa-journal.com/entry/2016/09/11/070000

。。。。

情報が足りねぇ！

という事で、FaceBookのシェア数を取得するスクリプトを修正しました。

修正内容

いくつかのスクリプトを確認させて頂いたのですが、確認した全てのスクリプトがAPIの成功と失敗の分岐は入っていましたが、要素チェックは入っていませんでした。
まぁ本来は、API側で処理しとけよ！って内容だと思うので、開発者さんサイドは意識していなくて当然かと思います。

で、肝心の修正部分なのですが、はてなブログの「デザイン」「記事下」に以下の様なFaceBookのシェア数を取得するスクリプトがあると思います。
（作成される方によって、若干メソッド名や変数名は違うと思いますが、「https://graph.facebook.com/」と記載している部分です。）

//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
  entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){ $(selcter).text(result.share.share_count || 0); },
    function(){ $(selcter).text('0'); }
  );
}

これに、シェア数の要素が取得されているかどうかをチェックする処理を追記します。
（追加と書かれている行の下の行が、追記したコードです。）

//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
  entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){
        //追加 
        if(result.share != null){
            $(selcter).text(result.share.share_count || 0);
　　　　//追加
        }else{
             //追加
             $(selcter).text('0');
        //追加
        }
        },
    function(){ $(selcter).text('0'); }
  );
}