发新话题
打印

国内适用的博客twitter挂件

国内适用的博客twitter挂件

来源: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['title'];
        tlist += '<div class="tDate">';
  
     tlist +=items['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"


人又不是為了遠大的目標而活著,渺小的目標才能成為生存意義

TOP

技术普及~~这个要顶~~~一下~~~

不过。。已经完全习惯用手机来玩twitter了。。。比较省心。。。

TOP

发新话题
最近访问的版块