[JavaScript] はてなブックマーク数をリンクの横に表示する簡単なJavaScriptスニペット

こんにちは、@yoheiMuneです。
書こうと思っていたアドベントカレンダー（CSS、フロントエンド、分析、jQuery、YEOMAN）も無事に全部終わったので、今日からはまったりとブログを書きたいと思います。
今日はライトな感じで、はてなブックマーク数をリンクの横に表示する簡単なJavaScriptコードを紹介します。

Special Thanks to https://flic.kr/p/9hHPww

はてぶ数をリンクに表示する

幾つかのサイトではリンクの横に、はてなブックマーク数が出ていてなんだかいいなーと思いました。はてぶ数のあるリンクは自分も読んでみようかなーと思ってしまいます（ミーハーですかね）。

なのでさっそくこのサイトでも、はてぶ数をリンクの横に表示する機能を作ってみました。今日はその実装方法を紹介したいと思います。以下のようにリンクの横に、はてぶ数を表示します。

- [MongoDB] フロントエンドエンジニアにオススメなデータベース、MongoDBに入門

それではこの実装方法を紹介します。

はてぶ数をリンクに表示する実装方法

はてぶ数を表示するのは簡単で、以下の画像を読み込むだけで表示できます。

<img src="http://b.hatena.ne.jp/entry/image/[サイトのURL]">

この画像をJavaScriptで生成して<a>タグの子要素に追加すれば、はてぶ数をリンクに追加表示することができます。

まずは、はてぶ数を表示したいリンクタグを用意します。はてぶ数表示を行う対象の目印として、class属性にjs-hatebu-countを付与します。

<a class="js-hatebu-count" href="http://www.yoheim.net/blog.php?q=20141202">
  [MongoDB] フロントエンドエンジニアにオススメなデータベース、MongoDBに入門
</a>

そしてサイトのページ下部で、以下のJavaScriptを実行します。

// はてぶ数表示するリンクを全て取得する
var links = document.querySelectorAll('.js-hatebu-count');
// リンクを1件ずつ処理する
[].forEach.call(links, function (link) {
  // はてぶ数を表示する画像を生成する
  var image = new Image();
  image.className = 'img-hatebu-count';
  image.src = 'http://b.hatena.ne.jp/entry/image/' + link.href;
  // リンクの子要素に画像を追加する
  link.appendChild(this);
});

上記のJavaScriptを実行すると、以下のようなDOM構成を作ることができます。

<a class="js-hatebu-count" href="http://www.yoheim.net/blog.php?q=20141202">
  [MongoDB] フロントエンドエンジニアにオススメなデータベース、MongoDBに入門
  <img class="img-hatebu-count" src="http://b.hatena.ne.jp/entry/image/http://www.yoheim.net/blog.php?q=20141202">
</a>

そして少しだけCSSで装飾します。

.img-hatebu-count {
    display: inline-block;
    margin: 0 2px;
}

何も装飾しないと文字と画像が隣接しすぎるので、2pxくらい適度に余白を空けて、文字も画像も認識しやすくします。

たったこれだけで、はてなブックマーク数をリンクの横に表示することができます。お手軽だけど訴求力のあるリンクの完成です。なかなか良いですよー。

最後に

今日はライトな感じで、リンクにはてぶ数を表示する方法を紹介しました。はてぶ数を全リンクに付けるとなかなかうざいですが、アピールしたいリンクにだけ付ければメリハリが出来て良いです。気になった方はぜひ試してみてください！

今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！