’Save This Page’ Button – Yahoo!ブックマークに対応

del.icio.usはてなブックマーク に引続き、Yahoo!ブックマーク に対応。下記を参考に、登録ボタンと登録数表示の両方をとりつけてみた。

登録数表示の JavaScript コードのスタイルが若干古め?な感じなので、ちょっと困ってしまった。登録数を表示するには、表示したい箇所に

<script type="text/javascript" src="http://num.bookmarks.yahoo.co.jp/ybmno.php"></script>

を入れればよいことになっている。ブラウザでロードすると、この script タグは、以下を返してくるが、

document.write('<a href="http://bookmarks.yahoo.co.jp/url?url=http%3A%2F%2Fblog.shimazu.org%2Farchives%2F117">1')

いきなり HTML に書き込んでいるのに加え、a タグの閉じタグがなく自分で付け足すほかなし、といった感じでプログラム制御がとてもしづらい感じになってしまっている。せめて登録数だけ返すとか、id 指定に基づき既存の HTML タグに値を入れ込むとか、JSONP とか、表示と分離された実装が望ましいように思う。

結局、以下のようなコードを記事テンプレートに書き、

<a href="http://bookmarks.yahoo.co.jp/action/post"
onclick="window.open(); return false;">
Add to Yahoo! Bookmarks</a>
<span id="yahoobookmarks">
<script type="text/javascript" src="http://num.bookmarks.yahoo.co.jp/ybmno.php">
</script>
</a></span>

※一部省略
※あらかじめ span タグは display:none; を指定

JavaScript 外部ファイルには(若干回りくどい)以下コードを追加した。

(function(){
var E = YAHOO.util.Event;
var D = YAHOO.util.Dom;
// snip
E.addListener(this, 'load', function(){
	var a = D.get('yahoobookmarks').childNodes[1];
	var i;
	if( a && (i=parseInt(a.innerHTML)) ) {
		a.innerHTML = i + (i==1?'user':'users');
		D.setStyle('yahoobookmarks','display','inline');
	}
});
})();

過去の関連記事:

追記(2007/06/08):
同僚 T 氏からいただいた指摘を受け、JavaScript コードを若干修正。

Leave a Reply