@kyanny's blog

My thoughts, my life. Views/opinions are my own.

livedoor Blog でテンプレートをカスタマイズせずに個別記事のはてなブックマーク数を表示する javascript

を、書いてみた。

gist:128740 · GitHub

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
if (location.href.match(/^http:\/\/.*?\/archives\/\d+\.html$/)) {
  google.load('jquery', '1');
  google.setOnLoadCallback(function(){
    $('<a>').attr({
      href : 'http://b.hatena.ne.jp/entry/' + location.href
    }).append(
      $('<img>').attr({
        src : 'http://d.hatena.ne.jp/images/b_entry.gif',
        width : 16,
        height : 12,
        style : 'border: none;',
        alt : 'このエントリーを含むはてなブックマーク',
        title : 'このエントリーを含むはてなブックマーク'
      }).get()
    ).append(
      $('<img>').attr({
        src : 'http://b.hatena.ne.jp/entry/image/' + location.href,
        style : 'border: none;',
        alt : 'はてなブックマーク - ' + document.title,
        title : 'はてなブックマーク -' + document.title
      }).get()
    ).appendTo('.article-title.entry-title');
  });
}
</script>

ブログパーツ/プラグインの新規追加から「フリーエリア」を選び、上のコードをコピペして再構築する。テンプレートをカスタマイズしなくていいので、気軽にデザインを変更できる。動作例 => kyanny のブログ : nowa 最後の日

javascript のコードはほとんど書いたことがないので、おかしなことをしているかもしれない。あと、全てのテンプレートが記事タイトルの要素に article-title entry-title というクラスをふっているかどうかも未確認なので動かないテンプレートもあるかもしれない。個別記事以外にも URL のパターンはいくつかあるので、それぞれの場合においてちゃんと動くようにしたほうが良いかもしれない(トップページなど、個別記事の見だしが複数並ぶレイアウトのページでは、各記事ごとのブックマーク数を見出しの横に表示するようにするとか)。同様の API は livedoor クリップと Buzzurl にもあるので、それらも含めて対応したほうがいいかもしれない。ていうかそもそも車輪の再発明なのかもしれない。