不明真相的群众！: [GFW BLOG] 国内（大陆）用户适用的twitter博客挂件

2010年6月7日星期一

[GFW BLOG] 国内（大陆）用户适用的twitter博客挂件 | unGFW twitter widget

来源：http://banux.blogbus.com/logs/64853908.html

众所周知twitter|推特被墙，它提供的widget自然就没法使用了。靠第三方API支持穿越的widget一般都不那么靠谱，非要有靠谱的twitter widget就要花钱（例如：Widgetbox › Twitter Widget ，免费的是低级Flash版，外观简单且无法自定义，高级版则需要付钱）

...直接忽略什么脆弱的第三方API吧，我们有更强大的yahoo数据查询！（其实就是RSS的间接输出）

原理不算复杂，利用yahoo的YQL这个玩意在墙外查询获得RSS数据然后再通过本地的Javascript提取输出。

关于YQL这个东东，访问：http://developer.yahoo.com/yql/

用YQL查询twitter消息rss的表达式：

select * from rss where url='https://twitter.com/statuses/user_timeline/chinesekids.rss' limit 5

获得XML或者JSON这样的轻量级数据交换格式，然后使用Javascript可以对JSON数据选择性输出。

废话少说，直接列出可供使用的Html & Javascript代码（红色字体为用户名和显示的tweet条数，请自行修改，推荐这些代码放在Blogbus等博客的自定义html模块里）：

<div id="twitterwidget">载入ing...</div>
<script>
function showitems(data){
   var items = data.query.results.item;
   var tlist = '';
   for(var i=0;i<items.length;i++){
       tlist += '<div class="tMsg">';
       tlist += items[i]['title'];
       tlist += '<div class="tDate">';
       tlist +=items[i]['pubDate'];
       tlist += '</div>';
       tlist += '</div>';
   }
   document.getElementById("twitterwidget").innerHTML = tlist;
}
var userName = "chinesekids";
var limit = 5;
document.write('<script src="https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D\'https%3A%2F%2Ftwitter.com%2Fstatuses%2Fuser_timeline%2F'+userName+'.rss\'%20limit%20'+limit+'&format=json&callback=showitems"><\/script>');
</script>

添加自定义CSS代码美化一下：

.tMsg {
border-bottom:1px dashed #CCCCCC;
height:100%;
margin:0;
overflow:hidden;
padding:10px 10px 5px;
position:relative;
letter-spacing:0em;color:black;
}

.tMsg:hover {
background-color:#F3F6F7;
}

.tDate {
color:#0082CB;
font-size:9px;
float:right;
}