はてなブログの記事タイトルにはてなブックマークの「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 です。