entry

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

date: 2009/06/26 20:27

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 ボタンを使ってくれた人を後から検索しやすくしています。
 
何だか試行錯誤し過ぎて汎用性も乏しく、誰が得をするのかわからないコードになってしまいましたが、少しでも制作の参考になれば幸いです。

関連記事

20 responses

reply

#3655: Martin

date: 2014/11/18 17:39:03

What a pleasure to find someone who idifneties the issues so clearly

reply

#3712: Messina

date: 2015/02/22 14:10:44

Awesome you should think of soiehtmng like that

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

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

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

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

#1028: A CHAN

date: 2009/12/26 21:36:39

@utaiinu
ここを参考にして下さい。
http://gerenuk.crazyphoto.org/2009/06/26/885/

#1027: 杉村崇

date: 2010/01/11 08:34:00

なるほど。RT @gerenukrumoi このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://bit.ly/ZwsVU

#1026: ふむふむ

date: 2010/01/11 08:35:37

RT sugimu: なるほど。RT gerenukrumoi このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://bit.ly/ZwsVU

#1025: 坂田誠@ソーシャル大好き

date: 2010/02/01 11:08:24

@Lupin_the_3rd ちなみに文字コードの部分の解説があまりないですが、このあたりをご参考に http://bit.ly/cMWKOi #twibookJP

#1024: ホームページ宣伝

date: 2010/02/15 11:32:59

RT @gerenukrumoi このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://bit.ly/ZwsVU

#1424: 匿名

date: 2010/02/15 11:32:59

#1023: じゅんぺい

date: 2010/02/15 12:13:35

RT @HPsenden: RT @gerenukrumoi このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://bit.ly/ZwsVU

#1022: かるこ

date: 2010/03/26 00:12:59

このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://gerenuk.crazyphoto.org/2009/06/26/885/

#1020: takumi_taguchi

date: 2010/05/11 11:54:28

RT @gerenukrumoi このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://bit.ly/ZwsVU

#1019: takaco

date: 2010/05/15 15:54:05

RT @gerenukrumoi このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://bit.ly/ZwsVU

#1205: Ikuo hayakawa

date: 2010/09/03 03:17:22

RT @gerenukrumoi: このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://bit.ly/cMWKOi

#1213: 若松武志

date: 2010/09/20 04:12:33

このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで | gerenuk.crazyphoto.org/ http://bit.ly/avguZj

#1220: 天国の元帥/元さん

date: 2010/10/22 07:51:23

このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで | gerenuk.crazyphoto.org/
http://gerenuk.crazyphoto.org/2009/06/26/885/

#1234: moon

date: 2010/12/10 03:12:41

RT @gerenukrumoi: このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで http://bit.ly/bLz5Zu

#3296: naganomi

date: 2012/04/24 11:58:27

RT @gerenukrumoi: このサイトの「Twitter に送る(ReTweet ボタン)」が出来るまで <a href="http://bit.ly/bLz5Zu">SS</a>

#3333: れむれむ

date: 2012/07/06 23:58:03

この方法でなんとかなった・・・jQueryがなかったら即死だった・・・ http://t.co/WUf6rIwc

respond