[網路] 用自己的相片製作 twitter badge：Twitter Balloon
分類 網路實作 | 標籤 twitter, 工具, 網路| 時間 10/06/2007 07:15 下午 | 作者 迴紋針| 5,909 次閱讀
Twitter 前幾天改版，表面上看起來其實變動不大。只是有別於 web 2.0 的網頁圓滑設計，在介面上反而變的比較方方正正、井井有條一點。重度使用者，如我，常常更新自己的目前狀態，就算人在外面沒電腦可以上網時，還是可以用手機 3G 連上去，看網路朋友的最新消息，或者僅僅發簡訊，好更新自己的最新狀態與心情。
新改版的結果，移除 「badge 製作」的連結（更新：twitter又將製作badge的頁面放出來了，請點這裡）。badge 的功能就是可以把自己最新更新的狀態，用一個「標章」的方式，放在自己的部落格邊欄。我一直以來都是用 twitter 提供的 badge，不過昨天在網路上逛的時候，不知從哪裡看到有這樣一個「用自己的照片製作 twitter badge」的產生器。自己試玩了一下，效果不錯，所幸就整個換過來，在這裡也把教學順便寫一下。
這個產生器的作者是一個日本人，但網頁有提供英文版本，加上只要輸入一些數值，就可以產生語法，非常容易使用。
請注意，此語法為 java script 語法，因此 無名小站之 非VIP 會員，無法使用。現在無名非 vip也可以用java script了，是吧？那就OK囉！
請點這裡進入產生器網頁：Twitter Balloon ← 2008.08.28 更新連結，繁體中文網站
以下這兩張圖，應該就可以說明所有數值之設定，但我還是把要注意的地方稍微提一下。
1. 以自己部落格邊欄的寬度而定
3. 網路相片的網址。無名小站的相片，不能外連喔！如果要用別人照片的朋友，要注意這點。另外，相片不能比 badge 還小，不然解析度會變差。
▲ 這張圖就是上面數值設定的預覽對應
16. 複製語法。先貼在記事本上吧！
這裡來解釋一下複製下來的語法，讓對一向看到語法就頭痛的朋友，也可以輕鬆修改、微調自己的 badge。
圖中畫紅色底線的部分就是剛剛在網頁裡的設定項目，例如 img url= 相片網址、balloon_bgcolor=氣球對話框底色…等等，順序跟產生器上的一模一樣，可以自己對一下。認清了這些語法代號後，以後不用連到產生器網頁，也可以自己 copy 下來修改。
中間那一大串最後有個 width=”180″ height=”310″，就是整個 badge 的寬與高。同樣地，如果產生語法後，貼到自己的部落格上，發現效果不是那麼好時，可以直接改這兩個數值，儲存後重新整理看看效果。不用老是仰賴產生器。
最後，「badge以外的連結設定」所指的就是第二張圖中 badge 最底下的那兩行。各位可以比對一下，這第二張圖，跟我現在網頁上的有點不同。這裡就是可以動手腳的地方了。語法中，我畫黃線的部分，就是可以改成你想要的文字，例如中文。像我，是改成「回顧迴紋針的碎碎念」。
這個個性化的 twitter 氣球對話框，目前我覺得比較麻煩的地方就是字體大小。以前 twitter 官方提供的 badge 字體大小也可以藉由調整語法中的數值做更改，適合各種網頁的呈現。但現在這個似乎就找不到地方調整了。我自己在家用 notebook 小螢幕看就顯得模糊了點。
十月 6th, 2007 at 20:54
以為迴紋針返老還童了
哈哈
這個不錯用喔
找時間來試試看
此刻我家風雨交加
大到不會形容了= =
十月 7th, 2007 at 01:13
謝謝老師的指點啊，自己產生的語法方便多了
十月 7th, 2007 at 03:07
這個twitter badge好可愛！好可愛！好可愛！好千尋！
（我來亂的，可以不要理我XD）
十月 7th, 2007 at 04:17
謝謝喔^^
真可愛耶
十月 7th, 2007 at 04:30
老師
現在無名非VIP也可以使用 java script了
好像是不久前開放的吧~
十月 7th, 2007 at 09:46
^0^
阿阿阿~~這個好可愛！
妹妹很適合當顯示照片
一下就抓住人的目光
十月 7th, 2007 at 18:59
小魚，thanks for the update!
十月 8th, 2007 at 01:12
謝謝迴紋針老師的介紹,真是不錯用的東西!!
乾脆直接將他中文化好了…
badge以外的連結設定部分,我看大家因該都想拿掉
所以就直接拿掉它了!![angel]
十月 8th, 2007 at 09:05
迴紋針老師~其實Timk會決定在程式碼拿掉的原因是因為
昨日在全面翻議時,我發現最終的Flish語言是導向一個外國網站http://www.undefinedfunction.com/
所以那位日本人是不是真的起始者…我也不是很清楚..
總而言之我有加上註解.幕後的java/flish也已經連向自己的主機步會造成別人的負擔!
十月 11th, 2007 at 09:09
謝謝囉！老師的教學非常詳盡,只是不知為何圖片上傳後變糢糊了,縮圖再上傳結果也一樣,不知哪兒有問題ㄝ,可否指導一下呢？
十月 13th, 2007 at 22:14
我就是在找字體大小…….(怨)….
謝謝介紹
十一月 17th, 2007 at 16:52
請問語法弄好之後要貼在哪呢??
我的都跑不出來=口=
十一月 17th, 2007 at 19:50
小小夜，當然是貼在部落格sidebar上囉！每家BSP提供的部落格邊欄格式不同，您寫這樣要怎麼回答您呢？或者去查一下您使用的BSP要怎麼貼js語法吧！
十二月 24th, 2007 at 05:58
感謝提供資訊…
馬上試用了!!
哈~
十二月 30th, 2007 at 23:39
請問一下…
無名的這個語法是要放在哪阿???
摸索不出來ㄋㄟ….= =?
一月 11th, 2008 at 23:45
不好意思,
請問一下, 氣球內的文字要去那兒輸入呢?
一月 11th, 2008 at 23:47
hapojeemei, 當然是用twitter輸入囉！你要先有twitter帳號才行。
一月 27th, 2008 at 00:09
妳好我有引用妳此篇文章的網址唷
二月 5th, 2008 at 21:50
hihi你好~我連不進去"色碼代號表"耶~@@是我電腦問題嗎?
三月 10th, 2008 at 07:03
哈囉迴紋針老師你好
我在google搜尋到你的twitter教學
我的balloon一直顯示"Sorry, cannot load messages"
我看你的balloon也是這樣
似乎也有不少人碰到這個問題
請問是不是電腦或網路設定的關係
不知道你知不知道
謝謝^^
三月 10th, 2008 at 18:38
cafecat, 聽說這幾天是twitter的問題耶～連他們自己的badge好像都不能顯示。不過之前是有一個網友，根本沒有把他在twitter的帳號密碼，正確地填入twitter balloon的設定裡，你該不會也是這樣吧？@_@
三月 11th, 2008 at 03:25
哈囉迴紋針老師你好~
我很確定我的twitter網址沒有錯
而且我看所有人的twitter balloon都不能顯示
所以我才猜會不會是網路設定的問題
很謝謝你回答我
過幾天如果還是有問題
我再來請教你
謝謝^^
三月 11th, 2008 at 17:34
cafecat, 應該就是twitter那裡的問題了，我看到網路上有人這麼說的，這也是為什麼我把badge拿掉的原因。
三月 13th, 2008 at 05:51
你好：
我在網誌上也使用了，
是google的blog，
但圖片只要按重新整理，
圖片就會不見，
我是用Flickr的圖檔。
請問是什麼樣的問題呢？
三月 13th, 2008 at 17:30
soso, 咦…那我就不清楚了，因為我自己也是flickr耶…您要不要寫信給發佈這個balloon那位寫程式的人？可能要用英文就是了^^不好意思喔。
三月 17th, 2008 at 01:51
迴紋針，你好呀…^^
經過你的詳細指導，我也做出了來了，
一開始都可以用…不過到了今天下午也一直顯示"Sorry, cannot load messages"
看過你回覆給其他網友的類似問題，有個疑問「要輸入密碼」嗎@@？
在哪輸入呢? (印樣中我只輸入了帳號~)
謝謝回覆
三月 17th, 2008 at 17:44
will, 請問現在還會嗎？有時候會因為twitter的關係出現那些字喔！如果你確定你的設定都沒問題的話，那就別擔心了。
四月 7th, 2008 at 10:19
不好意思我想請問
如果想放到MSN的分享空間
該怎麼修改這語法!!謝謝
四月 10th, 2008 at 07:32
你好，我有看你的文章，也用了twitter balloon了，但是~我的說話框框好像連結不到我網站的字？？是什麼問題呢？還是要下載什麼，我沒下載的，麻煩了。http://twitter.com/sunshingirl，謝謝你
五月 11th, 2008 at 01:43
想引用您這篇文章
請問可以嗎？[kiss]
五月 11th, 2008 at 16:20
ieye,請用，並請註明文章出處。謝謝您。
六月 25th, 2008 at 23:49
迴紋針老蘇…
可以請教一個很笨的問題嗎?
我用Twitter Ballon的網頁上的語法在自己的blog上可以用自訂欄的方法崁入
http://wp.korelab.com/yet-another-twitter-badge-twitter-balloon/
也改了圖片，但是，對話框裡的話是要怎麼修改?
因為在那個網頁並沒有可以登入帳號的地方，完全困惑中…(我昨天才開始用Twiiter，爬文爬得頭昏腦脹，果然是我太笨)
六月 26th, 2008 at 00:37
小麥，你看上面步驟3的那一張圖，圖上標第5的地方，不是就是讓你填twitter的ID了嗎？程式自己就會去呼叫你 twitter的 updates了。
六月 29th, 2008 at 03:56
真的很好用
謝謝分享
七月 2nd, 2008 at 09:57
你好，我很想把twitter放到我的部落格上，但是搜尋了好久好久，一直都沒辦法找得到badge，是我操作上出了什麼問題嗎？謝謝～～
八月 28th, 2008 at 21:12
您好:
今天開始用twitter，還不太了解…
照了您的方法做，但始照片無法顯示，對話框也出現"cannot load messages"
不知道圖片大小及格式是否有限制?
我是嵌入在無名中: http://www.wretch.cc/blog/yanghoyi
八月 28th, 2008 at 22:18
引用了老師此篇文章在部落格上，謝謝分享~
八月 28th, 2008 at 23:26
@carolyang 別客氣喔～
八月 28th, 2008 at 23:31
@carolyang, 請到這裡來試試看 http://balloon.korelab.com/zh-hant/frontpage
九月 3rd, 2008 at 01:00
版主您好,我是剛入門blogger的新手,由於你的文章對我很受用,所以我在文章中有連到這篇教學,希望你能讓我做個連結,讓更多網友能看到這篇教學,感謝~~
九月 3rd, 2008 at 07:34
EATING, 也謝謝您加連結。
九月 22nd, 2008 at 17:55
請教版大
http://balloon.korelab.com/zh-hant/frontpage
這個網址進去後
沒看到產生器網頁說
請問是否已更新連結
謝謝
九月 23rd, 2008 at 01:52
williams, 我剛看了一下，也沒找到產生器的連結耶….所以…我也不知道溜^^a
十一月 29th, 2008 at 16:49
迴紋針您好~
最近透過你的教學讓我的網誌又多了樣個人化的小玩意,真是感謝你ㄋㄟ
不果我遇到一個小問題,就是我的twitter balloon在某些電腦裡看不到照片,只會顯示對話框的內容
實在讓我很納悶,是要安裝啥東西才看的到嗎?
十一月 30th, 2008 at 21:54
@jwufang, 不用安裝什麼啊…看不到照片喔？跟一般人不一樣。因為twitter badge 後來有更新，我也不是很清楚可能是哪裡出問題。看要不要寫email問作者（用英文，因他是日本人）不好意思^^a
五月 12th, 2009 at 16:23
今天連上去這個網址,http://balloon.korelab.com/zh-hant/frontpage
卻只出現 ” 404 Not Found ”
不曉得怎麼了…
也好想弄一個到自己blog 上喔…
不知還有哪裡可以找到語法呢…