はてなブログHTTPS化のブックマーク数を取得できない問題を解決

2018-06-162019-02-10ブログ運営・お知らせ,趣味の事

前回、ブログをHTTPS化した記事の中で「はてなブックマークの数が取得できない」ことを記載した。

しかしその後、「スマホ版のページで下部に設置してる固定メニューナビが動作しなくなる」という問題を発見した。

はてなブログHTTPS化：コンソール、アナリティクス、アフィ他の変更作業について – ゲーマー逃避行ブログ

そして今現在、そのどちらの問題も解決できた。

スマートフォンでの閲覧時、下部の固定メニューナビが動作しなくなる問題

自分の場合、下記のイメージのような形にしているが、「はてブ順」以降、メニューを展開できない事態に陥った。

結局はこれも記事タイトルの「HTTPS環境の中で、はてなブックマークの数を取得できない」問題が原因だった。

問題を解決する：HTTPS環境で、はてなブックマーク数の取得する

調べてみたところ、下記の記事が役に立った。

はてなブックマークAPIをSSLなサイトに使う | ぴんくいろにっき

なるほど、すでにだいぶ昔から、SSLなサイトでも使えるようになっていたみたいだ。

僕のシェアボタンは下記サイトのものを使っているので、これをちょいと変更することにした。

コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ – いつ俺〜いつから俺ができないと錯覚していた？〜

シェア数を数えるJQueryコードの部分・

//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
entryUrl = 'http://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'); }
);
}

「http://api.b.st-hatena.com」の部分を「https://b.hatena.ne.jp」に変更。

そうしたらご覧の通り、はてなブックマーク数が表示されるようになった。（PC版）

※ スマホ版のページは何か読み込んでるようなぐるぐる表記を見せたくないのと速度をなるべく重視したかった理由で、シンプルなシェアボタンにしています。

スマホ版の固定メニューナビの動作問題の解決

つまり、上記のはてなブックマークのシェア数を読み込むスクリプトを記載したら、解決した。

<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
entryUrl = 'https://b.hatena.ne.jp/entry.count?url=' + encodeURIComponent(entryUrl)
$.ajax({
url:entryUrl,
dataType:'jsonp',
}).then(
function(result){ $(selcter).text(result || 0); },
function(){ $(selcter).text('0'); }
);
}
</script>

最後に

これで、今のところの問題は「Google サーチコンソールが旧アドレス時のようにバリバリ読み込んでくれない」だけになった。

Googleさんがhttps化しろと言ったんだから、以前のようにバリバリ読み込んで欲しい。