Twitter小栏目代码问题及博客的一些变更

作者: ふわふわ鳳梨派日期: 2010-03-05 22:11

字体大小: 小中大

From カイセン http://www.pixiv.net/member_illust.php?mode=medium&illust_id=5913649

昨天把『少女進行時』里面的栏目整合了一下，主要是把几个不可能再扩充内容进去的子栏目根据属性并成了两个子栏目，其他视频之类的归类到视频类子栏目下。这样『少女進行時』这个大栏目就有种“清爽啦”的感觉了。另外，今天为了适应日益增多的推特应用，把原来饭否的右边侧栏改造成了Twitter的实时更新。为了这个更新，今天忙了足足一个下午，先是架设Twip 3.0的时候，发现不管怎么引用都没有用。然后换回Twip 2.1后，又是一阵设置，设置完了还是没办法显示推特的消息。这时候我才想到排查一下代码是否有问题，嘿，还真是代码出问题了。大概是写代码的时候没注意“‘和"'的区别，导致大部分该是"'的地方都写成了“‘，怪不得系统总是显示无法载入JavaScript。改完之后，再修修补补一下一些小的疏漏和版面编排问题，终于让这个原来因为饭否而隐藏掉的栏目复活啦！

<div id="twitter_div" style="margin-left:-25px;">
<h2 style="display: none;" >Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/您的TwitterID" id="twitter-link" style="display:block;text-align:right;">来推我呀！</a>
</div>
<script type="text/javascript" src="http://API程序地址/twitter.js"></script>
<script type="text/javascript" src="http://API程序地址/statuses/user_timeline/您的TwitterID.json?callback=twitterCallback2&count=8"></script>

然后还要自己写一段JS码，保存为twitter.js，存放到API程序地址的路径下，这样就可以引用了。另外，API程序地址这里要填写您自己的，如果您没用Twip自己建立一个的话，可以去网上找找有没有别的您可以用的API程序。我架设的Twip服务，因为考虑到一些安全因素和空间环境，不对外开放，引用了也没有用。我已经限制只有我自己的推特账号才能使用。所以，翻源代码的同学就不要窃喜了。

附上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://API程序地址/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://API程序地址/'+username+'/statuses/'+twitters[i].id+'">'+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';
}
}

把代码复制黏贴一下就行了，这代码虽然也是参考别人的，但是搞懂这个花去了整整一个下午，累死人了。不过搞懂之后也是有好处的，理解了Twip的作用后，就能用一些基于API的桌面客户端了。我现在用的是Twhirl，简单照着网上的教程设置API接口之后，使用起来完全没有问题，速度也很流畅，也算是对今天一下午付出的一个小小的回报吧！

页面风格符合我的喜好，速度也快：