Blog

2012.0920

Twitterを検索して表示するjQueryプラグイン

【注意】こちらは API 1 廃止の為動作しません。詳しくは最新版の API 1.1 対応版をご覧ください。
jQueryを使用してTwitterを検索して表示させるプラグインです。
特徴は本家のTwitterのようにスクロールバーが最下部に来た時に次のTweetを読み込みます。
※こちらは検索用のプラグインとなります。

DEMO

/common/btn_demo_off.gif” alt=”DEMO” width=”253″ height=”46″ />

※DEMOはiPhoneとiPadのキーワードがあるつぶやきを検索して表示しています。

使用にあたっての注意

  1. 再配布はご遠慮くださいませ
  2. 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。
  3. このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。
  4. 使用に関しては自己責任でお願いいたします。
  5. ご要望、バグなどございましたらお問合せフォームまで

設置方法1

head要素内にjquery.js、jquery.twitter.search.jsの順に読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.twitter.search.js"></script>

設置方法2

下記を記述してください。
※設定は「設定可能オプション」をご覧ください。
※オプションの最後は,を付けないでください。

$('#twitter_search').ATTwitterSearch({
	q : 'iphone ipad',
	view : 5
});

HTMLテンプレート例

下記のように出力されますのでCSSでそれぞれデザインしてください。
既にclass名が重複している場合は、下記「設定可能オプション」を適宜変更してください。

<div id="twitter_search">
<div class="attweets">
<div class="attweet">
<p class="atphoto"><a href="" target="_blank">画像</a></p>
<p class="attext">ツイート</p>
<p class="atstatus"><a href="" target="_blank">時間</a> <a href="">ステータス</a>から</p>
</div>
</div>
<div class="atloading"><p><img src="images/loading.gif" width="16" height="16" /></p></div>
</div>

設定可能オプション

q : 検索させたいワード,
tweets : ツイートを入れるDivのclass名(初期値:’.attweets’),
loading : ローディングのDivのclass名(初期値:’.atloading’),
view : 表示件数(初期値:5),
page : 何ページ目を表示するか(初期値:1)

上記が設定出来ますが主に使用するのは
qとviewのみで問題ないと思います。

Page Top