はてブボタンのぐるぐるを解消！https化（SSL化）後の不具合解決方法！

このブログではソーシャルボタンのカスタマイズをしています。はてブとかTwitterのボタンですね。

そのはてブのボタンがグルグルと回っていることに気がつきました。データを読み込んでいないようです。

はて？なにか余計なことしたかしら？

SSL対応（HTTPS化）をしたんだった！

はてなブログは2018年1月現在でHTTPS化している途中の段階ですね。当初の予定だと独自ドメインのHTTPS化は2018年初頭に行われるはずでしたが、現時点では未対応のようです。

staff.hatenablog.com

という僕のブログも実はなにも対応しておらず、HTTPとHTTPSが混在している状態でした。んで、重い腰をあげて事前に対応できることは実施しておきました。

• http→httpsへの置換

実施したのはこれだけです。 コチラを参考にさせてもらいました。

www.notitle-weblog.com

はてなブックマークのカスタマイズ確認

このhttps化に問題があったのではないか？そう推測してみまして、はてブに関するhttps化を確認してみることにします。

<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
  entryUrl = 'https://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp',
  }).then(
    function(result){ $(selcter).text(result || 0); },
    function(){ $(selcter).text('0'); }
  );
}
$(function(){
  getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
});
</script>
<!--はてなブックマーク-->
<a href="https://api.b.st-hatena.com/entry/{URLEncodedPermalink}" 
class="hatena-bookmark-button" target="_blank" 
data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" 
title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> 
<span class="hatena-bookmark-count share-text">
<i class="fa fa-spinner fa-spin"></i></span>
<br> <span class="share-text">Bookmark!</span></a>

赤字で示した部分がそうですね。この設定変更でシェア数が取得できなくなってしまったのでしょう。

【解決法】問題があるURLを変更する

調べてみると、「api.b.st-hatena.com」はやはりhttpsには対応していないようで、「b.hatena.ne.jp」に置き換えないといけないということがわかりました。

• https://api.b.st-hatena.com　→　https://b.hatena.ne.jp

この置換でOKです。解決方法は簡単でしたね。

ご参考になればさいわいです。