bit.ly APIを利用

最終更新日 : 2010-05-18 16:16:11



API KEY取得


アカウント作成後、 http://bit.ly/a/account のページに記載されてる。

JavascriptClientApiを利用


JSからアクセスできるAPIが用意されているので、それを利用するとサーバ側の処理を必要なく、簡単に変換することができる。また、変換しょりは、レンダリング後に遅延して実行されるようになっており、APIが詰まってしまい表示ができない等の問題が起こらないように設計されている。

利用例(Wlog)

Wlog記事タイトル右下の Tweet リンクを以下JSで作成しています。
<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=tomyhero&apiKey=R_52f38df86864628116ea58131cf48492"></script>
<script>
var G_box = new Array();
var G_title = new Array();
BitlyCB.shortenResponse = function(data) {
    var first_result;
    // Results are keyed by longUrl, so we need to grab the first one.
    var r;
    for (r in data.results) {
        first_result = data.results[r]; break;
    }
    G_box[r].innerHTML =  '<span style="padding-right:3px;"><a href="http://twitter.com/home/?status=' + encodeURIComponent(G_title[r]) + ' ' + encodeURIComponent(first_result.shortUrl) + '"><img width="15" src="http://parts.blog.livedoor.jp/img/cmn/twitter02.gif" border="0" />Tweet</a></span>' +  G_box[r].innerHTML ;
}   
    
 var boxes = $(".updated_at");
 var urls  = $(".article h2 a");

 for (i=0; i<boxes.length; i++) {
    G_title[urls[i]] = urls[i].innerHTML;
    G_box[urls[i]] = boxes[i] ;
    BitlyClient.shorten( urls[i], 'BitlyCB.shortenResponse');
 }
</script>
callback内で任意の、変数を取得できれば良いのだができなさそうだったのでグローバル変数を利用して表示場所を取得している。また、上記ソースで利用しているlogin,apiKey等は各自変更して下さい。

TODO

urlごとの問い合せ回数を、1回でまとめて問い合わせるようにする。

参照

  • カテゴリ:
  • Tech
  • タグ:
  • js