吹衣轻飏

大家都知道twitter被GFW给隔离了,直接调用的话 对于那些没有翻墙的朋友是看不到的, 利用JSONP 通过国外的服务器来实现这个 是比较简单的方案.
大概原理是
1.服务器端.在一个不受GFW限制的主机上 我们需要一个程序 他的作用是代理发起一个HTTP请求 获取twitter API的数据, 然后经过简单处理返回这些数据.
2.客户端. 就是我们调用twitter的这个页面上只需要一些JavaScript 来配合服务端来显示这些数据.

说的可能不是很清楚 来看代码:

浏览器端javascript代码:

//用来处理twitter API 返回的JSON数据
function getTwitter(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('<li class="tweet">'+status+'<span class="time">'+relative_time(twitters[i].created_at)+'</span></li>');
	}
	document.getElementById('twitter_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 '刚刚';
	} else if(delta < 120) {
		return '1分钟前';
	} else if(delta < (60*60)) {
		return (parseInt(delta / 60)).toString() + ' minutes ago';
	} else if(delta < (120*60)) {
		return '1小时前';
	} else if(delta < (24*60*60)) {
		return + (parseInt(delta / 3600)).toString() + ' hours ago';
	} else if(delta < (48*60*60)) {
		return '1天前';
	} else {
		return (parseInt(delta / 86400)).toString() + ' 天前';
	}
}

服务器端代码,这里我们用PHP:

<?php
$call=trim(urlencode($_REQUEST['callback']));
$user=trim(urlencode($_REQUEST['username']));
$count=trim(urlencode($_REQUEST['count']));

echo $call.'('.file_get_contents('http://api.twitter.com/1/statuses/user_timeline.json?screen_name='.$user.'&count='.$count).')';
?>

另外最重要的一步, 在浏览器端 页面中还要插入一个请求:

<script src="http://idealoft.net/twitter/jsonp.php?callback=getTwitter&username=kele527&count=7" type="text/javascript"></script>
/*这个例子中我用的是自己的服务器(国外);
他接受3个参数,callback 回调函数, username 你要调用的twitter用户名, count 条数
callback 这个回调函数就是我们之前定义好的getTwitter()方法, 
script脚本请求到http://idealoft.net/twitter/jsonp.php?callback=getTwitter&username=kele527&count=7
这个链接返回的数据后 获得的其实是 getTwitter('......') 
这有点像在服务器端调用了前台定义的JS函数,这也是JSONP的基本原理.
*/

当然你也可以直接用http://idealoft.net/twitter/jsonp.php?callback=getTwitter&username=kele527&count=7 这个地址修改一下用户名参数 就可以在自己的博客上调用twitter了