F.Ko-Jiの「一秒後は未来」

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

(重要な追記: 2012-01-25) Topsy の API を利用するために API Key が必要となりました。さらに30日間は1日あたり7,000コールまで無料、それ以降は1日500コールまでなら無料で使えるそうです。
APIキーの取得はこちらから。 → http://manage.topsy.com/app

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

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

topsy-jquery-tweet-list.gif

↑ リスト表示

topsy-jquery-tweet-icon.gif

↑ アイコン表示

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 にあります。

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

なお、TopsyのAPIにはAPIキーの取得が必要となりました。「TopsyのAPIの利用にAPIキーが必須に。1日あたりの利用上限も追加。」を参考にAPIキーを取得した上で、スクリプト内の「&apikey=」の部分に取得したAPIキーを追加してください。

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

  1. F.Ko-Ji より:

    リスト表示させる場合は、
    TOPSY_FKOJI.type = ‘icon’;
    というところを、
    TOPSY_FKOJI.type = ‘list’;
    にしてみてください!

  2. takuma より:

    またまた遅くなってしまい申し訳ないです。
    ありがとうございます!リスト表示できました!

    こちらはtrackbackですが、指定したURLに対して言及されたツイートを表示させることはできないのでしょうか?

  3. F.Ko-Ji より:

    こんにちは。スクリプトの中に、

    encodeURIComponent(location.href),

    という箇所があると思いますが、この「location.href」を指定のURLに変えればいけると思います。

    encodeURIComponent(‘http://www.google.co.jp/’),

    のようにシングルクォーテーションでURLを括って指定してみてください。

  4. poet より:

    こんにちは。素晴らしい情報をありがとうございます。さっそくJSを使わせていただきテストサイトに実装してみたのですが、ツイッターのユーザーアイコンが来てくれません(画像のURLは”http://otter.topsy.com/”です)。また現在テストで3件つぶやいていておそらく何も表示されない場所だと思うのですが「?」になっています。JSは表示形式をlistに変えただけで何もいじっていません。どこをチェックすべきでしょうか? ちなみにサイトはMTでつくっています。

  5. F.Ko-Ji より:

    >> poetさま
    コメントありがとうございます。

    アイコンのURLが http://otter.topsy.com/ になってしまっているということは、
    おそらく Topsy の API に問題があるんだと思います。なのでこちらとしてはどうしようもありません。

    以前同様のことがあり @topsy に問い合わせて直してもらったことがありますので、Topsyに状況を説明してみるといいかもしれません。

    http://twitter.com/Topsy/status/16406593575

  6. poet より:

    素早いお返事ありがとうございます! さっそくTOPSYに凸ってみます!

  7. toro より:

    素晴らしい記事ですね。
    Wordpress用のプラグインでなら同様の物を見かけることはありましたが、これでツイッター利用の幅が広がりそうです。

    早速スクリプトを拝見させて頂きました。
    そこで質問なのですが、表示されるツイート内容のテキストを置換(非表示化)することは出来ないのでしょうか?

    ユーザーIDの表示にreplaceコマンドを利用されていたので、同様に本文に表示される「http://~」の部分をスペースに置換して削ることができれば良いなーと弄ってみましたが上手くいきません。

    良ければご意見お願いします。

  8. F.Ko-Ji より:

    >> toroさま
    ご質問ありがとうございます。

    TOPSY_FKOJI.buildTweetDiv の中の result.content を

    result.content.replace(/http:\/\/[-_.!~*'()a-zA-Z0-9;\/?:\@&=+\$,%#]+/, ”)

    のようにすると置換できると思いますがいかがでしょうか?
    URLの正規表現はお好みで書き換えてください。

  9. TORO より:

    早速のお返事ありがとうございます。
    無事置換することができました。
    本当に有用な可能性を持ったスクリプトですね。

  10. F.Ko-Ji より:

    >> TOROさま
    どうもありがとうございます。
    ぜひ色々とカスタマイズしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など