simplicityでシェアカウント数がぐるぐるした後びっくりマークになる

httpsサイトで発生する現象

頑張らない筋トレ管理人のさっちんです。

このブログは、simplicityというフリーのWordpressテーマを使用しています。

ある日、はてなブックマーク(はてブ)のシェアボタンのカウント数がぐるぐるしてました。
そして、その後はタイムアウトしたのかびっくりマーク『！』になります。
なんとなく、はてなブックマーク(はてブ)のカウント数の取得が終わらないのかなー、という感じ。

『あれっ？』

と思ってページを更新しても、結局同じくびっくりマークに。

なぜなるか分からなくて調べると、https(SSL)のサイトでコメント数が持ってこられずに、応答がないからタイムアウトになるみたい。

今回は、この現象への対策を記事にしていこうと思います。

それでは、そろそろ行きましょう。

見たことも無いエラー

こんな状態になったので、chormeのF12でデベロッパーツールを確認してみると、

『net::ERR_INSECURE_RESPONSE 』

というエラーになっていて、赤くハッチングされてます。

ちなみにINSECUREというのは『安全じゃない』という意味で、簡単にいうと『安全じゃない応答が返ってきてエラーになった』ってところでしょうか。

しかも、見たところ、

『https://api.b.st-hatena.com/entry.count?callback=』

でエラーになっているのでURL：『api.b.st-hatena.com』を呼び出しているものの、読み出せずにタイムアウトになっているんですね。

つまり『api.b.st-hatena.com』から安全じゃない応答が返ってきてるってこと。

ふむふむ。現象は分かった。

javascript.jsを修正するだけ

じゃあ、どう対処するのか。

さて調べてみると、simplicityホームページの不具合報告のところでも同様な問題があります。

どうやらjavascript.jsに記載されている、はてなブックマークのapiを呼び出すurlを修正する必要があるみたい。

つまり

以下は修正前のコードですが、

//はてなブックマークではてブ数を取得
function fetch_hatebu_count(url, selector) {
  jQuery.ajax({
    url:'//api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    timeout: 10000, //10sec
    data:{
      url:url
    }
  }).done(function(res){
    jQuery( selector ).text( res || 0 );
  }).fail(function(){
    jQuery( selector ).html('<span class="fa fa-exclamation"></span>');
  });
}

ここに書いてあるurl