QR Code Business Card

リツイート数ランキングの作り方【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




●write.php




●write.php(data.phpへの更新を30分毎に行う場合)




●disp.php






設置方法

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



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





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



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



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



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


SNSでもご購読できます。

コメント

  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分という数字になって、正確な差がでませんので、
    日付を入れる必要がありました。

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

コメントを残す

*

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