Topsyから指定URLについて言及しているツイートを取得

うちのブログでコメント欄代わりに使っているサービスとサンプルコードについて紹介します。@anywhereなどが混ざっている分は取り除いた状態です。

TopsyというTwitter関連サービスが提供している、APIを使って指定したURLについて言及している（そのURLを含む）ツイートを取得してきます。Topsy自体はRT数をカウントするブログパーツで有名な老舗サービスだと思いますが、その関連で提供されている機能です。

今回は、TrackbacksのAPIを利用します。本来の仕様はリンク先を見てください。このエントリーでは、コードのベタ貼りコースの紹介に留めます。

サンプルコード

$(function()
{
    /* URLを指定します。a-blog cmsの場合は、エントリー詳細で%{PERMALINK}でOK。 */
    var url     = '%{PERMALINK}';

    /* 取得したコメントを入れる先の要素をCSSセレクタで指定します。jQueryのセレクタに使うだけ。 */
    var target  = '#topsy_trackbacks';

    /* エラーハンドリングは特に考えません */
    $.getJSON('http://otter.topsy.com/trackbacks.js?url='+ url +'&callback=?', function ( json )
    {
        var res = json.response;
        if ( !res.total ) {
            return false;
        }

        /* この辺りで適当な ul > li のモトを作っているので、適宜編集してください。 */
        var html = '<ul>';
        var tpl  = '<li>'+
                     '<a href="{url}" target="_blank"><img src="{thumb}" alt="{name}" width="24" height="24" /></a>'+
                     '@{author_id} ; {status} ( <a href="{permalink}">{datetime}</a> )'+
                   '</li>';

        /* ひたすら文字列を連結する */
        var len = res.list.length;
        for ( var i=0; i<len; i++ ) {
            var tweet   = res.list[i];
            html       += tpl.replace('{thumb}',    tweet.author.photo_url.replace(/(normal)＼.([a-z]{3,4})$/i,'mini.$2'))
                             .replace('{author_id}',tweet.author.url.replace('http://twitter.com/',''))
                             .replace('{url}',      tweet.author.url)
                             .replace('{name}',     tweet.author.name)
                             .replace('{permalink}',tweet.permalink_url)
                             .replace('{status}',   tweet.content)
                             .replace('{datetime}', tweet.date_alpha);
        }
        html += '</ul>';

        /* 1度に10件まで取得できるので、11件目以降がありそうならTopsyへのリンクを加えておきます。 */
        if ( res.total > 10 ) {
            html       += '<a id="topsy_continue" href="'+res.topsy_trackback_url+'" target="_blank">もっと読む ( Topsy )</a>';
        }

        $(target).prepend(html);
    });
});

一応、a-blog cmsでの利用を想定しているので、jQuery依存です。url変数には、a-blog cmsの%{PERMALINK}が記述されていますが、パーマリンクを与えることができれば何でもよいので、他のブログツールでも動きます。

続き以降に、実際の動作サンプルも置いておきます。

動作サンプル

このサンプルでは、http://www.a-blogcms.jp をURLに指定して、表示してみています。ちゃんと出てますかね？