skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryで複数ユーザーのtwitterタイムラインを表示する「A jQuery Twitter Ticker」

｜ ｜ ｜ ｜ ｜ ｜ ｜

その名の通り、JavaScriptライブラリのjQueryでtwitterタイムラインを表示します。
単一ユーザーというのは多くありましたが、A jQuery Twitter Ticker -- Tutorialzineは複数ユーザーにも対応しています。
またデザインもキレイなので、使いやすいかもしれません。

使用方法
A jQuery Twitter Ticker -- Tutorialzineからファイル一式をダウンロードします。
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="jScrollPane/jScrollPane.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>

表示したいユーザーはscript.js1行目で調整可能です。
var tweetUsers = ['skuare','ユーザーID1','ユーザーID2'];
最後に表示部分を記述します。
<div id="twitter-ticker">
<div id="top-bar">
<div id="twitIcon"><img src="twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
<h2 class="tut">My tweets</h2>
</div>
<div id="tweet-container"><img id="loading" src="loading.gif" width="16" height="11" alt="Loading.." /></div>
<div id="scroll"></div>
</div>

jQueryで複数ユーザーのtwitterタイムラインを表示する「A jQuery Twitter Ticker」サンプル

記事作成：2009年10月15日

前の記事：要素をハイライト表示にして目立たせるJavaScript「jQuery Highlighter」
次の記事：jQueryでtwitterで@がついたのを表示するプラグイン「Twitter Mentions」