Twitterへの投稿リンクの作り方

ニュースサイトにあるような、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など環境変数が必要になるから、一定のプログラムを書くことになる。

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>

例： ここ

とすると、1行でできる。
 

---

ただ、前述だとウインドウが一枚開いてしまうので、DOMを使ってリンクを置き換えてしまう方法でもいいね。

例： ここ

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>

以上、なるべくかんたんに実装できる例を考えてみた。
優れた方法は他にもあると思うし、今後も研究されてゆくと思う。私も独自の実装を行っている。
みなさんの参考になればさいわいだ。