/ entry

hatena_usersこのサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで

date: 2009/06/26 20:27 | このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで

rtbutton

最近では、記事の ReTweet ボタン(タイトルやURLなどの情報を Twitter に簡単に送れるような機能)を実装するサイトが増えてきました。
TweetMemeTwitThis のような 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 ボタンを使ってくれた人を後から検索しやすくしています。
 
何だか試行錯誤し過ぎて汎用性も乏しく、誰が得をするのかわからないコードになってしまいましたが、少しでも制作の参考になれば幸いです。

関連記事

1 response

#928: ゲームプログラマにちゃんねら

date: 2009/08/11 22:37:07

流行みたいなんで、記事別にTwitterとtumblrのボタンを付けてみた。

Twitterとかtumblrとか流行みたいなんで、HTMLもJAVAもよく知らないが、適当に色々やってたらそれっぽくなったので付けてみた。多分自分で押して遊ぶ用wライブドアのタグそのまま使えるの…

respond