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

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

ソース

HTML

</p>
<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>

<p>

JavaScript (hatebu-link.js)

var hatebulink = function(_id, _class, _url){
	_url = encodeURI(_url);</p>

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