jQueryを用いたtwitterの呟きをWebページに表示させるスクリプト[js]

Displaying Your Tweets On Your Website With jQueryのエントリーより、jQueryを用いたtwitterの呟きをWebページに表示させるスクリプトの紹介です。

デモページはこちらから

jQueryを用いたtwitter関連のスクリプトやプラグインなどは他にもあると思いますが、このスクリプトは本当に簡単です。設置方法は以下です。

jQueryをhead要素の範囲以内に設置します。（お約束）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

HTMLとjQueryは下記のように記述するだけです。

HTML

<div id="tweets">
	<h3 id="error">There was a problem fetching tweets</h3>
	<h3 id="preload">Currently loading your tweets...</h3>
</div>

jQuery

function showTweets(elem, username, number){
	var html = '<ul>';
	var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
	$.getJSON(tweetFeed, function(d){
		$.each(d, function(i,item){
				html+='<li>'+item.text+'</li>';
			})
			html+="</ul>";
			elem.children().fadeOut('fast',function() {
			elem.append(html);
		})
	})
}
$(function() {
	$('#error').remove();
	$('#preload').show();
	showTweets($('#tweets'), 'ここにtwitterのユーザネーム', 5)
});

たったこれだけです。非常に簡単です。

デモページでも、分るかもしれませんが、CSSがありませんのでデザインをされていない状態になっていますので、CSSは各自で指定し、好きなようにデザインしてください。

なお、上記ｊQueryのソースコードの2行目の

var html = '<ul>';

に、下記のようにclass属性、もしくはid属性を加えて、CSSでデザインするようすればデザインしやすくなるかと思います。

var html = '<ul class="tweetsList">';

もしくは、HTMLに記述されている

<div id="tweets">

の直下に生成されるので、下記のようにCSSをくんでも問題ないです。

#tweets ul{
	<!-- CSSをここに記述 -->
}