Twitterの公式ウィジェットを使いたくなくて、なんとか自作する方法を探してみた所、下記のサイトが参考になりました。
無事完成したコードは以下。
要jqueryです。
完成コード
htmlに記述
<div id="twttierInner">
<p class="loading">読み込み中......</p>
<!-- /twttierInner --></div>
<script type="text/javascript">
$(function() {
searchTwitter("検索キーワード");
});
</script>
<script src="/common/js/jquery.twittersearch.js"></script>
読み込むscriptに記述
function searchTwitter(query){
$.ajax({
url: "http://search.twitter.com/search.json",
data: {
q: query,
rpp: 30
},
dataType: "jsonp",
success: function(data){
$("#twttierInner").empty();
$.each(data.results, function(i,item){
var profile_image_url = item.profile_image_url;
var created_at = item.created_at;
var from_user = item.from_user;
var to_user_id = item.to_user_id;
var text = item.text;
var id = item.id;
var from_user_id = item.from_user_id;
var geo = item.geo;
var source = item.source;
var created_at = created_at.slice(0, 25);
var html = '<div class="article">'
+'<p class="pic"><a href="http://twitter.com/'+ from_user +'"><img src="'+profile_image_url+'" alt="'+from_user+'" width="48" height="48"></a></p>'
+'<p class="text"><a href="http://twitter.com/'+ from_user +'" class="userId">' + from_user +'</a>'+ text + '</p>'
+'<p class="time">'+created_at+'</p>'
+'</div>';
$("#twttierInner").append(html);
});
}
});
}
コメントする