Twitter 人気記事
はてなブックマーク人気記事
Topsy's Otter APIを使ってTweet数の多い記事をブログから抽出してリスト表示
» 雑記・その他
最近になって Twitter 上でもちらほら取り上げてもらえているようなので、Tweet 数(つぶやかれ数)の多い記事を抽出してリスト表示するようにしてみました。
API は本家のものではなく、Topsy で公開されているものを利用しました。
反映の速さと収集率の高さでは TweetMeme に一日の長があって、Tweet カウンタの設置も簡単で API も充実しているのですが、ドキュメント(解説そのものよりも HELP ページの構成)が分かりにくい。
あと、ウィジェットボタンを押して表示される履歴ページのレイアウトがごちごちゃしてて見難いのと、履歴が1週間分しか表示されないのがちょっと残念。(Twitter 的には1週間で十分？)
他にもないかいろいろ調べてみると、比較的新しい(と思われる) Topsy という Tweet 検索サイトが良さそうな感じ。反映の速さは TweetMeme よりほんの少し遅いようですが、収集率の高さでは Topsy のほうが上回っているときもあるようでなかなか健闘しているようです。
ウィジェットボタンも用意されていて飛んだ先の履歴ページも見やすいし、API (Topsy's Otter API) もシンプルで使いやすそうだったので、とりあえずしばらくの間は Topsy の API を使ってみることにしました。
API は、http://otter.topsy.com の後ろに "/取得リソース名" + ".レスポンス形式" + "?q=クエリーパラメータ" の組み合わせで HTTP/GET でコールします。
レスポンス形式は、JSON、JavaScript (JSONP) 、Text が選べます。
今回はブログ全体から Tweet 数が多い記事(人気の記事)のリストを取得したいのでリソース名は "search"、レスポンスは JavaScript からコールバックを使って JSONP として利用するので形式指定は ".js" になります。
クエリー部分 (?q=) は、サイト内を対象にするので "site:" を付けてブログの URL を指定、集計時間の範囲 (window) は全 Tweet を対象にするので "a" を指定、レスポンス形式で ".js" を指定した場合は結果を受け取るコールバック関数名もあわせて指定します。
取得する件数は何も指定しないと10件(1ページ分)になりますが、"&perpage=n" を追加してn件数分(最大50件)取得できます。件数が多い場合はページ指定 (page) を増やせば「最大10ページ×perpage」の件数を受け取ることもできます。
コールバック関数が呼ばれるタイミングは API のレスポンス任せなので、documemt.write では意図する場所に表示されない場合があるので注意。
また、他の DOM 操作で div 要素の内容などを更新している場合は、配置する位置によってはコールバックのタイミングに注意する必要があります。
より安全に更新したい場合は onload イベントで createElement と appendChild で API を呼び出してやります。
結果はコールバック関数の 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 操作で表示したいところに差し込んでやれば上のようなリストの出来上がりです。
表示したい位置に埋め込むだけで簡単に利用できます。
Topsy Labs に埋め込みコードと表示サンプルがあります。
右の例は big タイプで、small タイプもあります。
色 (Theme) は9種類から選択できます。
» head セクションに追加
» 表示したい箇所に追加 (URL、記事タイトルを " " で囲むのを忘れずに)
こんな記事書いておきながら Twitter のアカウントはまだ持ってないんですよね・・・
[追記]
2010年6月末あたりに仕様変更があったのか、ウィジェットのパラメータの "title" に日本語が含まれているとエラーが発生してカウンタが表示されなくなってました。
原因は不明ですが、とりあえずパラメータの "title" を省略すれば回避できます。
title パラメータがない場合は HTML 内の title タグから引用されます。
[関連サイト]
Topsy
Topsy's Otter API
Topsy Labs
TweetMeme
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件分
// .trackback_total ：Tweet数
// .title ：引用された記事のタイトル
// .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>
// 結果を受け取るコールバック関数
function topsyResult(data){
// data.response.list[] に最大10件分
// .trackback_total ：Tweet数
// .title ：引用された記事のタイトル
// .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件分
// .trackback_total ：Tweet数
// .title ：引用された記事のタイトル
// .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>
// 結果を受け取るコールバック関数
function topsyResult(data){
// data.response.list[] に最大10件分
// .trackback_total ：Tweet数
// .title ：引用された記事のタイトル
// .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>
<!--
{
"url": "[URL]",
"style": "big",
"theme": "blue"
}
-->
</div>
こんな記事書いておきながら Twitter のアカウントはまだ持ってないんですよね・・・
[追記]
2010年6月末あたりに仕様変更があったのか、ウィジェットのパラメータの "title" に日本語が含まれているとエラーが発生してカウンタが表示されなくなってました。
原因は不明ですが、とりあえずパラメータの "title" を省略すれば回避できます。
title パラメータがない場合は HTML 内の title タグから引用されます。
[関連サイト]
Topsy
Topsy's Otter API
Topsy Labs
TweetMeme
Facebook コメント
Facebook コメントに書き込まれた質問に対する返答・回答は行いません。ご了承ください。トラックバック 1
ブログ全体からつぶやきの多い記事のリストを取得してみた（GANGAN-METALLIC 2010-03-08 01:46）
すでに実装済みの「このエントリーに関連する(かもしれない)つぶやき」に続いて、つ...
この記事のトラックバックURL：
※言及リンクのないトラックバックは受信されません。
iTunes Store 音楽アプリベストセラー
for iPad
10件まで表示
for iPhone/iPod touch
for Mac
最新記事一覧
カテゴリー別表示
リストで一覧表示月別表示
Dropbox
コメント 0