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をクリックするとユーザー名を入力できるようになります。

サンプル

Fanpage

Javascriptサンプルページ一覧

skuare.net