米が好き

タイトルにWordPressと付けていますが、勿論普通のHTMLサイトでも使えます。
検索すると結構な数がヒットするかと思います。

まず目を付けたのがこのサイト。
Twitterが公式に公開している（？）JavaScriptを使っての表示方法。

次に目を付けたのがこのサイト。


どちらも一長一短。
公式の方は時間や曜日表記が公式サイトと同じ。
2つ目の方は時間・曜日はカスタマイズ出来るのに対し、リンクが貼られない。
うーむ。　と迷った後、「じゃ、2つ合体させればよくね？」って事で合体させました。

JavaScriptのコードは最後に書いていますが、今回もダウンロードした方が早いと思います。

ダウンロードはこちらから。　（右クリックで保存してください）

ダウンロードした『twitter.js』を好きな所に放り込んで、フッターにJavaScriptを書き込みます。
以下はWordPressのテンプレート内のjsフォルダ内に置いた例。

  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/twitter.js"></script>
  <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/kuu_san.json?callback=twitterCallback2&count=3"></script>
</body>
</html>

赤字の所に自分のアカウント名と表示させる数を入力します。
後は実際にTwitterのTLを表示させたい箇所に以下のコードを書くだけです。

<ul id="twitter"></ul>

後はCSSで表示形式を整えるだけです。

#twitter {
  margin-bottom: 5px;
}

#twitter li {
}

#twitter li .name {
  border-bottom: 1px dotted #ccc;
}

#twitter li .time {
  text-align: right;
}

上記の例だと、以下のような表示になります。


最後にJavaScriptの全文。
表示方法など変えたい場合は、JavaScriptをいじるだけで簡単に変更出来ます。

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    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>';
    });
    statusHTML.push('<li><div class="name">'+status+'</div><div class="time"><a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></div></li>');
  }
  document.getElementById('twitter').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);
  var dt = new Date();
  dt.setTime(dt.getTime() - (delta*1000));
  yy = dt.getYear();
  mm = dt.getMonth() + 1;
  dd = dt.getDate();
  dy = dt.getDay();
  hh = dt.getHours();
  mi = dt.getMinutes();
  ss = dt.getSeconds();
  if (yy < 2000) { yy += 1900; }
  if (mm < 10) { mm = "0" + mm; }
  if (dd < 10) { dd = "0" + dd; }
  dy = new Array("日","月","火","水","木","金","土")[dy];
  if (hh < 10) { hh = "0" + hh; }
  if (mi < 10) { mi = "0" + mi; }
  if (ss < 10) { ss = "0" + ss; }

  return yy+"/"+mm+"/"+dd+"("+dy+") "+hh+":"+mi+":"+ss;
}

私は秒表示は要らなかったので、赤字のコードは省いています。
もし表示させたい場合は、上記のように書けばOKです。

プラグインも入れすぎると重くなる（？）し、ややこしくなるし、使わずに出来る事は使わない方が良いのかも。