PLAYNOTE Topsy's Otter API を使って最近の人気記事を表示

2012年07月20日

Topsy's Otter API を使って最近の人気記事を表示

[ネット・PC] 2012/07/20 19:39
recent-hot-entries.jpg
サイドバーにこんなん

Twitter検索サービス・TOPSYが提供しているAPIを使って、過去90日分の人気記事をリストアップして表示するスクリプトを設置した。要JavaScript。サイトの訪問者に過去記事を紹介する方法って何かないかなーと思って。

仕組み

PLAYNOTEの記事(URLにplaynote.netが含まれるページ)を、ソーシャルウェブ検索・Topsyで検索し、過去90日分でTweet数が多いものから順番に表示してます。

過去90日分にしたのは、すべての記事を対象にしちゃうとちょっとやそっとでランキングが変動しなくて面白くないから。かと言って過去一ヶ月とかにすると、数Tweetでランキングに載っちゃうので、とりあえず90日としてみた。

スクリプト

以下のサイトを参考にしたよ。

まずHTMLのヘッダーに以下の一行を挿入。

<script type="text/javascript" charset="UTF-8" src="../tweets-ranking.js"></script>

tweets-ranking.jsの内容は、以下の通り。

// 結果を受け取るコールバック関数
function topsyResult(data){
  // data.response.list[] に最大10件分
  //  .trackback_total :Tweet数
  //  .title :引用された記事のタイトル
  //  .url :引用された記事のURL
  //  などが入ります
  
  var Rcount = data.response.list.length;
  var ary =  new Array(Rcount);
  for (i = 0; i < Rcount; i++) {
    ary[i] = [data.response.list[i].trackback_total, data.response.list[i].url, data.response.list[i].title];
  };
  // alert(ary);
  
  var html = "";
  html += "<ul class=\"hotentry\">";
  for (i = 0; i < Rcount; i++) {
    var Rtitle = ary[i][2];
    var Rtitle = Rtitle.replace("PLAYNOTE更新 - ","");
    var splitRtitle = Rtitle.split(" - ");
    html += "<li><span class=\"rt-num\">" + ary[i][0] + "RT</span> <a href=\""+ ary[i][1] +"\">" + splitRtitle[0] + "</a></li>";
  }
  html += "</ul>";
  
  if (data.response.list.length == 0) {
    html = "<p>つぶやかれはありません。</p>";
  }
  else {
    document.getElementById("tweets").innerHTML = html;
  }
}
  
// リクエスト呼び出し
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:playnote.net&window=d90&callback=topsyResult';
  document.body.appendChild(script);
}
  
if (window.addEventListener) {
  window.addEventListener("load", topsyScript, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", topsyScript);
} else {
  topsyScript();
}

キモは'http://otter.topsy.com/search.js?q=site:playnote.net&window=d90&callback=topsyResult'ってとこ。ここの変数をいろいろ変えると、表示結果が変わる。d90で90日分。他にもいろいろしていできる。wだったら一週間分、w4だったら四週間分、mだったら一ヶ月分、aだったら全期間。

そんでサイドバーに以下のHTMLを挿入。

<h2 class="sidetitle">最近の人気記事</h2>
<p class="side" id="tweets">
<img src="http://www.playnote.net/img/loadinfo.gif" width="24" height="24" alt="">
</p>

あとはCSSでお化粧してやって完成。

妙にTweet数の少ないページもリストアップされちゃったりするのは、TOPSY APIの神秘であろう。よくわかんない。しばらく運用してみる。