ミニマム コラム

執着せず。最低限のモノで。日常の共感。

はてブボタンのぐるぐるを解消!https化(SSL化)後の不具合解決方法!

はてなブログ

僕はこの記事に記載したようにソーシャルボタンのカスタマイズをしています。はてブとかTwitterのボタンですね。

 

www.a-s-blog.com

 

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

はてなブックマーク

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

 

 

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」に置き換えないといけないということがわかりました。

 

 

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

 

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