2014/12/22更新

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

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
書こうと思っていたアドベントカレンダー(CSSフロントエンド分析jQueryYEOMAN)も無事に全部終わったので、今日からはまったりとブログを書きたいと思います。
今日はライトな感じで、はてなブックマーク数をリンクの横に表示する簡単な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くらい適度に余白を空けて、文字も画像も認識しやすくします。

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



最後に

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

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

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。