先日 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"> //<![CDATA[ $(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')[0].appendChild(E); return false; }); }); //]]> </script>