自サイトのTwitterでの注目エントリーをTopsy APIを使ってランキング形式で表示

JSONP

サイトごとの注目エントリーのJSONPはhttp://otter.topsy.com/search.js?q=site:example.comで取得できます。
パラメータなどは下記のリンク先を参照してください。

Resources - otterapi - Project Hosting on Google Code

並び順はTopsyが出したスコア順なので、Tweetの多さ順にならない場合もあります。

JSONPは以下のようなものになります。
今回はYahoo!ニュースを全期間指定で取ってみました。

({
  "request": {
    "parameters": {
      "window": "a",
      "q": "site:headlines.yahoo.co.jp",
      "perpage": "2"
    },
    "response_type": "js",
    "resource": "search",
    "url": "http://button.topsy.com/search.js?perpage=2&q=site%3Aheadlines.yahoo.co.jp&window=a"
  },
  "response": {
    "window": "a",
    "page": 1,
    "total": 1000,
    "perpage": 2,
    "list": [{
      "trackback_permalink": "https://twitter.com/hatebu/status/11179773972",
      "mytype": "link",
      "content": "携帯端末、全社対応型に…総務省が制限解除要請へ（読売新聞） - Yahoo!ニュース (50 users) http://bit.ly/9yyK61",
      "trackback_date": 1269751579,
      "score": 10.6204,
      "trackback_total": 985,
      "hits": 925,
      "topsy_trackback_url": "http://topsy.com/trackback?url=http%3A%2F%2Fheadlines.yahoo.co.jp%2Fhl%3Fa%3D20100328-00000055-yom-bus_all",
      "url": "http://headlines.yahoo.co.jp/hl?a=20100328-00000055-yom-bus_all",
      "firstpost_date": 1269713788,
      "title": "携帯端末、全社対応型に…総務省が制限解除要請へ（読売新聞） - Yahoo!ニュース",
      "highlight": "??^(o)a*??c,?????a~??a*?¨c,?3/4a*?3/4a*??a*??a~??a^?￤c,??a*??c,??a~??a*?¶e'??e`§￡e'??e`￤?e`??a~??i"1/4?e`^(a)?a*￡^(2)??°e`??i"1/4? - <span class=\"highlight-term\">Yahoo</span>!&atilde;&#131;&#139;&atilde;&#131;&yen;&atilde;&#131;&frac14;&atilde;&#130;&sup1; (50 users) http://bit.ly/9yyK61&#8230;"
    },
    {
      // ......
    }]
  }
});

これから必要なものを抜き出して使います。

jQuery

上記のデータをol要素とli要素でマークアップして、指定のid内に表示します。

jQuery(function ($) {

  var opt = {
    url: 'http://headlines.yahoo.co.jp/', // サイトのURL
    time: 'a', // h：最近1時間, d：最近24時間, w：最近一週間, m：最近1ヶ月間, a：全期間
    count: 2, // いくつまで表示するか (デフォルト10, 最大50)
    del: '', // 取得したエントリータイトルから削除したい文字列
    showcount: true // ○○tweets を表示するかどうか (true/false デフォルトtrue)
  }

  // パラメータ用に整形
  var param = {
    url: opt.url.replace(/^http(|s):\/\/|\/$/g, ''),
    time: (opt.time != null && opt.time.match(/^[hdwma]{1}$/)) ? opt.time : 'auto',
    cnt: (opt.count > 0 && opt.count < 51) ? opt.count : 10
  }

  // コールバック関数
  function twiRank(data) {

    var list = '';

    // 1つもなければ終了
    if (data.response.total === 0) return;

    // レスポンスの配列数だけループさせる
    for (i = 0; i < data.response.list.length; i++) {

      // エントリーへのリンク
      list += '<li><a href="' + data.response.list[i].url + '">';

      // エントリーのタイトル (消したい文字列がない場合はそのまま)
      if (opt.del !== '') {
        list += data.response.list[i].title.replace(opt.del, '');
      } else {
        list += data.response.list[i].title;
      }

      list += '</a>'

      // tweet数(Topsyへのリンク付き)
      if (opt.showcount !== false) {
        tweets = (data.response.list[i].trackback_total > 1) ? 'tweets' : 'tweet';
        list += '<a href="' + data.response.list[i].topsy_trackback_url + '" target="_blank">'
        list += data.response.list[i].trackback_total + tweets;
        list += '</a>';
      }

      list += '</li>';
    }

    // 指定した ID 内にol要素を作ってリストを追加
    $('#twirank').html('<ol>' + list + '</ol>');

  }

  // JSONPを取得
  $.getJSON('http://otter.topsy.com/search.js?q=site%3A' + param.url + '&window=' + param.time + '&perpage=' + param.cnt + '&callback=?', twiRank);

});

opt.delを入れたのは、ブログなんかだと各タイトルにブログ名が入るので自分のサイトに置いた場合に見た目が悪くなるからです。
うちの場合は' | Unformed Building'を指定して、エントリーのタイトルのみに置換します。

パラメータ用に整形と書かれている箇所について。http://があったからといって問題はないんですが、念のため消しています。
また、URLの最後のスラッシュがあると上手く検索されないようなので、それも消しています。
他の2つは指定できるもの以外のパラメータを入れられた場合のデフォルト値。ちゃんと指定するならいらないと思います。