jQueryとTopsy APIを使ってそのページを言及したツイートを表示するスクリプトを作った

そのページが何回ツイートされたかを表示してくれるカウンターといえばTweetmemeとTopsyが有名ですが、TopsyのAPIを利用すると「そのページのURLが投稿されたツイート」を取得できるみたいなので、jQueryを使って各記事の下に表示してみることにしました。

たとえばこの記事の場合はこんな風に表示されます。

↑ リスト表示

↑ アイコン表示

APIの解説

TopsyのAPIで用意されているメソッドのうち「trackbacks」を使うと、そのURLを言及したツイートのリストを取得できます。

レスポンスのフォーマットはメソッドの拡張子で表現され、json, js(JSONP), txt の3種類が用意されています。

http://otter.topsy.com/trackbacks.js
?url=そのページのURL
&tracktype=tweet
&perpage=50

urlにデータを取得したいページのURLを、perpageに取得件数を指定します。デフォルトは10件で最大50件です。pageパラメータで2ページ目以降を取得することもできます。(参照: ResListParameters - otterapi)

作成したスクリプトの使い方

スクリプトは http://blog.fkoji.com/search_tweet.js にあります。

特に配布用に作ったわけではないですが、他のサイトでも使えると思うので利用してもらっても構いません。ただ、その場合は必ずダウンロードして各々のサーバーにアップロードして利用するようにしてください。

headタグでjQueryを読み込んでいることが前提です。jQueryはGoogleでもホスティングしているので、jQueryを使ってない場合は以下をheadタグに記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

次に記事ページでツイートのリストを表示したい箇所に

<div id="topsy-tweet-search-results"></div>

というタグを書き、そのタグ以降でスクリプトをインクルードします。

<script type="text/javascript" src="search_tweet.js" charset="utf-8"></script>

srcの値は環境に応じて変更してください。なお、設置できるのは1ページにつき1箇所です。

スタイルは独自であてる必要があるので、自分のブログでは次のようなCSSを適用しています。

/* 表示領域の大枠 */
#topsy-tweet-search-results {
    font-size:12px;
    border-top:2px solid #ddf6ff;
    border-bottom:2px solid #ddf6ff;
    background:#eefbff;
    margin-top:8px;
    padding-left:6px;
}
/* 表示領域の見出し */
#topsy-tweet-search-results .topsy-tweet-search-results-header {
    color:#11c4ff;
    font-weight:bold;
}
/* 個々のツイート領域 */
#topsy-tweet-search-results .topsy-tweet-search-result {
    clear:both;
    padding:6px 0;
    border-bottom:2px solid #fff;
    overflow:hidden;
}
/* ユーザー名 */
#topsy-tweet-search-results .topsy-tweet-name {
    font-weight:bold;
}
/* アイコン領域 */
#topsy-tweet-search-results .topsy-tweet-image {
    float:left;
    width:36px;
    height:36px;
    margin-right:12px;
}
/* アイコン画像 */
#topsy-tweet-search-results .topsy-tweet-image img {
    width:36px;
    height:36px;
}
/* ツイート */
#topsy-tweet-search-results .topsy-tweet-text {
    float:left;
    width:430px;
    background:#fff;
    padding:4px;
}
/* 日付 */
#topsy-tweet-search-results .topsy-tweet-date a {
    color:#999;
}
/* 「すべて表示」の操作テキスト */
#topsy-tweet-search-results #topsy-show-more-tweets {
    color:#1d3994;
    cursor:pointer;
    text-align:right;
    font-weight:bold;
    padding-right:4px;
}
/* アイコン形式の表示でのアイコンサイズ */
#topsy-tweet-search-results img.topsy-profile-image-small {
    width:24px;
    height:24px;
    margin:4px;
}

なお、スクリプト内で以下の部分をカスタマイズできます。

/* 表示領域の見出し */
TOPSY_FKOJI.text.header = 'Recent conversation on Twitter';

/* 「すべて表示する」の操作をする箇所のテキスト */
TOPSY_FKOJI.text.more   = 'Show more tweets...';

/* リスト表示の時に取得する件数 */
TOPSY_FKOJI.api.perpage = 50;

/* 表示形式。icon もしくは list を指定する */
TOPSY_FKOJI.type = 'list';

/* リスト表示の時に最初から表示する件数 */
TOPSY_FKOJI.displayNum = 5;

何か質問等ありましたら @fkoji までお願いします。

» otterapi - Project Hosting on Google Code

• http://blog.fkoji.com/2010/05301439.html jQueryとTopsy APIを使ってそのページを言及したツイートを表示するスクリプトを作った http://blog.fkoji.com/blogimg/topsy-jquery-tweet-list.gif F.Ko-Jiの「一秒後は未来」

地図とツイッターを同時に見れるiPhoneアプリ「MapAnd」をリリースしました！