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にはソフトバンク株式会社代表取締役社長 孫様のTweetを表示させていただいています。

使用にあたっての注意

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

設置方法1

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

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

設置方法2

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

$('#twitter').ATTwitter({
	screen_name : 'masason',
	view : 5
});

HTMLテンプレート例

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

<div id="twitter">
<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>

設定可能オプション

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

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

Page Top