「公式ツイートボタンが重い」「iframe版だと幅が揃わない」などの理由から、自作のボタンを作成してみることにしました。 本ブログには適用済み、ついでにはてブも自作ボタンに変更しています。

※サンプルでは大中小3種類のclassを用意しています。
※ツイート数、はてブ数の取得はAPIを使用
※jQuery1.6.2を使用

追記：
「横幅を同じにして、縦に並べることはできないか」というお問い合わせを頂きました。
CSSと画像を調整すれば可能ですが、作成する余裕がありません…。

取り急ぎ、数字を取得して挿入するだけのサンプルを用意しました。

※分かりやすいように、一部、外部JSに変更しました。
※時間がとれたら横幅揃えたバージョンも作ってみます。

以下ソースです。

ソース

HTML

</p>
<ul class="social-link">
	<li id="twitter">
	<li id="hatebu">
</ul>
<p>

JavaScript

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

<div class="highlighter-rouge">
<pre class="highlight"><code>/* 引数：挿入ID、使用するclass名、ツイート数を取得したいURL、ツイート用テキスト */
tweetlink('twitter', 'tweet-medium', url, text);

/* 引数：挿入ID、使用するclass名、はてブ数を取得したいURL */
hatebulink('hatebu', 'hatebu-medium', url); });
</code></pre>
</div>

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

<div class="highlighter-rouge">
<pre class="highlight"><code>$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + _url + "&amp;callback=?", function(data) {
	$('&lt;a&gt;',{
		'href': 'http://twitter.com/share?url=' + _url + '&amp;text=' + _text,
		'title': 'ツイートする',
		'class': _class,
		'target': '_blank'
	})
	.append(
		$('&lt;span&gt;')
		.html(data.count)
	)
	.appendTo($('#' + _id));
}); };
</code></pre>
</div>

<p>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': 'はてブする',
		'class': _class,
		'target': '_blank'
	})
	.append(
		$('&lt;span&gt;')
		.html(data)
	)
	.appendTo($('#' + _id));
}); }; &lt;/script&gt;