先日本ブログ各記事のタイトルに、はてなブックマークと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(' <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(' <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は今回初めて使ったのですがなかなか使いやすいライブラリだと思いました。上のコードももしかしたらもっと簡単に書けるかもしれません。ご存知の方がいらっしゃいましたらコメント欄などでご指摘いただけると幸いです。
コメント / トラックバックはありません
コメントする