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

公式ウィジェットを使わない方法

プレーンなリンクから、bit.ly を使った短縮リンクまで

△メモエリアにもどる

このエントリーをはてなブックマークに追加
Yahoo! bookmark

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へのメッセージ付きリンクで実装するのが一般的だと思う。

自分のページをTwitterで紹介する(固定リンク)

たとえば、ここのページのURLを、Twitterに送る場合、

http://twitter.com/?status=http://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>

例: ここ

とすると、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>

bit.lyの短縮URLに自動変換するには - (1)bit.lyのアカウントをとる

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を使うことにする。

bit.lyの短縮URLに自動変換するには - (2)WebAPIで短縮URLを受け取り、即送信

以下の例では、リンクが押されたら、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に自動変換するには - (3) ページ表示の都度に変換する場合

先の例では、クリックした時に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文字による直接リンクが無効になったので削除


(C)DIAMOND APRICOT TELECOMMUNICATIONS LABORATORY / since 1995
ホーム | お問い合せ