Designsor

咳咳，当然大家都知道推特是被墙的。

那么，翻墙好了，咳咳。

还记得以前饭否么，恩，饭否可以有一个小的flash插件挂在自己的BLOG上，有段js调用，就可以实时更新自己的状态。那时候还觉得，我擦，真神奇，现在想想，其实也就是个内部的api。

今天逛别人blog，看到了一个小应用，就是类似以前饭否的那个东西，只不过数据是twitter的。我一看，哎呀，自己也做个吧。方便一些观众更加了解我，也方便自己更进一步的装X。

看下首页右下角，如图：

额，首先把实现思路和大家说下，由于最近做小偷程序做的太多了……（低头），我第一个实现方法就还是那些老套路。。

恩，那么继续，api是我自己的，由于我的WordPress服务器在美国，所以基本不存在翻墙的问题，访问下面的地址你就懂了。

http://www.designsor.com/demo/tw/curl.php?url=http://twitter.com/xiao_jue/

恩，简单的一个curl翻墙，php代码如下：

<?php
$url=$_GET['url'];
$ch = curl_init($url);
curl_exec($ch);
//echo $ch; 可以删掉了，具体为什么见4楼……
curl_close($ch);
?>

主要就是借助我国外的主机，抓取了一下被墙的页面……

之后嘛，嘿嘿，要制作这个twitter小玩意就好办多了。

js部分代码：

/*@author xiaojue*/
/*twitter prowed by jqueryAjax*/
$.ajax({
url:’http://www.designsor.com/demo/tw/curl.php?url=http://twitter.com/xiao_jue/’,
type:’get’,
success:function(html){
var reg=/.*?<\/span>/ig; //2条抓数据的正则
var reg2=/.*?<\/span>/ig;
var time=html.match(reg2); //获得时间
var tw=html.match(reg); //获得我说的话
time=time.slice(0,10); //取前10条
tw=tw.slice(0,10).join(”);
$(‘#tw’).html(tw);

//把时间加入到说过的话的下面，并且添加hover效果事件。

$(‘#tw span’).each(function(i){
$(this).after(time[i]);
$(‘a’,this).click(function(){return false;})
}).hover(function(){
$(this).css({‘color’:'#336699′})
},function(){
$(this).css({‘color’:'#666′})
});

//设置抓取来的时间部分的样式
$(‘#tw span:odd’).each(function(i){
$(this).css({‘border-bottom’:'#ccc dashed 1px’,'padding’:'5px 0px’,'font-size’:'9px’,'color’:'#666′});
});
},
error:function(){
$(‘#tw’).text(‘加载twitter数据失败’);
}
});

js部分应该很容易懂，其实就是分析了下twitter的页面html结构，然后写了2条正则，处理了下自己的blog页面的html，添加了几条样式。就齐活了。

主要提供一个抓取外加翻墙的思路，如果你也想做一个类似的东东而没有看懂上面的某个部分，欢迎留言交流或者gtalk我！

Tags: twitter, 抓取处理网页HTML, 翻墙展示twitter数据

This entry was posted on 星期一, 6月 7th, 2010 at 12:55 上午 and is filed under 前端开发. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.