読者です 読者をやめる 読者になる 読者になる

ふわ日記 ~ 将棋が好きな30代既婚男性のブログ

将棋や日々の生活など思い立ったことを適当に書いていきます。

FaceBookのシェア数取得が反映されない場合の対策

ブログ運営 ブログ運営-カスタマイズ・改善

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'); }
  );
}

これで、要素が取得できない場合は、「0」が表示されるようになります。(こんな感じ)
f:id:fuwa2730:20160911133706p:plain

以上、同じ問題で困った方の参考になれば幸いです!


(★´-ω-).。oOO[なんか私、プロっぽいw]

にほんブログ村 その他趣味ブログ 将棋へ

にほんブログ村