2007/08/14

幫你的 twitter badge 換新妝吧!




使用twitter的人愈來愈多, 利用twitter也可以像公佈欄一樣, 公佈訊息.只是目前twitter提供可放在部落格的範本很少, 而且有呈現字體太小的問題.

如果想要做一個與眾不同的twitter badge, 怎麼做呢?




目前Twitter官方提供的twitter模式有這幾種, 運用這些程式碼, 再加一張圖片. 可以做一個不一樣背景的twitter badge.



要加上一段程式碼, 不過呢, 要先準備一張圖片. 記得圖片大小不能超過你想放部落格位置的範圍哦!

1.如我想放的側邊欄, 寬200, 所以我做了一張圖片, 是白色背景的圖, 寬度200px, 長度161px.

2.上傳到一個網路空間後, 取得圖片網址.


3.再來就是要找到自己在twitter的編號了, 在自己的twitter首頁, 如http://twitter.com/skyvee/ . 滑鼠移到左下角的rss feed, 就會看到瀏覽器最下方的狀態列, 會出現一串網址, 其中 數字.rss 那個數字就是你的twitter編號了. 記住這個數字吧!



4. 接下來是要把下列的程式碼改成你的.紅字部分就是要修改的部分.

width : 圖片寬度
height : 圖片高度
cellspacing : 指的是表格邊界與表格內的單一格子之間的距離,可設為0
cellpadding : 指的是表格內的單一格子中的內容與格子的距離, 也可設為0
圖片網址 : 存放圖片的地方
div align : 段落對齊的方式, center:置中, right: 靠右, left: 靠左
XXXXXX : 上述步驟3的twitter 編號
count : 希望顯示最近幾則的訊息


<table height="161" width="200" cellSpacing="15" cellPadding="0" background="圖片網址" border="0">
<tr>
<td vAlign="top">
<div align="center"><span class="entry">
<script type="text/javascript">
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 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (45*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (90*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}

function twitterCallback(obj) {
var id = obj[0].user.id;
document.getElementById('my_twitter_status').innerHTML = obj[0].text;
document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj

[0].created_at);}
</script><span id="my_twitter_status"></span><br/>
<span id="my_twitter_status_time"></span>
<script src="http://www.twitter.com/statuses/user_timeline/XXXXXX.json?callback=twitterCallback&count=1"
type="text/javascript"></script>
</span></div>
</td>
</tr>
</table>


步驟有點多, 不過搞定後, 就可完成一個自創的twitter badge啦!

相關文章 :

9 comments:

匿名 提到...

skyvee 站長您好,

首先抱歉佔用站長留言版面,
在下 Glen, 目前正在製作一個書籤分享平台 ( www.all1see.com ) ,
經過近日瀏覽, 發現站長的網站擁有很優質的內容,
因此希望有榮幸可以邀請站長來試用在下的書籤分享平台.
本站目前還在內部測試階段, 所以並沒有完全對外開放 ( 也沒有註冊機制 ).
在下先暫時幫站長設定了一個試用帳號如下,

帳號 skyvee
密碼 skyvee2312

還請站長抽空利用上面的帳號密碼來 All1See 看看, 謝謝.

ps.
了解事實上台灣已經有不少書籤網站,
有關本網站的建立理念及想法, 因為有點長所以沒有直接發在站長的留言版,
還請站長登錄本站之後, 先移駕至 http://www.all1see.com/readme.php 了解. 感謝.
Glen ( glen.su@gmail.com )

barleybag 提到...

skyvee,妳實在是太厲害了!!!!
這個也會,那個也會,讚讚讚.

Skyvee 提到...

Glen 你好,

謝謝您的邀請. 這是我的榮幸.

不過那個帳號密碼我進不去呢..還是您可以重設一下, 寄到我的email?
skyvee886 AT gmail.com

Skyvee 提到...

barleybag,

別說笑了... 我還是滿心期待閣下的部落格開張呢!

hikawac 提到...

太感謝了
晚點再來試試看!!

Skyvee 提到...

hikawac, 不用客氣.:)

ice 提到...

請問這個可以改字的顔色嗎?

小牛 提到...

Hello skyvee,

無意間逛到你的站來, 發現許多好東西
真是謝謝你的分享!!

剛剛試了一下你說的twitter badge
可是我弄不出像你效果唷~
看了好幾次, 不明白哪裡出了錯
可以麻煩你幫我看一下嗎? 感激不盡

http://nzmoomoo dot blogspot dot com

Skyvee 提到...

小牛, 我剛看了你的部落格, 似乎已經用好了? 看起來效果不錯啊! ^^

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.