jQueryを使ってソーシャルブックマークのリンクを追加

先日本ブログ各記事のタイトルに、はてなブックマークlivedoorクリップの数を表示するリンクをつけました。


ソーシャルブックマークのリンク

このリンクは、jQueryというJavascriptのライブラリを利用して非常に簡単に実現をしています。本日はこのメモをポストします。

jQueryでは、通常、onLoadイベントにフックするような処理を以下のように記述します。

jQuery(document).ready(function(){
  // ここに DOMを操作する処理を書く
});

このブログでは、WordPressというブログエンジンを利用しています。ブログのタイトルリンクには、以下のようにrel=bookmarkがつくようになっていました。

 <a href="..." rel="bookmark">..

これを、XPathで拾ってくるには、jQueryで単に以下のようにするだけです。

jQuery("a[@rel='bookmark']")

これで返ってきたa要素のオブジェクトに対してそれぞれはてなブックマークlivedoorクリップのタグを埋め込んでいきます。結果的に以下のようなコードになりました。

jQuery(document).ready(function(){
    jQuery("a[@rel='bookmark']").each(function(){
	// livedoor clip
	jQuery(this).after('&nbsp;<a href="http://clip.livedoor.com/redirect?link='+jQuery(this).attr("href")+'" class="ldclip-redirect" title="この記事をクリップ!"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16" alt="この記事をクリップ!" style="border: none;vertical-align: middle;" /></a><img src="http://image.clip.livedoor.com/counter/'+jQuery(this).attr("href")+'" />');
 
	// hatena bookmark
	jQuery(this).after('&nbsp;<a target="_blank" href="http://b.hatena.ne.jp/entry/'+jQuery(this).attr("href")+'"><img src="/images/hatena-append.gif" /></a><a target="_blank" href="http://b.hatena.ne.jp/entry/'+jQuery(this).attr("href")+'"><img src="http://b.hatena.ne.jp/entry/image/'+ jQuery(this).attr("href") +'" /></a>');
    });
});

jQueryは今回初めて使ったのですがなかなか使いやすいライブラリだと思いました。上のコードももしかしたらもっと簡単に書けるかもしれません。ご存知の方がいらっしゃいましたらコメント欄などでご指摘いただけると幸いです。

コメント / トラックバックはありません

コメントする