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

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

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

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

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

以下ソースです。

ソース

HTML

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

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;

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

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

var tweetlink = function(_id, _class, _url, _text){
	_url = encodeURI(_url);
	_text = encodeURIComponent(_text);

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

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

Facebookのいいね！もAPIで取得できるそうですが、いいね！解除のやり方が分からず保留。
Googleの+1は公式APIはまだ提供されていないそうで、これまた保留。
Facebookは重い印象があるので、早めに対応したいですね。

今回、こちらの記事を参考にさせていただきました。

この場を借りて御礼申し上げます。