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

twitterのリストを使って、サイトのファンを表示するJavaScript「A Twitter List Powered Fan Page」

｜ ｜ ｜ ｜ ｜ ｜ ｜

サイトのファンをtwitterのリスト機能を使って表示してみます。
A Twitter List Powered Fan Page -- TutorialzineからjQueryを利用して実現します。

使用方法
A Twitter List Powered Fan Page -- Tutorialzineからファイル一式をダウンロードします。
ファイル内のconfig.phpを書き換えます。
$username='twitterのID';
$password='twitterのPASS';
$list = 'listの名前';

次にhead内に記述していきます。
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

上記を記述したら、以下のように表示する枠を書いていきます。
<div id="main">
<div id="fanPage">
<div class="title">
<a class="fanPageLink" href="http://twitter.com" title="Go to fanpage!"><img src="img/twitter-bird.png" id="twitBird" alt="twitter bird" /></a>
<a class="fanPageLink" href="http://twitter.com" title="Go to fanpage!">Fanpage</a>
</div>
<div class="content">
<div class="fans"><img src="img/loader.gif" alt="loading.." /></div>
</div>
<div class="subscribe"><a href="#" class="joinFP">Join!</a>
<div class="membersCount"><a class="fanPageLink" id="counter" href="http://twitter.com" title="Total Fans"></a></div>
</div>
</div>
</div>

これで、joinをクリックするとユーザー名を入力できるようになります。
twitterのリストを使って、サイトのファンを表示するJavaScript「A Twitter List Powered Fan Page」サンプル

記事作成：2010年01月05日

前の記事：ほろ酔い支援ツール「ホロヨッター」リリース
次の記事：画像のキャプションを画像から飛び出るように表示するJavaScript「jQuery Drop Captions Plugin」