▼Twitterに最近投稿されたつぶやきを取得して吹き出し表示します。
<!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>jQuery and PHP ajax lastest Tweet | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#content").hide();
$("#content").load("include/topic/twitter_jquery/tweetbasic/tweet.php", function(){
$(this).fadeIn();
$("#loading").hide();
});
});
</script>
<!-- CSS -->
<style type="text/css">
body { background:#fff; }
#demo {
width:600px;
margin:20px;
}
#pic {
width:127px; height:150px;
float:left;
background:transparent url("include/topic/twitter_jquery/tweetbasic/twitter.jpg") no-repeat 0 0;
position:relative;
}
#name {
width:127px;
position:absolute;
bottom:0; left:0;
text-align:center;
}
#speech {
float:left;
width:260px; height:93px;
color:#000;
background:transparent url("include/topic/twitter_jquery/tweetbasic/speech.jpg") no-repeat 0 0;
padding:15px 20px 0px 140px;
}
#loading {
padding-left:100px;
background:transparent url("include/topic/twitter_jquery/tweetbasic/ajax-loader.gif") no-repeat 0 0;
width:54px; height:54px;
}
.clear {
clear:both;
}
#name {
text-align:center;
font-weight:bold;
}
#logo {
width:302px;
margin:0px auto;
}
#title {
text-align:center;
}
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.codetricky.com/2009/06/use-twitter-api-and-jquery-to-display-lastest-tweet-part-1-the-basics/'>Use Twitter API and jQuery to display lastest Tweet: Part 1 The Basics</a> | 設置サンプル</h1>
<p>▼Twitterに最近投稿されたつぶやきを取得して吹き出し表示します。</p>
<!-- CODE -->
<div id="demo">
<div id="pic">
<div id="name">cocoism Says</div>
</div>
<div id="speech">
<div id="content"></div>
<div id="loading"></div>
</div>
<p><br class="clear" />
</div>
<!-- / CODE -->
</div>
</body>
</html>