先日、はてブボタン・ツイートボタンを自作したのですが、公式のはてブボタンとは動作が異なり、はてブパネル（はてブボタンをクリックすると出てくるアレ）が表示されません。 色々調べてみたところ、はてブパネルを表示することができたので、その方法を書いておきます。

この記事は先日公開した「ツイートボタン・はてブボタン | APIを利用して自作してみました。」の続きです。

ソース

HTML

<div id="hatebu"></div>

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery', '1.6.2');</script>
<script src="js/hatebu-link.js"></script>
<script>
$(function(){
	var url = document.location.protocol + '//' + document.location.host + document.location.pathname;
	var text = document.title;

	//hatebulink('挿入ID', '自作ボタンのclass', 'はてブさせたいURL');
	hatebulink('hatebu', 'hatebu-small', url);
});
</script>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

JavaScript (hatebu-link.js)

var hatebulink = function(_id, _class, _url){
	_url = encodeURI(_url);

	$.getJSON('http://api.b.st-hatena.com/entry.count?url=' + _url + "&callback=?", function(data) {
		$('<a>',{
			'href': 'http://b.hatena.ne.jp/entry/' + _url
			,'title': 'はてブする'
			,'target': '_blank'
			,'class': 'hatena-bookmark-button ' + _class
			,'data-hatena-bookmark-layout': 'simple'
		})
		.append(
			$('<span>')
			.html(data)
		)
		.appendTo($('#' + _id));
	});
};

解説

前回作成したものに修正を加えました。

HTML側の修正内容

公式で提供されているJavaScript「bookmark_button.js」を読み込ませます。

JavaScript側の修正内容

  1. はてブの処理をさせたい要素のclassに「hatena-bookmark-button」を追加します。
  2. HTML側で追加したJavaScript「bookmark_button.js」が「**はてブに該当する要素**」を公式のはてブボタンに置き換えるようになります。
  3. 置き換えられては困るので、要素に「data-hatena-bookmark-layout」という属性を追加し、値を「simple」にします。

これで要素は置き換えず、直接イベントを設定してくれるようになります。

今回これが分かるまでに色々と時間がかかってしまいました。
主にFirebugのバージョンが古かったというのが原因なのですが…、それはまたの機会に。

ではでは。