So-net無料ブログ作成
» スポンサーリンク

Topsy's Otter APIを使ってTweet数の多い記事をブログから抽出してリスト表示
» 雑記・その他 

[追記] 2013/09/25
API の利用が有料になったため、この記事で書いた方法は使えなくなりました。

最近になって Twitter 上でもちらほら取り上げてもらえているようなので、Tweet 数(つぶやかれ数)の多い記事を抽出してリスト表示するようにしてみました。
API は本家のものではなく、Topsy で公開されているものを利用しました。



 反映の速さと収集率の高さでは TweetMeme に一日の長があって、Tweet カウンタの設置も簡単で API も充実しているのですが、ドキュメント(解説そのものよりも HELP ページの構成)が分かりにくい。

 あと、ウィジェットボタンを押して表示される履歴ページのレイアウトがごちごちゃしてて見難いのと、履歴が1週間分しか表示されないのがちょっと残念。(Twitter 的には1週間で十分?)

TOPSY



 他にもないかいろいろ調べてみると、比較的新しい(と思われる) Topsy という Tweet 検索サイトが良さそうな感じ。
 反映の速さは TweetMeme よりほんの少し遅いようですが、収集率の高さでは Topsy のほうが上回っているときもあるようでなかなか健闘しているようです。



 ウィジェットボタンも用意されていて飛んだ先の履歴ページも見やすいし、API (Topsy's Otter API) もシンプルで使いやすそうだったので、とりあえずしばらくの間は Topsy の API を使ってみることにしました。

Topsy's Otter API



 API は、http://otter.topsy.com の後ろに "/取得リソース名" + ".レスポンス形式" + "?q=クエリーパラメータ" の組み合わせで HTTP/GET でコールします。
 レスポンス形式は、JSON、JavaScript (JSONP) 、Text が選べます。

http://otter.topsy.com/search.js?q=site:[URL]&window=a&callback=[function]

 今回はブログ全体から Tweet 数が多い記事(人気の記事)のリストを取得したいのでリソース名は "search"、レスポンスは JavaScript からコールバックを使って JSONP として利用するので形式指定は ".js" になります。

 クエリー部分 (?q=) は、サイト内を対象にするので "site:" を付けてブログの URL を指定、集計時間の範囲 (window) は全 Tweet を対象にするので "a" を指定、レスポンス形式で ".js" を指定した場合は結果を受け取るコールバック関数名もあわせて指定します。

 取得する件数は何も指定しないと10件(1ページ分)になりますが、"&perpage=n" を追加してn件数分(最大50件)取得できます。件数が多い場合はページ指定 (page) を増やせば「最大10ページ×perpage」の件数を受け取ることもできます。

呼び出し例

<script type="text/javascript">
// 結果を受け取るコールバック関数
function topsyResult(data){
  // data.response.list[] に最大10件分
  //    list[].trackback_total :Tweet数
  //    list[].title :引用された記事のタイトル
  //    list[].url :引用された記事のURL
  //   などが入ります
}
</script>

//  リクエスト
<script type="text/javascript" src="http://otter.topsy.com/search.js?q=site:sothis.blog.so-net.ne.jp&window=a&callback=topsyResult"></script>

 コールバック関数が呼ばれるタイミングは API のレスポンス任せなので、documemt.write では意図する場所に表示されない場合があるので注意。

 また、他の DOM 操作で div 要素の内容などを更新している場合は、配置する位置によってはコールバックのタイミングに注意する必要があります。
 より安全に更新したい場合は onload イベントで createElement と appendChild で API を呼び出してやります。

<script type="text/javascript">
// 結果を受け取るコールバック関数
function topsyResult(data){
  // data.response.list[] に最大10件分
  //    list[].trackback_total :Tweet数
  //    list[].title :引用された記事のタイトル
  //    list[].url :引用された記事のURL
  //   などが入ります
}

//  リクエスト
function topsyScript(){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'UTF-8';
  script.src = 'http://otter.topsy.com/search.js?q=site:sothis.blog.so-net.ne.jp&window=a&callback=topsyResult';
  document.body.appendChild(script);
}

if (window.addEventListener){
  window.addEventListener("load", topsyScript, false);
}else if(window.attachEvent){
  window.attachEvent("onload", topsyScript);
}else{
  topsyScript();
}
</script>

 結果はコールバック関数の data.response.list[] に data.response.list.length 件数格納されています。
 ページが複数に分かれている場合は data.response[].list[] に data.response.length ページ数分格納されています。

 結果は Tweet 数の多い順 (.trackback_total) ではなく人気度の高い順 (.score) に並んでいるので、必要に応じて Array.sort などでソートしてやる必要があります。

 また、Tweet 数が多い記事でも人気度 (score) が他より低めに評価されている記事の場合、 デフォルトの10件分に入ってないことがあるので、クエリーパラメータの perpage を多めに指定したほうがよいかもしれません。

[追記]
 Tweet 数が多い記事 (URL) でも score の値が極端に低いと "window=a" を指定してもリストにあがってこないときがあります。その場合 "window=d" や "window=w" で検索してやるとヒットすることがあります。
[追記ここまで]

 他に似たような値の hits という項目があるのですが、レスポンスパラメータの解説がないので詳しいことは不明。



 コールバック関数の中で必要な項目を取り出して整形したものを DOM 操作で表示したいところに差し込んでやれば上のようなリストの出来上がりです。

Tweet カウンタ 兼 Retweet ボタン

表示したい位置に埋め込むだけで簡単に利用できます。
Topsy Labs に埋め込みコードと表示サンプルがあります。
右の例は big タイプで、small タイプもあります。
色 (Theme) は9種類から選択できます。

» head セクションに追加
<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

» 表示したい箇所に追加 (URL、記事タイトルを " " で囲むのを忘れずに)
<div class="topsy_widget_data">
<!--
{
"url": "[URL]",
"title": "[記事タイトル],"
"style": "big",
"theme": "blue"
}
//-->
</div>


こんな記事書いておきながら Twitter アカウントはまだ持ってないんですよね…

[追記]
2010年6月末あたりに仕様変更があったのか、ウィジェットのパラメータの "title" に日本語が含まれているとエラーが発生してカウンタが表示されなくなってました。
原因は不明ですが、とりあえずパラメータの "title" を省略すれば回避できます。
title パラメータがない場合は HTML 内の title タグから引用されます。

[関連サイト]
 Topsy
 Topsy's Otter API
 Topsy Labs
 TweetMeme
nice!(1)  コメント(0)  トラックバック(1)   » カテゴリー:雑記・その他
permalink
trackback


» スポンサーリンク


nice! 1

コメント 0

コメントを書く

名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 1

トラックバックの受付は締め切りました

iTunes Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac