2009/8/5

MovableTypeにTwitter Badgeを使ってTwitterタブを用意した

以前、MovableTypeにTumblr APIを使ってTumblrタブを用意したというのをやりましたが、それのTwitter版です。Twitter APIでやろうとしましたが、Twitter Badgeというのがあるので、そちらをカスタマイズすればいいやということに。

20件表示するように設定して、ソースをコピー。で余計なソースを削りつつ、タブパネルに組み込みます。で、ちょっとデザインのカスタマイズもしたいので、blogger.jsをダウンロードしてきて、ちと改変しうちのサーバにアップ。

<div class="TabbedPanelsContent">
<ul id="twitter_update_list"></ul>
<script src="<$MTBlogURL$>js/twitter.js" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/kosuk.json?callback=twitterCallback2&amp;count=20"></script>
</div>

twitter.jsの中身はこちら。太字が変えたところ。

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(‘<a href="http://twitter.com/kosuk"><img src="http://kkpdo.sakura.ne.jp/kosukekato/wp/js/sml.jpg" style="float:left;margin:0px 10px 10px 0px;" /></a><li><span>’+status+'</span> <a style="font-size:85%" href="http://twitter.com/’+username+’/statuses/’+twitters[i].id+’">’+relative_time(twitters[i].created_at)+'</a><br clear="all" /></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’;
}
}

というわけです。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円