Twitterの「ユーザーのタイムライン」と「検索結果」をコピペだけで簡単に表示できるサンプル

ユーザーのつぶやきと検索結果をJavascriptを使って簡単に表示することができます。
別にTwitterのウィジェットでいいじゃんという考え方と、自分のブログだから自分のテーマで表示させたい、という考え方があると思うんですが、僕は自分でやりたい派。

ユーザーのつぶやきを表示する

たとえば、id:ryownetのつぶやき最新10件はこんな感じで表示できます。(スタイル設定してません)。


    やべえ。今日(2010/11/15)の時点で最新10件取ったら17日前のツイートまで表示される。いかにTwitterを活用してないかがわかるね。

    まぁいいです。

    ユーザーのつぶやきを出すだけなら以下をそのまーんまコピペ。

    <ul id="twitter_update_list"></ul>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
    </script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ryownet.json?callback=twitterCallback2&count=10">
    </script>
    

    検索結果(リアルタイム自動更新)を表示する

    「#ganalytics」の検索結果10件。

    forked from: ハッシュタグなどでtwitter検索した結果を表示して自動更新する | モーグルとカバとパウダーの日記

      <ul id="twitter_update_list1"></ul>
      <script type="text/javascript">
      var TwitterSearch ={
      word:"",
      count:"",
      targetElement:"",
      api_url:"",
      start:function() {
      var update_time = 2*60; // sec
      var callback_func = "TwitterSearch.searchCallback";
      this.api_url = "http://search.twitter.com/search.json?q="
      +encodeURIComponent(TwitterSearch.word)+"&rpp="+TwitterSearch.count+"&callback="+callback_func;
      TwitterSearch.callJSONP();
      timerID = setInterval(function(){
      TwitterSearch.callJSONP(api_url)
      },update_time*1000);
      },
      searchCallback:function(searchs) {
      var s = TwitterSearch.convertSearchedTweets(searchs);
      var target = document.getElementById("twitter_update_list1");
      target.innerHTML = s;
      },
      convertSearchedTweets:function(searchs) {
      var s="";
      for(var i in searchs["results"]){
      var username = searchs["results"][i].from_user;
      var id = searchs["results"][i].id;
      var profile_image_url = searchs["results"][i].profile_image_url;
      var reltime = relative_time(searchs["results"][i].created_at);
      var status = searchs["results"][i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
      }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
      });
      s+='<li><img src="'+profile_image_url+'" width="48" height="48"> <a href="http://twitter.com/'+username+'">'+username+'</a>:<span>'+status+'</span><br /><a style="font-size:85%" href="http://twitter.com/' +username+'/statuses/'+id+'">('+reltime+')</a></li>';
      }
      return s;
      },
      callJSONP:function(){
      var target = document.createElement('script');
      target.charset = 'utf-8';
      target.src = this.api_url;
      document.body.appendChild(target);
      }
      };
      </script>
      <script type="text/javascript">
      TwitterSearch.word = "#ganalytics";//ここを検索ハッシュに変更してね
      TwitterSearch.count = 20;//表示件数
      TwitterSearch.targetElement = "twitter_update_list1";//表示用DOMのID
      TwitterSearch.start();//スタート
      </script>
      

      あれ?FirefoxとChromeではうまくいったのに、IE8だとエラーになるや。まぁいいか。