2009年10月16日

ページのタイトルとURLを使って「Twitterでつぶやく」ボタンを設置するのは、それほど難しくないが、Twitterには140文字制限があるため、長いURLだと非常に不便である。URL短縮サービスのひとつ bitly は、Twitter でも使われていて、javascriptで呼び出せるAPIも用意されている。このページでは、bitly API を使って、javascriptのみで「Twitterでつぶやく」ボタンを実現する方法を解説する。

2010/4/27追記 ： ポップアップブロックを作動させずに別ウィンドウで開く方法を追加
2010/4/30追記 ： ↑にコピペミスがあったので修正 orz
2010/7/10追記 ： API Key が他人から見えてしまっている問題の対応について（必読）

1. bitly API Key の取得

bitly API を使うには、bitlyにユーザ登録しなければなりません。

http://bit.ly/ にアクセスして、右上の「Sign Up」をクリックします。

登録したいユーザ名（任意です）、メアド、パスワードを入力して、「Sign UP」ボタンをクリックしましょう。ユーザ名は後で使います。

右上に、「Welcome, ほげほげ. Account | Sign out」と表示されたらOKです。「Account」をクリックします。

API Key という項目のところに書かれているものが、あなたのbitly API Keyです。このKeyを後ほど使います。

2. javascriptの埋め込み

以下の javascript をページに記入します。変更しなければいけないのは、

• var login : bitlyに登録したユーザ名
• var apiKey : bitly API Key
• var title : ページのタイトル

の3点です。

<script type="text/javascript"><!--
  function tweet() {
    var login  = 'xxxxxxxx'; // ← bitly に登録したユーザ名
    var apiKey = 'R_xxxxxxxxxxxxxxxx'; // ← bitly API Key
    bitly = 'http://api.bit.ly/shorten' 
        + '?version=2.0.1&format=json&callback=callback'
        + '&login=' + login
        + '&apiKey=' + apiKey + '&longUrl=';
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = bitly + encodeURIComponent(location.href) ;
    document.body.appendChild(script);
  }

  function callback(bitlyResponse) {
    var title = '（ページのタイトル）';
    var url = 'http://twitter.com/home/?status=' 
        + encodeURIComponent(
             title + ' ' 
               + bitlyResponse.results[location.href]['shortUrl']
          );
    location.href = url;
  }
  //-->
</script>

「ページのタイトル」は、例えばMovable Typeだと、

var title = '<$mt:var name="title"$>';

になります。javascrptだけでやろうとすると、

var title = document.title;

となります。

3. リンクの設定

以下のようなHTMLをページに追加しましょう。

    <a href="javascript:tweet();" title="Twitterでつぶやく">
        <img src="http://image.ringoon.jp/twitter.gif">Twitterでつぶやく
    </a>

以上で完了です！

4. 参考にしたサイト

■試験管のなかのコード :: bit.ly API にチャレンジ

とてもわかりやすいサンプルでした。ありがとうございました！

5. 追記：別ウィンドウを開く

上記の方式だと、表示中のページからtwitterのページに直接移動してしまうため、ブラウザによっては元のページに戻れなくなります。 function callback(bitlyResponse) の、

location.href = url;

を

window.open(url, '_blank');

とすることで、新しい画面でtwitterの投稿ページを開くことができます（実行サンプル）。ブラウザによっては、ポップアップブロックが作動します。

なるほどうさん、ご指摘ありがとうございました。

5.1 さらに追記：ポップアップブロックを作動させずに別ウィンドウを開く

ここ数ヶ月間ずっとノドの奥に小骨が刺さったような、そんな気分だったので、ポップアップブロックを作動させないような方法を考えてみました。aタグのhrefを後から書き換えてあげよう、という方法です。

まずは、HTMLの方に一工夫加えます。aタグにid属性とtarget属性を書き加えます。

    <a id="tweet_anchor" target="_blank"
      href="http://twitter.com/" title="Twitterでつぶやく">
        Twitterでつぶやく
    </a>

以下のようなjavascriptをページの一番最後の方に置きます。

<script type="text/javascript"><!--
  var login  = 'xxxxxxxx'; // ← bitly に登録したユーザ名
  var apiKey = 'R_xxxxxxxxxxxxxxxx'; // ← bitly API Key
  bitly = 'http://api.bit.ly/shorten' 
      + '?version=2.0.1&format=json&callback=changehref'
      + '&login=' + login
      + '&apiKey=' + apiKey + '&longUrl=';
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = bitly + encodeURIComponent(location.href) ;
  document.body.appendChild(script);

  function changehref(bitlyResponse) {
    var title = document.title;
    var url = 'http://twitter.com/home/?status=' 
        + encodeURIComponent(
             title + ' ' 
               + bitlyResponse.results[location.href]['shortUrl']
          );
    var twlObj = document.getElementById("tweet_anchor");
    if(twlObj != null && twlObj.href != null){
        twlObj.href = url;
        twlObj.innerHTML = 'Twitterでつぶやく';
    }
  }
  //-->
</script>

Firefox 3.5 と IE8 でポップアップブロックが作動しないことを確認しました。
ただ、この方法に問題がないわけではなくて、bitlyのサービスがダウンしていると、ページの読み込みに時間がかかります。あと、XHTML1.1ではaタグのtarget="_blank"が許されていません（動作しますけどね）。

6. 関連記事

■自分のページにTwitterのつぶやきを表示する方法まとめ [javascript]
■[PHP] bitly の API Key を遮蔽する方法まとめ

このページでは、Twitterでつぶやいた内容を、javascriptのみで、自分のページに表示する方法を解説する。

このページでも右上に表示させていますが、Twitterのつぶやきを自分のページに表示させるのは、とても簡単です。

1. javascriptの埋め込み

以下の javascript をページに記入します。変更しなければいけないのは、

• Twitterのユーザ名　（例：BabaTaka）
• つぶやきを何個表示するか　（例：1個ならcount=1）

の2点です。

   <script type="text/javascript"
       src="http://twitter.com/javascripts/blogger.js">
   </script>
   <script type="text/javascript"
       src="http://twitter.com/statuses/user_timeline/ユーザ名.json?callback=twitterCallback2&count=1">
   </script>

javascriptを埋め込む場所はどこでも良いです。RinGoon POP!!では、ページの最後の方に書いています。

2. HTMLの追加

次のようなHTMLを、自分のページに追加します。場所は、Twitterのつぶやきを表示したい場所です。

   <ul id="twitter_update_list"></ul>

以上で完成です！

3. スタイルシートで見栄えを良くする

これだけだと

• Twitterでつぶやいた内容・・・ 30 minutes ago

といった風情で、ちょっと見映えが面白くないので、スタイルシートを適用してみましょう。例えば、

#twitter_update_list {
   list-style: none;
   width: 76px;
   height: 136px;
   margin: 0;
   padding: 24px 4px 0px 13px;
   background: url(http://bit.ly/3AoQ9a) no-repeat;
   font-size: 80%;
}

とするだけで、

• Twitterでつぶやいた内容・・・ 30 minutes ago

と言う感じに見映えが変わります。

4. 関連記事

■bitly API (javascript) を使ってTwitterボタンを設置する方法まとめ