Tag Archives: 侧栏

为你的PJBlog加上Twitter模块

在我的BLOG首页侧边栏,你可以看到我的Twitter模块。实现起来非常简单,Twitter提供了API接口,只需要写少少代码,就可以实现该模块。
Twitter JSON数据接口:http://twitter.com/statuses/user_timeline/15978541.json?callback=twitterCallback&count=5
15978541.json  前面这一串数字是你的用户ID,你可以在你的Twitter首页左下角的RSS链接中找到他。
twitterCallback  这是一个JS函数,只要你预先定义好它(在本文末尾下载)。然后用js的方式引入Twitter的这个链接。
count  引用Twitter条数
函数我已经写好了,所以只需要写进入到PJBlog的后台>>界面与插件>>设置模块
然后添加一个模块:侧栏,模块标识:MyTwitter,模块名称:我的Twitter,保存之后,编辑该模块的HTML,在里面写入:

<p id=”myTwitter”>正在加载…</p>
<script type=”text/javascript” src=”common/myTwitter.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/15978541.json?callback=twitterCallback&count=5″></script>

common/myTwitter.js里面包含我写好的twitterCallback函数,后面调用的就是twitter的JSON API接口。
打包下载:点击下载此文件解压到你的Blog目录即可。
当然,你还可以在Blog风格的CSS样式里加上一些CSS,用来修改Twitter的显示效果。

ol#myTwitter {list-style:none; margin:0; padding:0;}
ol#myTwitter li {margin-bottom:5px; padding-left:15px; line-height:16px; background:url(../../skins/ye_v2/twitter.gif) no-repeat;}
ol#myTwitter li a {font-style:italic;color:#666;}
ol#myTwitter li a:hover {color:#000;}