任意のリンクに公式 Tweet 機能を追加する

先日 Twitter の公式 Tweet ボタンが提供されました。
ただし、この機能では Twitter が提供するボタン画像しか使えません。
Tweet ボタンとして他の画像を使いたい場合は、「Build your own」の所で説明されているように http://twitter.com/share へのリンクを設置してねとしか説明されていません。
しかし、これでは公式 Tweet ボタンのようにサブウィンドウを開いて Tweet することができませんね。
任意のリンクに公式 Tweet ボタンと同様の機能を持たせるにはどうすれば良いのでしょうか?

ここでは jQuery で、任意のリンクに公式 Tweet ボタンと同様の機能を持たせる方法を解説します。

って、言っても面倒なことでは無くて jQuery で、Tweet ボタンと同様の機能を持たせたいリンクの click イベントにツイート用のブックマークレットの JavaScript を登録してやるだけです。
例えば <a href="http://twitter.com/share" class="tweet-this" />ついーと</a> と言うリンクに公式 Tweet 機能と同様の機能を持たせてあげたければ、以下の様な JavaScript をテキトーに追加すればおっけです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//<!&#91;CDATA&#91;
$(function(){
	$('a.tweet-this').unbind('click').click(function(){
		window.twttr = window.twttr||{};
		var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;
		if(C>A)
			G=Math.round((C/2)-(A/2));
		window.twttr.shareWin = window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');
		E = F.createElement('script');
		E.src = 'https://platform.twitter.com/bookmarklets/share.js?v=1';
		F.getElementsByTagName('head')&#91;0&#93;.appendChild(E);
		return false;
	});
});
//&#93;&#93;>
</script>

こんな感じになります。
つぶやく

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください