以前に作成した、特定のURLへのTwitterの投稿を一覧で取得できるjQueryプラグインを、さらに改造してみました。

前回のプラグインではツイートが多くなっても、100件までは全て取得して表示するような仕組みになっていたため、そのまま表示してしまうとページが縦に異常に長くなる現象が発生していました。

そこで、今回の改造で1ページに表示する件数を指定可能にし、さらにページネーションの仕組みを取り付けてみました。

ソースコード

利用方法

ツイートの一覧を表示したいDOMオブジェクトを用意し、下記のように利用します。

$('#tweets').twitterTrackback();

オプション

下記のように、twitterTrackbackメソッドにオブジェクトを渡すことで、動作オプションを指定できます。

$('#tweets').twitterTrackback({ exclude: [ 'jyokyoku' ], renderCallback: renderTweets });

オプションの一覧

url (string)

ツイートを取得したいURLを指定します。デフォルトでは、スクリプトを設置したURLが利用されます。

wrapperTag (string)

ツイートの一覧を囲むタグを指定します。デフォルトではulです。

removeHash (boolean)

ツイートを取得するurlにハッシュが含まれる場合に、それを削除するかを指定します。デフォルトではtrueです。

renderCallback (function)

ツイートをレンダリングする関数を指定します。

pagerCallback (function)

ページャをレンダリングする関数を指定します。

pagerPos (string)

ページャを表示する位置を指定します。

• both – ツイート一覧の上下
• top – ツイート一覧の上
• bottom – ツイート一覧の下

perpage (integer)

1ページに表示するツイートの数を指定します。デフォルトでは10です。

noTrackback (string)

ツイートが1件も無い場合に表示するメッセージを指定します。デフォルトでは<p>Twitterからのトラックバックはありません。</p>が表示されます。

exclude (array)

ツイートを表示したくないユーザーIDを配列で指定します。

生成されるHTMLコード

renderCallbackオプションやpagerCallbackオプションに何も指定しない場合、下記のようなHTMLコードが生成されます。

適宜CSSを利用してスタイリングしてください。

ツイート一覧

<ul>
	<li class="tweet1">
		<a href="http://twitter.com/jyokyoku"><img src="http://a1.twimg.com/profile_images/1302945019/___normal.jpg" alt="家富正幸" width="48" /></a>
		<ul class="section">
			<li class="nick"><a href="http://twitter.com/jyokyoku">家富正幸</a></li>
			<li class="content">ツイートの内容が表示されます。</li>
			<li class="date"><a href="http://twitter.com/jyokyoku/status/xxxxxxxxxx">1 days ago</a></li>
		</ul>
	</li>
	<li class="tweet2">
		<a href="http://twitter.com/jyokyoku"><img src="http://a1.twimg.com/profile_images/1302945019/___normal.jpg" alt="家富正幸" width="48" /></a>
		<ul class="section">
			<li class="nick"><a href="http://twitter.com/jyokyoku">家富正幸</a></li>
			<li class="content">ツイートの内容が表示されます。</li>
			<li class="date"><a href="http://twitter.com/jyokyoku/status/xxxxxxxxxx">1 days ago</a></li>
		</ul>
	</li>
</ul>

ページャ

<div class="tweetPager">
	<span class="current">1</span>
	<span><a href="javascript:void();" onclick="jQuery.twitterTrackback.update(2); return false;">2</a></span>
</div>

コールバック関数を利用する

renderCallbackオプションやpagerCallbackオプションに適切な関数を渡すことで、表示されるツイートの内容やページャのコードを変更する事ができます。

renderCallbackオプションを指定する

renderCallbackオプションを指定する場合、引数を1つ取る関数を指定してください。
引数にはツイートの番号が数値で渡されます。

また、関数のthisスコープはツイートの情報が格納されたオブジェクトになるため、this.author.nameなどでツイートに関する情報を表示することができます。

デフォルトで実行される関数を載せておきます。

function renderHtml(n) {
	return (
		'<li class="tweet' + n + '">' +
			'<a href="' + this.author.url + '"><img src="' + this.author.photo_url + '" alt="' + this.author.name + '" width="48" /></a>' +
			'<ul class="section">' +
				'<li class="nick"><a href="' + this.author.url + '">' + this.author.nick + '</a></li>' +
				'<li class="content">' + this.content.replace(/((http:|https:)\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>") + '</li>' +
				'<li class="date"><a href="' + this.permalink_url + '">' + this.date_alpha + '</a></li>' +
			'</ul>' +
		'</li>'
	);
}

pagerCallbackオプションを指定する

pagerCallbackオプションを指定する場合、引数を3つ取る関数を指定してください。
引数は下記の値が渡されます。

1. (integer) 現在のページ番号
2. (integer) 1ページにいくつツイートを表示するか
3. (integer) 現在のURLに対する全ツイート数

また、ページャで生成されたリンクがクリックされた場合には、必ず下記の関数を実行して、ツイート一覧を書き換えるようにしてください。

jQuery.twitterTrackback.update(pageNumber)

デフォルトで実行される関数を載せておきます。

function pagerHtml(current, perpage, total) {
	var totalPages = total / perpage;
	var links = '';

	for (var i = 1; i < totalPages; i++) {
		if (current != i) {
			links += '<span><a href="javascript:void();" onclick="jQuery.twitterTrackback.update(' + i + '); return false;">' + i + '</a></span>';

		} else {
			links += '<span class="current">' + i + '</span>'
		}
	}

	return (
		'<div class="tweetPager">' + links + '</div>'
	);
}

バグやご要望など

バグやご要望などありましたら、ツイッターかコメントフォーム、Facebook、またはお問い合わせフォームからご連絡ください。