Twitter APIで検索結果を表示

| コメント(0) | トラックバック(0)
このエントリーをはてなブックマークに追加

Twitterの公式ウィジェットを使いたくなくて、なんとか自作する方法を探してみた所、下記のサイトが参考になりました。

Twitter-APIを使ってみました
jsonpでtwitterAPI利用メモ【jQuery】

無事完成したコードは以下。
要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);
   });
  }
 });
}

課題

エラー処理が上手くいってないので削除中。 投稿時間が標準時になってる。

トラックバック(0)

トラックバックURL: http://www.kazuwaya.jp/mt/mt-tb.cgi/157

コメントする