2006年11月17日 星期五

用 delicious 書籤做 tag cloud 教學

收到 anaplpe 在偶低CBOX的留言
問說我的標籤雲如何來給他製作
這是本格自2006年九月底成立以來一次收到留言
貓手來給他粉是開心馬上動手回覆
ㄚ又想到反正就是要寫了~就來把它PO一篇
大家來用

delocious 美味書籤

做美美的 TAG CLOUD 吧
其實這標籤雲不是貓手自己寫的程式 (貓手不會寫 XD)
只要用美味書籤提供的 tagrolls 功能
剪剪貼貼一下就可以做出來囉

●條件:您所使用的部落格或網路空間,必須支援自訂"HTML及SCRIPT"功能

住白宮不錯,做白工就不喜歡啦,因為 delicious 的 tagrolls 需要 script 功能,如不網站支援~不如拿做白工的時間出去玩,大家先確認看好免得做白工喔!

●步驟一:申請 美味書籤帳號

已有帳號的朋友這就跳過吧。

●步驟二:登入書籤並把部落格文章或網頁,通通加入美味書籤,並編寫 tag 與書籤簡介

可安裝官方所提供的瀏覽器外掛方便這個步驟
firefox extension
internet explorer buttons
bookmarklet buttons for any browser

加入書籤時,一併編輯每個網頁、文章的簡介與屬性 tag ,您所輸入的 tag ,就是標籤雲上面會顯示的字樣喔!

tag 與 tag 間以"空一格 ( space ) "分隔,但 delicious 書籤 tag 與 tag 間因為是用"空一格"做分隔,所以 tag 所用的文字間只要有空格,就會被分成兩個 tag,即使使用 " bundle tag "的功能,也無法在 tag cloud 上面以"一組字"的方式呈現,這要說對沒用過的朋友來說可能很模糊,請看下文舉例。

例如來說,大帥哥羅勃狄尼諾的英文名字是 Robert De Niro,如果我把大帥哥的英文名字加入當作"一個" tag ,在 delocious 的 tag ,帥哥大名會變成 "Robert"、"De"、"Niro"三個 tag ,而不是 "Robert De Niro"一個 tag ,上有政策下有對策,我的自救辦法是把帥哥的名字以大小寫分開,但消去中間的空隔,拼成"RobertDeNiro",顯示在 tag cloud 上面看起來比較不會莫名奇妙。

●步驟三:到 delicious 建立 tagrolls 樣式,並取得自動產生的程式碼

美味書籤登入後,網頁右上方有個 settings 點下到 settings 頁,選擇最右邊的 Blogging 底下第三項 tag rolls ,開始設定自己想要的樣式,一邊設定就可以一邊預覽標籤雲字型大小及顏色與顯示項目喔。

●步驟四:複製程式碼到自己網站的自訂html及script模組工具

完成設定後,在同一頁面左下方 Copy and paste this code into your hypertext: 下,把的框框中的程式碼複製下來,貼到自己網站或部落格中自訂 html、script 的功能控制編輯框裡面,並把 tag cloud 功能框拖到自己喜歡的版面位置上,它可以隨你挑的地方高矮胖瘦(例如本站左側是高瘦版、我的貓手的網頁功能測試站裡的是矮胖版),薑薑~美美的 tag cloud ,不必自己寫程式就完成啦!

補充:貓手的部落格用的是 blogger beta,之前貼的時候有點卡卡的,tag cloud 下方會顯示不正常(有一行跑不出來),但貓手很奶油桂花手的亂貼亂試,在某天福至心靈的把程式碼用 <table> </table> 標籤包起來以後(如以下所附的程式碼),跑不出來的那行乖乖現身,顯示就正常了,每個部落格的支援程度並不一致,其他的部落格或網頁如果遇到差不多的問題不妨試試。

<table>
<script src="http://del.icio.us/feeds/js/tags/xvi?size=10-20;color=87ceeb-ffff66" type="text/javascript"></script>
</table>

●步驟五:維護更新

每次發表文章時,PO完把它加入delicious書籤,就可完成標籤雲的更新囉!