シェア数つきはてブボタンを自分で作成した時のメモ（2019年6月現在） #JavaScript

緒事情によりシェア数つきのはてブシェアボタンを自作しなければいけなくなって
探しても古い情報が出てきたりしてつまづいたのでメモ

html

<button class="hatebu">
    <a href="http://b.hatena.ne.jp/entry/【URL】" target="_blank">
        <p>ブックマーク<span class="number">100</span></p>
    </a>
</button>

CSSは省略

javascript

var hatebuNum = $('.hatebu .number');

function countHatebu(url, selector) {
    var currentUrl = location.href; //URL取得
    var shareUrl = 'https://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(currentUrl); //UTF-8 文字エンコーディング
    $.ajax({
        url: shareUrl,
        dataType:'jsonp',
    })
    .then(
        //成功時
        function(res) {
            $('.hatebu .number').text( res || 0 );
        },
        //失敗時　非表示にする
        function(){
            $('.hatebu .number').css("display","none");
        }
    )
}
countHatebu('url', 'hatebuNum');

はてぶシェア数取得

はてブのシェア数取得URLはb.hatena.ne.jpのドメインではなくapi.b.st-hatena.comからはじまるものを使用。
https://api.b.st-hatena.com/エンコードしたURL を叩くとそのURLのシェア数が表示されます。
2019年6月現在、b.hatena.ne.jpでもリダイレクトされるため表示はされるものの、将来的に使えなくなる可能性があるらしいのでapi.b.st-hatena.comを使用した方がよさそうです。

はてなブックマーク件数取得API

なお、API のエンドポイントのドメインは api.b.st-hatena.com となっていますが、現時点(2009年08月11日)では b.hatena.ne.jp ドメインでもアクセス可能ですが、将来的にはこの GET リクエストのAPIではb.hatena.ne.jp ドメインでは使えなくなる可能性がありますので、api.b.st-hatena.com をご利用ください。

JS

今回はjQueryのオプションを使用しています。

location.hrefを使用してURLを取得
そのURLをencodeURIComponentでUTF-8へエンコーディングしたものへ置き換える
上記の通り、ちゃんとエンコードしないと表示されません。

通信成功時には「ブックマーク」の後ろ（span.numberにあたる箇所）にシェア数が表示され、
通信失敗時にはdisplay:noneを使用してカウント数の項目を非表示にしています。

間違っている点、改善点があればやさしく教えてください。

参考にさせていただいた記事

はてなブックマーク件数取得API
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ（追憶）
古い書き方をして書いてしまったので参考になりました。