参照：Twitter Friends & Followers Widget - A jQuery Plugin!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.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="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#friends').twitterFriends({
debug:1
,username:'cocoism'
});
});
</script>
<style type="text/css">
/*---- Users ----*/
div.tf-users{
/* fixed height so container will not flicker within transitions */
height:192px;
border:silver 1px solid;
overflow:hidden;
background-color:#eaeaea;
}
/* user img link*/
div.tf-users a{
display:block;
float:left;
}
/* user img */
div.tf-users img{ }
/*---- Tweets ----*/
div.tf-tweet{
/* fixed height so container will not flicker with different length tweets */
height:100px;
overflow:hidden;
}
/* tweet li */
div.tf-tweet li{
border:silver 1px solid;
position:relative;
padding:2px;
list-style-type:none;
margin:1px 0;
overflow:hidden;
}
/* tweet author avatar */
div.tf-tweet span.tf-avatar{
display:block;
width:48px;
height:48px;
margin:0 2px 0 2px;
left:0;
position:absolute;
overflow:hidden;
}
/* author name */
div.tf-tweet strong a{
margin-right:5px;
}
/* tweet body */
div.tf-tweet span.tf-body {
display:block;
margin-left:55px;
}
/* tweet content */
div.tf-tweet span.tf-content{
}
/* tweet date and source */
div.tf-tweet span.tf-meta {
color:#999999;
display:block;
font-size:0.764em;
margin:3px 0 0;
}
div.tf-tweet span.tf-meta a{
color:#999999;
text-decoration:none;
}
div.tf-tweet span.tf-meta a:hover{
text-decoration:underline;
}
/* customize date link */
div.tf-tweet a.tf-date { }
/* customize source link */
div.tf-tweet a.tf-source { }
/* customize links */
div.tf-tweet a.tf-link { }
/* customize @user links */
div.tf-tweet a.tf-at { }
/* customize #hashtags links */
div.tf-tweet a.tf-hashtag { }
/* ---- Info Link ----- */
div.tf-info{
text-align:right;
}
div.tf-info a{
text-decoration:none;
font-size:9px;
font-weight:bolder;
color:gray;
font-family:tahoma;
}
/**** for demo2 */
/*---- Header ----*/
div.tf-header{
border:silver 1px solid;
overflow:hidden;
margin:0 0 1px 0;
background:#fff;
}
div.tf-header img{
border:silver 1px solid;
margin:1px;
float:left;
width:32px;
height:32px;
}
div.tf-header h2{
line-height:32px;
font-weight:bolder;
display:block;
margin:3px;
padding:0;
float:left;
font-size:12px;
}
/**** for demo4 */
/* tweet item */
div.tf-tweet div{
border:silver 1px solid;
position:relative;
padding:1px;
margin:1px 0 0 0;
overflow:hidden;
height:50px;
background:#fff;
}
/* tweet author avatar */
div.tf-tweet span.tf-avatar{
display:block;
width:48px;
height:48px;
margin:0 2px 0 2px;
left:0;
position:absolute;
overflow:hidden;
}
/* tweet author name */
div.tf-tweet strong a{
margin-right:5px;
}
/* tweet body */
div.tf-tweet span.tf-body {
display:block;
margin-left:55px;
}
/* tweet content */
div.tf-tweet span.tf-content{
}
/* tweet date and source */
div.tf-tweet span.tf-meta {
color:#999999;
display:block;
font-size:0.764em;
margin:3px 0 0;
}
div.tf-tweet span.tf-meta a{
color:#999999;
text-decoration:none;
}
div.tf-tweet span.tf-meta a:hover{
text-decoration:underline;
}
/* tweet date link */
div.tf-tweet a.tf-date { }
/* tweet source link */
div.tf-tweet a.tf-source { }
/* tweet links */
div.tf-tweet a.tf-link { }
/* tweet @user links */
div.tf-tweet a.tf-at { }
/* tweet #hashtags links */
div.tf-tweet a.tf-hashtag { }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrapper">
<h1>設置サンプル</h1>
<p>参照：<a href='http://www.moretechtips.net/2009/10/twitter-friends-followers-widget-jquery.html'>Twitter Friends & Followers Widget - A jQuery Plugin!</a></p>
<!-- CODE -->
<h2>フォロワーリスト</h2>
<div class="some-fixed-width-container" style="width:242px">
<div id="friends"></div>
</div>
<h2>プロフィール＋フォロワーリスト</h2>
<div class="some-fixed-width-container" style="width:322px">
<div class="twitter-friends" options="{
debug:1
,username:'cocoism'
,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a><h2>_fo_ Awesome Follwers!</h2>'
,user_animate:'width'
,users:50
,user_image:32
}"></div>
</div>
<h2>友達リスト</h2>
<div class="some-fixed-width-container" style="width:242px">
<div class="twitter-friends" options="{
debug:1
,friends:1
,username:'cocoism'
}"></div>
</div>
<h2>プロフィール＋友達リスト＋友達のつぶやき</h2>
<div class="some-fixed-width-container" style="width:482px">
<div class="twitter-friends" options="{
debug:1
,username:'cocoism'
,friends:1
,tweet:1
,header:'<a href=\'_tp_\' title=\'follow me\'><img src=\'_ti_\'/></a><h2>_fr_ Friends / _fo_ Followers</h2>'
,loop:1
,users:50
,user_animate:'height'
}"></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>