twitterのタイムライン表示を自前で実装してみる@wordpress
今wordpressに引っ越し作業の真っ最中の当ブログですが、twitterのタイムライン表示をプラグイン無しで簡単に実装してみたので、その方法をご紹介させてもらおうかと思います。
未だにtwitterの使い方がわからないのが問題ですが・・・
・サーバーサイドの準備
まず、サーバーにtwitter.phpというファイルを用意します。
中身はこんな感じ。
<?php
$htm = "";
$xml = simplexml_load_file("http://twitter.com/statuses/user_timeline/ユーザー名.rss");
$i=0;
while($i<表示させるつぶやき数) {
$item = $xml->channel->item;
$updateproxy = $item[$i]->pubDate;
$updatetime = strtotime($updateproxy);
$update = gmdate("M d Y H:i:s", $updatetime+32400);
$title = $item[$i]->title;
$links = $item[$i]->link;
$htm = $htm."<div class='datebox'>".$update."</div><a href=".$links." target='_blank'>".$title."</a><br/><br/>";
$i ++;
}
echo $htm;
?>
まず、rssはxml配信なので、simplexml_load_fileで読み込みます。
$iはイテレータ変数です。
while($i<表示させるつぶやき数)←ここの部分で何回分のつぶやきを取得するか、を決定します。
次にwhile文の中でXMLを解析していきます。
まず、 $xml->channel->itemで、つぶやきの情報を配列で取得します。
$item = $xml->channel->item;
これで、例えば最新のつぶやきなら$item[0]で、ひとつまえのつぶやきなら$item[1]で情報を取得できます。
次に$itemから各情報を抽出します。
まずは投稿日時ですが、$item[$i]->pubDateで取得できます。
ただ、twitterのrssはグリニッジ標準時で配信されるので、このまま表示すると日本時間より9時間遅れた時間で表示されてしまいます。そこで・・・。
//まず、グリニッジ標準時を取得。
$updateproxy = $item[$i]->pubDate;
//タイムスタンプに変換
$updatetime = strtotime($updateproxy);
//32400秒加算して日付表示に再変換
$update = gmdate("M d Y H:i:s", $updatetime+32400);
という流れでやればOKです。
あとは、$item[$i]->titleで本文、$links = $item[$i]->linkでURLを取得すれば完了。
結構簡単にできちゃいます！
あとはクライアントサイドからjavascriptを使ってブラウザに表示させてみます。
・クライアントサイドの準備
ajaxを使いますので、jqueryがあると大変便利です。
jqueryは、<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">とhtmlのヘッダに記述すれば使えます。
wordpressだと標準でjqueryを導入しているテーマも多数あるはずなので、その場合はこの記述は不要です。
で、twitterを表示したい部分に次のコードを記述します。
wordpressならテンプレートの編集画面でも、ページとして投稿してもOKです。
<div id="twitterDisplay">
<ul>
</ul>
</div>
<script type='text/javascript'>
$(function(){
var now = new Date();
var nowms = now.getTime();
$("#twitterDisplay ul").load("http:/ファイルパス/twtter.php?" + String(nowms));
});
</script>
$("#twitterDisplay ul").load("http://ファイルパス/twtter.php?" + String(nowms));
↑ここの部分は、PHPから受け取ったデータをtwitterDisplayというidを持つDOM要素の子ul内に挿入します、というコードです。
ここで注目は + String(nowms)という部分です。
ここにユニークな値を挿入することによって、キャッシュから古いデータを読んでしまうことを防いでいます。
ここでは、1970年からの経過時間をミリ秒でカウントし、それを挿入しています。
↓ここの部分です。
var now = new Date();
var nowms = now.getTime();
これでバッチリtwitterのつぶやきを表示できました！
これならカスタマイズも簡単ですし、是非是非トライしてみてください。