国内(大陆)用户适用的twitter博客挂件 | unGFW twitter widget – [Web Hack]

2010年8月13日 | 分类: 搭建博客 | 标签: , , , ,

众所周知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>’;
tlist += items[i][‘title’];
tlist += ‘<div>’;
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;
}

实现效果如图:

也可以查看我的首页的侧边栏“twitter @Chinesekids”模块。

你可以叫这个玩意为“unGFW twitter widget”

地址:

  1. tom
    2010年8月13日20:21

    的确是没有看懂,说明中的红色代码和图示都看不到,,,

    • iGFW
      2010年8月13日22:06

      嗯,有点问题,看原文吧

  2. nogfw
    2010年8月13日16:42

    不懂