为博客侧边栏添加 twitter 挂件,此挂件来自 twitter 官网,一共有Profile Widget,Search Widget, Faves Widget,List Widget 四种模式。以 Profile Widget 为例,其功能是显示用户最近的几条推。进入 Profile Widget 页面,在左边的 setting 里填入你的 Username ,右边就会显示出挂件的预览效果,如果不满意,可以进入 apperance 等进行自定义,颜色可以通过代码精确的设置,利用这个小软件 下载 可以获得网页上任意像素的颜色代码,就可以设置成隐藏 bar 的效果了。
设置满意后获取代码如下:
因为用的是官方 api,这样直接贴到 sidebar.html 里肯定是要被墙的,所以要进行一些修改,代码的第一行调用了这样一个 js 文件 http://widgets.twimg.com/j/2/widget.js ,我们先用浏览器把它下载来看看。
随便找个差不多点的文本编辑器打开下载到的 widget.js,可以看到代码都密密麻麻的挤在一起了,但是别怕,只需用文本编辑器的替换功能将所有的 http://twitter.com/ 替换成你的 twitter 的 api 地址,注意要保证所替换的 api 地址以 “ / ”结尾。保存修改好的 widget.js。
将上段代码中的 http://widgets.twimg.com/j/2/widget.js 替换成 http://你博客的域名/static/js/widget.js ,然后将修改好的代码复制到 sidebar.html 中。
设置满意后获取代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < script src = "http://widgets.twimg.com/j/2/widget.js" ></ script > < script > new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('Tsquall0629W').start(); </ script > |
随便找个差不多点的文本编辑器打开下载到的 widget.js,可以看到代码都密密麻麻的挤在一起了,但是别怕,只需用文本编辑器的替换功能将所有的 http://twitter.com/ 替换成你的 twitter 的 api 地址,注意要保证所替换的 api 地址以 “ / ”结尾。保存修改好的 widget.js。
将上段代码中的 http://widgets.twimg.com/j/2/widget.js 替换成 http://你博客的域名/static/js/widget.js ,然后将修改好的代码复制到 sidebar.html 中。
如果搞不定 api 的话,就把前面调用的 http://widgets.twimg.com/j/2/widget.js 直接改成 http://gayiorg.googlecode.com/files/widget12.js 就行了。
No comments:
Post a Comment