はてなブログで手軽にはてブのusersを表示できるように頑張ってみた結果

※14.1.15追記しました（記事最下部）

おはこんばんちは。

こんな記事を見つけました。

上記の記事の通り、はてなブックマークのuser数を表示させるには、以下のようなタグを入れればいいのですが、

<img src="http://b.hatena.ne.jp/entry/image/[usersを表示させたいページのURL]">

いちいちタグを入力するのめんどくさいので、usersを表示させたいリンクを指定している<a>タグにclass="hatebu"をつけるだけでusersが出るように頑張ってみようと思った。

やり方

はてなブログの「デザイン」設定ページを開き「カスタマイズ」→「フッタ」にすすむ。
次のコードを入れる

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
  $(function(){
    var targetURL;
    var hatebuURL;
    var hatebuUserImgURL;
    $('a.hatebu').each(function(){
      targetURL = $(this).attr('href');
      hatebuURL = 'http://b.hatena.ne.jp/entry/' + targetURL;
      hatebuUserImgURL = 'http://b.hatena.ne.jp/entry/image/' + targetURL;
      $(this).after('<a href="' + hatebuURL +'"><img src="' + hatebuUserImgURL + '"></a>');
    });      
  });
</script>

使い方

はてぶusersを表示させたいページのリンクを指定している<a>にclass="hatebu"を追加します。

HTML

<a href="http://google.com" class="hatebu">Google</a>

実際の表示

Google

ちゃんとusersアイコンを押すと、当該はてブページに行けるようにもしてます。これで少し楽になるかも。

課題

フッタのhtml編集機能を使う関係で、なんか空っぽの白いフッタができてしまう。これを表示させないようにするなどの対策が必要。
スマホだと表示されない

上記今後の課題とします。

本当は、もっとクールでスマートなやり方がきっとあるんだと思うけど、文系ゆとりのワタクシにはこれが限界だった。

それから、ほかのデザインテンプレートを使っている場合は、もしかしたらうまく動作しないかもしれない。その辺の動作確認まではしてませんのであしからず。

ていうか、はてなのサービスなんだから、はてなブログ側でそういう機能つけてほしいですね。すでにあるのかな？見落としてたらスマソ。

【朗報】はてなの標準機能でusersが気軽に入れられる事が判明（14.1.15追記）

はてなブログで手軽にはてブのusersを表示させる方法 - norome blog

俺の苦労がまったく無駄だった事が判明したぜ！！＼(^o^)／