公式ウィジェットを使わない方法
プレーンなリンクから、bit.ly を使った短縮リンクまで
ニュースサイトにあるような、Twitterのテキストエリアに“つぶやき”を送って、記事名とページURLをサジェッション・紹介するリンク(ツイートボタン)は、どうやって実装しているのか。
Twitterへ、つぶやきを投稿するには http://twitter.com/status/update に 投稿文字列を
statusパラメーター(テキスト形式の文字列)に格納して、その他のトークンと共にPOSTする必要がある。
投稿時にトークンが必要なので、GETリンクによるURL文字列だけでは、投稿は完了しないようになっている。こうすることによって、不用意な投稿を防いでいる。
だが、〔いまどうしてる?〕のつぶやき入力画面(ステータス)には、
http://twitter.com/?status=文字列
で文字列を送ることができる。
たとえば
http://twitter.com/?status=ABCDEFG
というリンクを作れば、つぶやき入力画面にABCDEFGが送られ、表示される。
Twitterへのメッセージ付きリンクである。
自分のページを、記事名とページURL付きでサジェッション・紹介するのも、Twitterへのメッセージ付きリンクで実装するのが一般的だと思う。
たとえば、ここのページのURLを、Twitterに送る場合、
http://twitter.com/?status=https://www.nda.co.jp/memo/twitter_link.html
で送れなくもないのだが、正しくはURLエンコードして、以下のように送るのが行儀がよい。
http://twitter.com/?status=http%3a%2f%2fwww.nda.co.jp%2fmemo%2ftwitter_link.html
日本語のような「マルチバイト文字」も (例:こんにちは、ついったー)
http://twitter.com/?status=%e3%81%93%e3%82%93%e3%81%ab%e3%81%a1%e3%81%af%e3%80%81%e3%81%a4%e3%81%84%e3%81%a3%e3%81%9f%e3%83%bc
としてURLエンコードして送る。
URLエンコードは、変換サイトを使ってUTF-8に変換することができる。
だが・・・たとえば、当ページの紹介リンクをURLエンコードで変換して作ると、
http://twitter.com/?status=Twitter%e3%81%b8%e3%81%ae%e6%8a%95%e7%a8%bf%e3%83%aa%e3%83%b3%e3%82%af%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9+http%3a%2f%2fwww.nda.co.jp%2fmemo%2ftwitter_link.html
ということになる。
いちいち変換して作ってもいいだろうけど、ページが多いと面倒なので、なるべく自動化することにしよう。
リンクを自動生成するには、自分のURLなど環境変数が必要になるから、一定のプログラムを書くことになる。
PHPやJavaScriptを使うのが簡単だが、前者(PHP)はサーバーサイドで応用範囲がひろいぶん大掛かりになり、後者(JavaScript)はすぐにできる反面クライアントサイドなだけにユーザーの環境に依存しており確実性がいささか弱い。
ただ実装のラクさでは、この場合はJavaScriptが優れているので、今回はこちらを使う。
そのページの<title>タグは document.title
そのページのURLは location.href
で、それぞれとれるので、
<a href="javascript: var f='http://twitter.com/?status='+encodeURIComponent(document.title+' '+location.href); if(!window.open(f,'surfing'))location.href=f; void(0);">ここ</a>
例: ここHTML
<a href="#" id="bm_twitter_link">ここ</a>
スクリプトコード
<script type="text/javascript">
//<![CDATA[
var t=document.title , u=location.href;
document.getElementById("bm_twitter_link").href='http://twitter.com/?status='+encodeURIComponent(t+'
'+u);
//]]>
</script>
Twitterは、文字量の制限があるので、URLも短縮サービスを使うことが推奨される。
公式短縮サービスは bit.ly なので、これを使って URLを短縮するにはどうすればよいか。
bit.ly では、WebAPIを提供しており、JSONまたはXMLで短縮URLを返してもらえる。
APIを使用するにあたっては、bit.ly でアカウントを作成する。
その後 API Keyを表示して、キーを得る。
アカウントとキーによって、次の形式で短縮URLを得ることができる。
http://api.bit.ly/shorten?version=2.0.1&format=[データ形式]&callback=[コールバック関数名]&login=[アカウント]&apiKey=[キー]&longUrl=[URL]
データ形式:JSON、XML
コールバック関数名:JSONで返ってきた値を受ける関数名
アカウント:bit.lyのアカウント
キー:提供されたAPIキー
URL:変換したいURL
実際に使用するとこのように返ってくる。
JSONの例:ここ
XMLの例:ここ
JavaScriptでは、当然、JSONが扱いやすいのでJSONを使うことにする。
以下の例では、リンクが押されたら、WebAPIを呼びに行って、JSONで返ってきた値でスクリプトが生成され、すなわち即コールバックが実行されて、短縮URLがTwitterに送られる、という動作をする。
なお bit.lyが返したURLを簡単に検証して、bit.lyが落ちていたら、未圧縮URLを送る。
ただ、bit.ly が落ちた瞬間を私は見たことがないので、実際に検証機構がうまく動作するかはためしていない。
HTML
<a href="javascript:void(0)" onclick="Getbitly(); return false;">ここ</a>
スクリプトコード
<script type="text/javascript">
//<![CDATA[
// twitter (bit.ly)
function Getbitly() {
api = 'http://api.bit.ly/shorten?version=2.0.1&format=json&callback=Callback&login=***&apiKey=***&longUrl=';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = api + encodeURIComponent(location.href) ;
document.body.appendChild(script);
}
function Callback(json) {
var bitly_url=json.results[location.href]['shortUrl'];
if ( bitly_url.indexOf("/bit.ly/") == -1 ) {
location.href =
'http://twitter.com/?status='+encodeURIComponent(document.title+' '
+ location.href);
}else{
location.href =
'http://twitter.com/?status='+encodeURIComponent(document.title+' '
+ bitly_url);
}
}
//]]>
</script>
先の例では、クリックした時にbit.lyにアクセスを行うが、用途によって事前に短縮URLの有無を確認しなければならないときなど、ページを表示した瞬間にbit.lyから短縮URLを得たい場合もある。
ここではDOMを使った例を示した。
ただ、ページの表示毎に かならず bit.ly に問い合わせを行うので、なるべく控えたい手法ではある。
HTML
<a href="#" id="bm_twitter_link">ここ</a>
スクリプトコード
<script type="text/javascript">
//<![CDATA[
var t=document.title , u=location.href , bitly_url;
// twitter
window.onload=function(){
Getbitly();
}
// twitter (bit.ly)
function Getbitly() {
api = 'http://api.bit.ly/shorten?version=2.0.1&format=json&callback=Callback&login=***&apiKey=***&longUrl=';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = api + encodeURIComponent(location.href) ;
document.body.appendChild(script);
}
function
Callback(json) {
bitly_url=json.results[location.href]['shortUrl'];
/* 記述*/
document.getElementById("bm_twitter_link").href='http://twitter.com/?status='+encodeURIComponent(t+' '+bitly_url);
//]]>
</script>
以上、なるべくかんたんに実装できる例を考えてみた。
優れた方法は他にもあると思うし、今後も研究されてゆくと思う。私も独自の実装を行っている。
みなさんの参考になればさいわいだ。
(2010/03/14・山崎はるか)
加筆:2011/06/15 twitter投稿URL(旧・/home/?)が変更になったので修正
UTF-8文字による直接リンクが無効になったので削除