スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

Twitter HTMLウィジェットで検索結果を表示する方法

TwitterのHTMLウィジェットは、通常プロフィールの表示にしか対応していないが、
少しソースを修正して、検索結果を取得できるようにしてみた。

通常の検索ウィジェットはJSONから指定できる以外のCSSの影響範囲が分かりづらいので、
HTMLウィジェットの方がカスタマイズの幅が広いように思う。
プログラムが制限されている環境では特に役に立ちそうだ。


API v1.0からv1.1への移行に伴い、Twitter公式ウィジェットが利用できなくなりました。
「埋め込みタイムライン」を利用することで、ウィジェットに検索結果を表示できます。
埋め込みタイムラインの利用方法は、こちらを参照ください。


HTMLウィジェット作成ツール(要ログイン)で出力されるHTMLは以下のとおり

  <div id="twitter_div">
  <h2 class="sidebar-title">Twitter Updates</h2>
  <ul id="twitter_update_list"></ul>
  <a href="http://twitter.com/gw_staffs" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
  </div>
  <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
  <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/gw_staffs.json?callback=twitterCallback2&count=5"></script>


このソースを切り貼りして、以下のように修正した。

 <head>
<!-- 以下はblogger.jsの内容を一部修正したもの-->
  <script type="text/javascript">
   function twitterCallback(result) {
    var statusHTML = [];
    <!-- 以下、APIから取得したJsonの形式が異なるため調整 -->
    var twitters = result.results;
    for (var i=0; i<twitters.length; i++){
     <!-- ユーザ名の取得先の項目名を変更 -->
     var username = twitters[i].from_user;
     var status = twitters[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>';
     });
     <!-- Tweet投稿者の名前も表示してみた -->
     statusHTML.push('<li><span><a href="http://twitter.com/'+username+'">'+username+"</a>: "+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].from_user_id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
    }
    document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
   }

   function relative_time(time_value) {
    var values = time_value.split(" ");
    time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
    var parsed_date = Date.parse(time_value);
    var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
    var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
    delta = delta + (relative_to.getTimezoneOffset() * 60);

    if (delta < 60) {
     return 'less than a minute ago';
    } else if(delta < 120) {
     return 'about a minute ago';
    } else if(delta < (60*60)) {
     return (parseInt(delta / 60)).toString() + ' minutes ago';
    } else if(delta < (120*60)) {
     return 'about an hour ago';
    } else if(delta < (24*60*60)) {
     return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
    } else if(delta < (48*60*60)) {
     return '1 day ago';
    } else {
     return (parseInt(delta / 86400)).toString() + ' days ago';
    }
   }
  </script>

  <style type="text/css">
   <!-- 適当にデザインを調整 -->
   #twitter_update_list ul {
    margin:0px;
    padding:0px;
   }

   #twitter_update_list li{
    margin-left:-30px;
    list-style: none none outside;
    font-size:13px;
   }

   #twitter_div {
    overflow:hidden;
    display:block;
    height:500px;
    width:300px;
    background-color:#CCCCCC;
    padding:5px;
   }
  </style>
 </head>
 <body>
  <div id="twitter_div">
  <h2 class="sidebar-title">prayforjapan</h2>
  <ul id="twitter_update_list"></ul>
  </div>
  <!-- APIの繋ぎ先を変更し「tweet」という単語での検索結果をjson形式で取得-->
  <script type="text/javascript" src="http://search.twitter.com/search.json?q=tweet&callback=twitterCallback&rpp=5"></script>
 </body>


javascriptでHTMLタグを作り出している部分を修正してゆけば、
リストタグにも縛られずHPに自然な形で検索結果のTweetを埋め込むことができそうだ。


以下にサンプルを用意した。
Twitter HTMLウィジェットで検索結果を表示する
関連記事
スポンサーサイト



  

テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。