Twitterへの投稿ボタンを用意する
WebサイトにTwitterへの投稿ボタンを用意したい場合があるかもしれません。これはJavaScriptを使うことで実現できます。Twitterがウィジェットを用意していますが、Twitterのサーバーが重いときなどにGoogle Chromeではウィジェットを配置した場所よりもあとのページ表示に異常に時間がかかることがあるので、JavaScriptで用意しておくという手段も検討しておくとよいかもしれません。まあ、ページ表示後に動的に追加するという手もありますんで、自分は動的に追加していますけれど。
設置方法
Twitterへの投稿ボタンをWebページに設置するには、以下のようにA要素のhref属性とonclick属性を設定します。これでページのタイトルとアドレスをユーザーのTwitterホームの投稿欄へ送ることが可能です。ボタンを設置しているページで文章を範囲選択していると、その部分も投稿欄に入ります。
<a href="#" onclick="d=document,e=encodeURIComponent,t=(d.selection)?d.selection.createRange().text:(window.getSelection)?window.getSelection():(d.getSelection)?d.getSelection():'',f='http://twitter.com/home/?status='+e(t+'「'+d.title+'」 '+location.href+' ');if(!window.open(f,'tweet'))location.href=f;void(0);return false" title="twitterでつぶやく(テキストを選択している場合はその部分も自動的につぶやきに含まれます)"><img src="http://twitter-badges.s3.amazonaws.com/twitter-b.png" alt="twitter"></a>例では白いボタンを使っていますが、ボタン画像は公式サイトのTwitterボタンの中から好みのものを選んで置き換えるとよいでしょう。また、title属性はマウスカーソルが重なった場合のHELPなので書き換えは自由です。例えば小さいボタンにしてテキストで投稿できることをわかりやすくしておくこともできます。
Twitterでつぶやく<a href="#" onclick="d=document,e=encodeURIComponent,t=(d.selection)?d.selection.createRange().text:(window.getSelection)?window.getSelection():(d.getSelection)?d.getSelection():'',f='http://twitter.com/home/?status='+e(t+'「'+d.title+'」 '+location.href+' ');if(!window.open(f,'tweet'))location.href=f;void(0);return false" title="テキストを選択している場合はその部分もつぶやきに含めることが可能です"><img src="http://twitter-badges.s3.amazonaws.com/t_small-b.png" alt="">Twitterでつぶやく</a>複数のページで使用する際は、投稿ボタン部分だけ別ファイルにしておいてSSIでincludeするようにしておくと、あとでボタン画像を変更したり、説明のテキストを変更する際に楽です。