gerenuk.crazyphoto.org/

最近では、記事の ReTweet ボタン（タイトルやURLなどの情報を Twitter に簡単に送れるような機能）を実装するサイトが増えてきました。
TweetMeme や TwitThis のような ReTweet ボタンを提供してくれるウェブサービスもありますが、デザインが固定されることが嫌だったり、外部の JavaScript を読み込めなかったりと、出来ることなら自力で ReTweet ボタンを作りたいと思った人も多いのではないでしょうか？
この記事では、このサイトの各記事の上部に設置してある「Twitter に送る」ボタンの解説と、今の仕様に落ち着くまでにどんな試行錯誤を繰り返したのかをご紹介します。

URL だけを送る方法

ReTweet ボタンは、かなり簡単な作りになっています。

http://twitter.com/home?status=（サイトの URL）

のように、実は status というパラメーターにサイトの URL などを入れたリンクです（現在では Twitter の仕様変更により、「home」を削除しても問題ありません）
訪問者が Twitter にログインした状態でこの ReTweet ボタン（という名のただのリンク）を押すと Twitter のホーム画面が開くので、後はテキストボックスの中身を確認して「投稿する」ボタンを押すという流れになっています（つまりサイトの ReTweet ボタンを押しただけでは反映されません）

サイトの URL の部分は、各ブログツールが提供するタグによって異なりますが、個別記事のアドレスを送りたい場合、例えば WordPress ならば、

<a href="http://twitter.com/home?status=<?php the_permalink(); ?>">Twitter に送る</a>

Movable Type ならば、

<a href="http://twitter.com/home?status=<$MTEntryPermalink$>">Twitter に送る</a>

となります。

記事のタイトルを一緒に送る方法

基本的には、status に記事のタイトルを付け加えるだけです。

<a href="http://twitter.com/home?status=<?php the_title(); ?> <?php the_permalink(); ?>">Twitter に送る</a>

しかし、これだと IE で Twitter のホームに送った場合に文字化けを起こしてしまう場合がありました。
文字コードをチェックしたり、urlencode を使ってもうまくいきません。
もし解決方法を知っている方がいらっしゃいましたら教えていただけると幸いです。

なりふり構わず、記事のタイトルを一緒に送る方法

仕方がないので HTML だけで解決するのをあきらめ、JavaScript を併用することにしました。
念のため encodeURIComponent も使っています。

<a onclick="window.open('http://twitter.com/home?status='+encodeURIComponent(document.title+' '+location.href));return false;" href="#">Twitter に送る</a>

これで IE でも文字化けすることなく送ることが出来るようになりました。
ただし、document.title や location.href を使っていることからおわかりの通り、個別記事ページでしか使えません。

納得がいかなかったので、結局 jQuery を使って（少しだけ）スマートにした方法

さすがにこのままでは綺麗なコードとは言いがたかったので、次に jQuery を使って以下のようにしました。

テンプレートには URL だけを入れ、クラスを指定してやります。

<a href="http://twitter.com/home?status=<?php the_permalink(); ?>" class="share_twitter">Twitter に送る</a>

さらに、jQuery のユーザースクリプトとして、

$(".share_twitter").click(function(){
    window.open('http://twitter.com/home?status='+encodeURIComponent(document.title+' '+location.href));
    return false;
});

のようにセレクターを使って指定してやります。
ただ、これだと title タグの内容が全部入ってしまうため、何度か色々な仕様を試してみた結果、

$(".share_twitter").click(function(){
    window.open('http://twitter.com/home?status=RT @gerenukrumoi '+encodeURIComponent($("#entry h3 a").text()+' '+location.href));
    return false;
});

という感じに落ち着いています。
ReTweet を示す「RT」や、自分のアカウントへのリプライを加えることで、ReTweet ボタンを使ってくれた人を後から検索しやすくしています。
　
何だか試行錯誤し過ぎて汎用性も乏しく、誰が得をするのかわからないコードになってしまいましたが、少しでも制作の参考になれば幸いです。

関連記事

• 2009/06/30: はてブと Twitter を使って、1ヶ月で約3万 PV を稼いだ顛末
• 2009/06/24: 今すぐに出来る、jQuery を高速化する10個の方法
• 2007/06/22: 人気ブログ型サイトのデザインと統計
• 2009/02/01: ブログデザインで気をつけている10個の細かい要素
• 2009/02/28: 2009年版・人気ブログ型サイトのデザイン 第1回 基礎データ編