Twitterをブログに表示！ページ送り付き★

2008年11月12日 09:31

Twitterをブログに表示！ページ送り付き★

Ｔｗｉｔｔｅｒをブログに表示してみました。

ＪavaScripｔ。。。まともに触ったことなかったので難しーー(-ω-)

で、いろいろなサイトを参考にさせていただき、

なんとか表示できたのはいいけど・・・・

贅沢いうと

・「たくさん表示したい」

・「なおかつ１ページに１記事表示で　"次へ"とか押すと次の記事が見れる感じ」

というわけで、０からのスタートなので無茶だよなーと思いつつ。。。
ソースいじってみました。

【js】
※relative_time関数は略で。

ちなみに日付フォーマットは
第８回：Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズを参考にさせていただきました！

twdata =new Array();
var page = 0;
var fin = 0;
var end = 0;

function twitterCallback(obj) {

 	for ( i=0; i<obj.length; i++) {

	 twdata[i] = obj[i];

 	};

	 fin = twdata.length;

 	hyouji();

}

function hyouji(){

	var tw = document.getElementById('twitter');

 	var dsp = 1; //１ページに表示する数

 	var cnt = 0;

 	end = 0;

 	for ( i= page * dsp ; cnt<dsp ; i++) {

   		tw.innerHTML += '<p>'+twdata[i].text+'</p><p id="tw_day"> '+relative_time(twdata[i].created_at)+'</p>';

   		cnt++;

  		 if(fin-1 == i){

   		end = 1;

  	 	}

 	}

}

 

function twbtn(flg){

	var tw = document.getElementById('twitter');

 	if(flg=='next' && end == 0){

	 tw.innerHTML ='';

	 page++;

	 hyouji();

 	}

	 else if(flg=='back'&& page > 0){

	 page--;

 	tw.innerHTML ='';

 	hyouji();

 	}

}

document.write(

'<scr'+'ipt '

+'type="text/javascript" '

+'src="http://www.twitter.com/statuses/user_timeline/{userID}.json?callback=twitterCallback&count=15">'

+'</scr'+'ipt>'

);

これをtwitter.jsで保存。

【htmlソース】

<html>
・
・
<script type="text/javascript" src="twitter.js"></script>//さっきのjsを呼び出し
・
・
・
<div id="twitter"></div>　//ここに表示させる
・
・
<a href="javascript:twbtn('back');" ><img src="「前へ」ボタンの画像" /></a>
<a href="javascript:twbtn('next');" ><img src="「次へ」ボタンの画像" /></a>
・
・
</html>

twitter.jsの最後のほうにある

「・・・/{userID}.json?callback=twitterCallback&count=10">'」の

10は取得してくる記事数。

10記事のうち、前から順にdspの数だけ表示していく

といったイメージ。

サンプルは↑ヘッダーの吹き出しです。

・・くちゃくちゃで幼いソースですみません、あわわわ(；´Д`A
（アイディアだけでも参考になれば・・・。w）

もっと効率のいいやり方とかあるんだろなー

Tags:Twitter