リツイート数ランキングの作り方【Topsy編】

 ブログの人気記事ランキングとして、リツイート数ランキングを表示するのが多いそうですので、ウェブソクでも試してみる事にしました!ヘッダー部分のランキング表示がそれです。前からどうやるのか興味がありましたので、今回自作してWordPressに設置してみました!


概要

※思いつきで作りましたので、他に効率の良い方法があるかもしれません。他に良い方法があれば教えてもらえるとうれしいですw

●全体の流れ 記事のリツイート数・リンク・タイトルを取得(JavaScript)
    ↓
データをテキストファイルに保存(php)
    ↓
ランキングデータ(text)
    ↓
データを元にWordPressからアイキャッチ画像を取得してデータと共に表示(php)

 後はお好みでcssでデザインして表示させれば完成です。


 
 リツイート数(RT数)の取得には、TOPSY APIを使用します。こちらのAPIは、JavaScriptしか受け付けないらしいので、この部分はJavaScriptで作成。

 データファイル生成とWordPressのアイキャッチ画像の取得はphpの方が良いので、phpで作成しています。パーミッションの設定を、忘れずに書き込めるように設定して下さい。


【2013/02/14:追記】
 Topsy APIは2013年1月からAPI KEYが必須になりました。30日のお試し期間はありますが、API KEYが有料になります。
Topsy API Key
 なにか無料でできる別の方法を考えないといけませんね。




ソース

 流れとしては、read.jsでRT数ランキングを取得、write.phpでランキングデータをテキスト保存、disp.phpでテキストデータからアイキャッチ画像を取得して表示、となります。

 WordPressのテンプレート内にファイル置く場合、ファイルのパスは絶対パスで書いた方が良さそうです。相対パスで書くとうまく動かない場合があります。

 データを記録する、data.phpは空のファイルを作成してアップロードして下さい。


●read.js
jQuery(function ($) {
var url = 'https://news.7zz.jp'; // RT数ランキングを取得したいサイト
var time = 'y'; // h:最近1時間, d:最近24時間, w:最近1週間, m:最近1ヶ月間, y:最近1年間 a:全期間
var cnt = 10; // 取得件数 10-50

url.replace(/^http(|s):///g, '');

function twRank(data) {

var rank = '';

// レスポンス RT数でソート
data.response.list.sort ( function (b1, b2) { return b1['trackback_total'] < b2&#91;'trackback_total'&#93; ? 1 : -1; } );

// レスポンス 取得件数分ループ
for (i = 0; i < data.response.list.length; i++) {

// RT数
var tweets = data.response.list&#91;i&#93;.trackback_total + ',';
// タイトル
var title = data.response.list&#91;i&#93;.title;
if (title.length>50) title = title.substring(0,49) + '…'; // 文字数調整
title = title + ',';
// リンク
var link = data.response.list[i].url;

rank += tweets + title + link + 'n';
}
// データファイル生成用phpに送信
$.post('(適当なパス)/write.php', {text:rank});
}

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

});



●write.php
<?php
$text = $_POST&#91;"text"&#93;;
$text = mb_convert_encoding ($text, "utf8", auto);

$fo = fopen ("data.php", "w") or die ("file open error...n");
flock ($fo, LOCK_EX);
fwrite ($fo, $text);
flock ($fo, LOCK_UN);
fclose ($fo);
?>



●write.php(data.phpへの更新を30分毎に行う場合)
<?php
$text = $_POST&#91;"text"&#93;;
$text = mb_convert_encoding ($text, "utf8", auto);
//$text = ereg_replace("n", "<br>", $text); // 正規表現で文字を置き換え

// データファイルの更新間隔(sec)
$delay = 30*60;

$now = date("Y/m/d H:i:s");

$rwt = fopen("timestamp.php","r") or die ("file open error...n");
$writetime = fgets($rwt);
fclose($rwt);

// タイムスタンプが空、または更新間隔以上の時間経過で書き込み
if ($writetime = "" || $delay < (strtotime($now) - strtotime($writetime))){

// タイムスタンプ更新
$wwt = fopen ("timestamp.php", "w") or die ("file open error...n");
flock ($wwt, LOCK_EX);
fwrite ($wwt, $now);
flock ($wwt, LOCK_UN);
fclose ($wwt);

// データファイル更新
$wd = fopen ("data.php", "w") or die ("file open error...n");
flock ($wd, LOCK_EX);
fwrite ($wd, $text);
flock ($wd, LOCK_UN);
fclose ($wd);
}
?>



●disp.php
<?php
// 表示する記事数
$disp_count = 6;

//RT数ランキング読み込み
$fr = fopen ("(適当なパス)/data.php", "r") or die ("file open error...n");

$count = 0;
$twrank .= "<ul id="twRank">n";

while (! feof ($fr)) {
$twdata = fgets ($fr, 4096);
$twdata = mb_convert_encoding ($twdata, "utf8", auto);
$twdata = ereg_replace("n", "", $twdata); // 正規表現で文字を置き換え

list($tweets, $title, $link) = explode(",", $twdata);

if ($count < $disp_count) {
$postid = url_to_postid( $link );
$thumbnail = get_the_post_thumbnail($postid , array(155,116));
// 表示用整形
$twrank .= "<li>";
$twrank .= "<div class="tweets_flame"><p class="tweets">" . $tweets . "<br />RT</p></div>";
$twrank .= "<div class="photo_flame"><a href="" . $link . "">" . $thumbnail . "</a></div>";
$twrank .= "<div class="title_flame"><a href="" . $link . ""><span class="title" id="tw" . $count . "">" . $title . "</span></a></div>";
$twrank .= "</li>n";
}
$count ++;
}

$twrank .= "</ul>n";

fclose ($fr);

echo $twrank;

?>





設置方法

 ファイルを全部アップロードしたら、read.jsが動作するようにタグを書き込みます。今回はjQueryを使っていますので、

<?php wp_head(); ?>

 ヘッダー部分の、上記の後ろにread.jsを読み込むようにして下さい。WordPressでは、wp_head();内で、jQueryの本体が読み込まれるようになっています。

<script type="text/javascript" src="(適当なパス)/read.js"></script>



 つぎにRT数ランキングを表示したい箇所に、disp.phpを読み込んで下さい。

<?php include ('(適当なパス)/disp.php'); ?>

 これで設置は完了です。あとはcssで見た目を調整します。



 このままですと、ブログが読み込まれた際に、RT数ランキングのデータファイルが作成されます。データファイルの作成時間を取得して、一定時間毎に作成するようにするなどして負荷も軽減する工夫もできますし、ランキングの表示部分を自動で切り替わるスライダーにしても面白いかもしれませんね。



 とりあえずザックリと書きましたが、少しずつ細かい説明も追記しようと思います!


コメント

  1. 匿名 より:
    ライブドアでは使用する事が出来ないのでしょうか?
  2. gaito777 より:
    WordPress用に作ったので、このままでは無理だと思います。
    ライブドアブログの仕様がわからないのですが、php部分が動かせないかも。
  3.   より:
    phpが動かせない仕様みたいなので外部サーバーで試行錯誤してみましたがよく分からなかったので諦めます…
    どうもありがとうございました。
  4. gaito777 より:
    phpの部分はWordPressの画像を取得するのに、都合がよかったのでphpを使っています。画像を取得するのがJavaScriptで問題ないなら、JavaScriptのみで作れるはずです。

    いまの状態でも画像はなしですが、「read.js」で表示まで持っていけば、記事のタイトルとリンクだけで、とりあえずRT数ランキングはできるはずです。

    あとはライブドアブログで画像を取得する方法がわかれば、「read.js」のhtml整形部分に追加して表示すれば良いかと思います。

    ヒントとしてはそんな感じでしょうか。

  5. 海老 より:
    データファイルの作成時間を30分や1時間ごとにしたいのですが、どのファイルにどう記述をしていいかわかりません…。
    よろしければ教えていただけないでしょうか?
  6. gaito777 より:
    こんにちは!
    データファイルの更新間隔を30分にした例を、記事に追加しました。
    いろんな方法があると思うのですが、「white.php」を変更してみました。

    前回データファイルを更新した時間(タイムスタンプ)のみを記録する「timestamp.php」を用意して、
    データファイルを更新する前に、タイムスタンプをチェックします。
    タイムスタンプが設定した更新間隔の30分以内なら、
    データファイルは更新しない仕組みです。

    こんな感じでできると思うのですが、いかがでしょうか。
  7. 海老 より:
    設置したところ無事動作しているようです!
    わざわざお答えいただきありがとうございました!
  8. gaito777 より:
    こんばんは!
    いまぼーっと見ていたら、
    少し間違えているのに気がついたので、
    修正しました。

    $now = date(“H:i:s”);

    $now = date(“Y/m/d H:i:s”);

    ここの部分です。

    日付を入れておかないと、
    例えば前回更新したタイムスタンプが23:32:00だった場合、
    次の更新時間が00:02:00以降になります。

    この状態で、23:32:00 – 00:02:00という引き算しても、
    23時間2分という数字になって、正確な差がでませんので、
    日付を入れる必要がありました。

    そこだけ修正していただけますでしょうか。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください