はてなブログの記事タイトルにはてなブックマークの「users」を表示させる

はてなブログは設定ではてなブックマークの被リンク数を表示させることができますよね。

こういうやつです。

しかしながら、昔からある「○○users」という表示を、タイトルに付けることも（やろうと思えば）できます。まあこのブログはめったにブクマされないのですが（笑）、遊びでやってみました。例えば
Rubyは末尾呼び出し最適化をサポートしている - Camera Obscura
このページに飛んでもらえれば、タイトルがそうなっていると思います。ちなみに、このように個別のリンクに「users」をつけるには、

[URL:title:bookmark]

というはてな記法で簡単に実現できます。

これの仕組みなのですが、この「users」というのはじつは画像で、

<img src="https://b.hatena.ne.jp/entry/image/(リンク先のURL)">

という HTML で表示されます。また、はてなブログの記事タイトルは

<a href="（URL）" class="entry-title-link">(実際のタイトル)</a>

という HTML になっています。なので、JavaScript の DOM 操作を使って a.entry-title-link の子要素として該当の img タグを append してやればいいわけです。

これを実行する JavaScript は

<script type="text/javascript">
    var nodes = document.querySelectorAll('a.entry-title-link');
    for (var j = 0; j < nodes.length; j++) {
        var img = document.createElement("img");
        var url = nodes[j].getAttribute('href');
        img.setAttribute("src", "https://b.hatena.ne.jp/entry/image/" + url);
        nodes[j].appendChild(img);
    }
</script>

という感じなので、これを [デザイン]→[カスタマイズ]→[フッタ] の HTML を貼り付ける欄にコピペして下さい。これで OK です。

※追記（2018/2/8）
上のだと「users」をクリックしてもはてなブックマークのページへ飛ばないので、こうするとうまくいきます。

<script type="text/javascript">
    var nodes = document.querySelectorAll('a.entry-title-link');
    for (var j = 0; j < nodes.length; j++) {
        var url = nodes[j].getAttribute('href');
        var a = document.createElement("a");
        a.setAttribute("href", 'http://b.hatena.ne.jp/entry/' + url);
        a.setAttribute("target", "_blank");
        a.innerHTML = '<img src="http://b.hatena.ne.jp/entry/image/' + url + '">';
        nodes[j].appendChild(a);
    }
</script>