衫衫's profile夜♋衫衫工作室™PhotosBlogListsMore Tools Help

Blog


    January 24

    在 Windows Live Spaces 內加入 ShoutMix、Cbox 留言版插件 (或稱 Shoutbox / tagbox)

    在眾多的 Blog 玩意中, 除了 BlogPet (網絡或部落格寵物) 外, 留言版插件也相當受歡迎, 這些留言版插件在國外一般被稱為「shoutbox」 或「tagbox」, 和一般留言版不同的是通常留言字數較少, 但可利用內嵌框架放置在 Blog 或網頁上, 所以在使用上的彈性很高, 加上用戶管理留言訊息也非常方便, 所以很多人更利用作為小型聊天室, 以上述功能來說, 這自然吸引了不少 Blogger , 甚至個人或服務網站使用。

    上次夜衫衫已介紹了在 Windows Live Spaces 內加入 BlogPet 的方法, 其實也可以利用相同的方法加入各式各樣的留言版插件, 夜衫衫就找到以下兩個留言版插件, 分別是 ShoutMixCbox, 兩者全都適合在 Windows Live Spaces 上使用。

    在開始教學教程前, 還是按照已往一樣, 先說明一些基本條件:

    ☞ 請各位注意:

    1. 本教學會利用到 Sandbox 這個 gadget, 如果各位不清楚 Sandbox 這個 gadget 是甚麼, 請參考 <六. 利用 Sandbox gadget 在 Space 頁首上加入 Flash 物件~ 並以 Slide 相簿特效作示範>。

    2. 如果因為 HTML SandboxSandbox 的最大字元限制而無法加入以上插件或玩意, 可參考 <九. 在 Space 頁首上加入多個 Sandbox 或 HTML Sandbox gadget 教學>。
    3. 因為本教學所介紹的插件只提供 iframe 語法, 因此在 Custom HTML、HTML 模瑰及部落格內, 都會造成無法加入。各位 Windows Live Spaces 用戶應該使用 HTML Sandbox Sandbox 這兩個 gadget 加入本教學所介紹的插件。

    兩個留言版插件介紹:

    ShoutMix - 一個相當著名的 Blog 留言版插件, 早在 2004 年已出現, 並且快速地被各個人網頁或部落格用戶使用, 但是當時經常系統不穩, 令不少使用者紛紛轉投 Cbox 的懷抱, 令人非常失望 (包括夜衫衫), 不過發展至今, ShoutMix 已經全面更新至 Live! 2.0 版本, 特別在穩定性及速度上作出修改 (官方聲稱), 而且新版的特點除了是設置簡單外, 亦擁有更完善的管理系統, 用戶可以加入自訂的表情符號, 更容許用戶自訂介面標語功能 (Label - 支持簡 / 繁體中文), 加上它更提供多款不同的介面及提供兩種不同的嵌入方式 (HTML 及 Flash), 所以非常適合在不同的 Blog 或個人網頁內使用。
    http://www.shoutmix.com
    PS: 如果單以夜衫衫當年用 ShoutMix 時的經驗所知, ShoutMix 可謂完全不值得介紹給各位使用!! 因為 ShoutMix 何服器的穩定性出奇地差! 加上載入速度又慢, 甚至更不時出現亂碼! 令夜衫衫當時很快地就轉用 Cbox 了。不過今時今日, 夜衫衫測試了一星期的時間, 也沒有出現問題, 總算是令人相信 ShoutMix 的確已經全面更新, 各位應該可以放心使用。

    Cbox - 繼 ShoutMix 之後, 另一個十分著名的 「shoutbox」。Cbox 一向以穩定性見稱, 在 ShoutMix 一兩年前出現離奇地系统不穩時, 差不多大部份「shoutbox」用戶也轉用了 Cbox, 這件事可謂直接令人認識到 Cbox, 繼而遂漸受到用戶歡迎; CboxShoutMix 的基本功能上, 可說是大同小異, 甚至介面設計也有八九成相似, 但一直到了在今天, Cbox 也沒再有突破的功能更新, 這相比己更新至 Live! 2.0 版本的 ShoutMix, 感覺上稍有不及 (夜衫衫覺得未更新前也差不多), 但對於喜愛穩定, 不追求新功能的用戶, Cbox 仍然是最佳選擇。
    http://cbox.ws

     ShoutMixCbox 兩者互相比較
    ShoutMix Flash 版本介面 ShoutMix HTML 版本介面 Cbox 介面
    介面設計
    最大訊息儲存 250 100
    每個訊息支持最大字元數目 150 200
    其他 每小時限制最多 60 個訊息 官方沒有指出
    優點

    1. 支持自訂標語 (Label)

    以系統穩定見稱
      2. 支持 HTML 及 Flash 版本  
    缺點 1. 已往系統曾經出現不穩 1. 不支持自訂標語
      2. Flash 版本不支持表情符號 2. 久沒功能更新
    共同缺點 所有舊有訊息不會被儲存, 將即時刪除

    以上兩者各有優點, 到底選擇用 ShoutMixCbox ? 各位請自行判斷~ ^^
     

    申請 ShoutMix 的步驟及加入在 Windows Live Spaces 的方法:

    1. 先到 ShoutMix 官方網站 - http://www.shoutmix.com, 按一下「Sign up」(圖1)

    (圖1)

    2. 根據指示填上你的帳號名稱密碼用戶姓名電子郵件地址, 並將下方的方格打勾, 然後按一下「Continue」按扭 (圖2)

    (圖2)

    3. 從多款不同的介面中, 請選擇一種你喜愛的, 然後在下方的欄位上, 輸入右圖的字母, 並將下方的方格打勾, 再按一下「Continue」按扭 (圖3)


    (圖3)

    4. 看到的 (圖4) 畫面, 代表你已經成功申請帳號, 但別心急, 各位請先按一下「Go to my control panel now」的連結, 設定 ShoutMix 內不同的選項。

    (圖4)

    5. 在 ShoutMix 的 control panel 內, 可供用戶設定的選項非常豐富 (圖5), 大至可以分為「Quick Start」「General」「Style」「Security」四大項目, 每個項目又設有四組功能分頁, 所以合共可設定的選項相當多, 但有部份功能只提供給收費版本用戶, 不過一般來說, 免費版本已足夠使用。而夜衫衫以下只會指出幾個重點, 各位修改後, 請謹記必須要按一下「Save Settings」按扭, 才會儲存設定, 至於其他各種設定選項細節, 大家可以自行研究, 若有不清楚的地方, 請留言發問吧。

    (圖5)

    6. General → Configuration - 點選「Configuration」分頁, 即可修改每頁所顯示的留言數目及其他版面設定 (圖6)

    (圖6)

    7. General → Date & Time - 設定帳號的地區及時間日期顯示方式, 請點選「Date & Time」連結, 並選擇你的地區及時間日期顯示方式 (圖7)

    (圖7)

    8. Style → Appearance - 在「Appearance」分頁中, 用戶可以設定介面型式、字體大小、字型及介面配色等有關外觀的選項, 更可即時預覽效果 (圖8)


    (圖8)

    9. Style → Labels - 除了可以設定上述介面的外觀外, 就連介面內的文字標記也可在「Labels」分頁內自訂, 而且每個標記更可支持繁簡體中文, 令整個介面也可變成中文, 倍感親切, 這亦是暫時 ShoutMix 比起 Cbox 最為明顯的優點, 各位可以按照指示, 更改各個標記 (圖9)


    (圖9)

    10. Style → Smileys - 在「Smilsys」分頁內, 用戶可以自行加入各種表情符號, 以供你的瀏覽 (留言) 者使用。

    (圖10)

    11. 經過步驟 6 至 10 的設定後, 大致上各項主要選項已經設置完畢, 接下來可以按一下「Use Shoutbox」分頁, 獲取代碼。ShoutMix 提供兩種不同的代碼給用戶選擇, 分別是 HTML 版本及 Flash 版本, 兩者介面各異, 使用那一個請隨意選擇, 本例子中, 夜衫衫選擇了 HTML 版本, 所以點選了「Place Shoutbox on webpage」選項, 在這裡, 各位可以調整介面大小及設定是否顯示介面邊線; 如果各位希望選擇 Flash 版本, 則請點選「Place Flash viewer on webpage」選項 (Flash 版本 暫時不支持顯示表情符號); 最後請複製在「Generated codes」欄位內的整段代碼 (圖11)


    (圖11)

    12. 將複製出來的代碼, 放入 HTML Sandbox Sandbox 隨便一個 gadget 內 (圖12), 再按一下「Save」按扭, 就是這樣, ShoutMix 就可放在你的 Windows Live Spaces 上使用 (圖13)

    (圖12)

    (圖13)

    13. 用戶要删除留言訊息時, 只需登入自已的帳號, 然後在 ShoutMix 介面上就可看見每個訊息下面也有「Delete」選項 (圖14), 直接點選即可刪除該訊息, 非常方便。除了以上各項設定外, ShoutMix 也有像 Access ControlBan ControlProfanity Filter 等功能, 各位可以慢慢嘗試~ ^^

    (圖14)
     

    申請 Cbox 的步驟及加入在 Windows Live Spaces 的方法:

    1. 先到 Cbox 官方網站 - http://cbox.ws/, 按一下「Sign Up」, 然後根據指示填上你的帳號名稱密碼電子郵件地址, 再選擇你的語言介面外觀, 最後按一下「Create my Cbox!」按扭 (圖1)

    (圖1)

    2. 看見以下畫面 (圖2), 即代表你己成功申請帳號, 同時你亦會收到一封由 Cbox 寄出的確認信, 這時候請按一下「Continue」連結, 進入帳號管理版面 - Control Panel

    (圖2)

    3. 在 CboxControl Panel 中, 左邊分為「Quick Setup」「My Account」「Cbox Options」「Colors & Fonts」「Smilies」「My Users」「Blocked Users」「Messages」八大項目, 每個項目內也有一至三版分頁, 所以合共可設定的選項相當多, 但有不少部份功能只提供給收費版本用戶, 不過一般來說, 免費版本已足夠使用。而夜衫衫以下只會指出幾個重點, 各位修改後, 請謹記必須要按一下「Save」按扭, 才會儲存設定, 至於其他各種設定選項細節, 大家可以自行研究, 若有不清楚的地方, 請留言發問吧。

    (圖3)

    4. Cbox Options → Display Options - Cbox Options 項目有三個分頁, 在 Display Options 的分頁中 (圖4), 用戶可設定介面的大小、介面的排列方式、每頁顯示訊息數目等選項。


    (圖4)

    5. Cbox Options → Date Options - 在 Date Options 的分頁中 (圖5), 容許用戶設定時間日期及顯示方式, 並設定時間日期的顯示位置。

    (圖5)

    6. Cbox Options → Post Options - 在 Post Options 的分頁中 (圖6), 容許用戶設定是否須要支持文字過濾及表情符號, 而其剩的選項都是收費版才支持的, 夜衫衫在這裡不作詳述。

    PS: 甚麼是 Profanity filterboxCode ?
    Profanity filter 的意思是指系統會濾一些粗言穢語, 當有人使用這些褻瀆的語句留言時, 系統會將字句以 "*" 符號取代, 只有用戶登入 Cbox 後, 在 Messages 項目中才可以看見原來字句。而 boxCode 是一種類似 bbcode 的語法, 你的瀏覽者如果在留言時使用 boxCode 語法, 可令訊息文字獲得特別效果, 例如:
    [b]text[/b] - 粗體字
    [i]text[/i] - 斜體字
    [u]text[/u] - 文字加上底線


    (圖6)

    7. Colors & Fonts → Display Options - Colors & Fonts 項目有三個分頁, 其中 Advanced Edit 分頁設定只有收費用戶才可選擇, 夜衫衫在這裡不作詳述; 而在 Presets 的分頁中 (圖7), 用戶可選擇介面的外觀。

    (圖7)

    8. Colors & Fonts → Display Options - 在 Simple Edit 的分頁中 (圖8), 用戶可設定字體大小、字型及介面配色等有關外觀的選項, 更可即時預覽效果。

    (圖8)

    9. Smilies → Preset Smilies - Smilies 項目有兩個分頁, 在 Preset Smilies 的分頁中 (圖9), 用戶可設定恢後原來默認表情符號或更改原來默認表情符號的顏色。

    (圖9)

    10. Smilies → Customize Smilies - 在 Customize Smilies 的分頁中 (圖10), 用戶可加入自訂的表情符號, 或修改系統原有的表情符號。


    (圖10)

    11. Messages → Current Messages - Messages 項目有兩個分頁, 其中 Archived Messages 分頁設定只有收費用戶才可選擇, 夜衫衫在這裡不作詳述; 在 Current Messages 的分頁中 (圖11), 用戶可以管理各留言訊息, 包括刪除及搜尋訊息。

    (圖11)

    12. 經過步驟 4 至 11 的設定後, 大致上各項主要選項已經設置完畢, 接下來可以按一下「Quick Setup」項目, 獲取代碼。請複製在欄位內的整段代碼 (圖12)

    (圖12)

    13. 將複製出來的代碼, 放入 HTML Sandbox Sandbox 隨便一個 gadget 內 (圖13), 再按一下「Save」按扭, 就是這樣, Cbox 就可放在你的 Windows Live Spaces 上使用 (圖14)

    (圖13)

    (圖14)

    最後, 夜衫衫希望重申, 這篇教學只不過比較了 ShoutMixCbox 兩者間免費版本的分別, 而收費版本的分別各位可自行評估, 測試後發現, 兩者分別不大, 基本上可說是沒有「勝負」之分。

    也許到了今天已是 2007 年, 夜衫衫才介紹 ShoutMixCbox 這些玩意已不能算新鮮事, 但這篇教學的最終目的,  不過是希望各位知道, Windows Live Spaces 已經有方法加入這類玩意, 可以像其他各大 Blog 一樣, 多姿多采~
     

    本教學最後更新日期: 2007 年 1 月 24 日

    本節教學完畢

    如果要轉載這篇文章, 請使用「引用通告」功能, 或指明出處, 感謝。
    不清楚如何使用「引用通告」功能, 可參考這裡

    Comments (103)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    衫衫 夜wrote:
    Hǒbēˊ가행 你好,
    你的問題相信已被 "自動地" 解決了吧? 如果仍未解決的話, 請參考以下文章:
    http://camuschu.spaces.live.com/blog/cns!85BD955C085738A8!7971.entry
    祝你成功~ ^_^
    May 24
    TakHye Hawrote:
    杉杉啊。。我那個CBOX又不行了。。 複製語法時候Sandbox就有顯示,但是一發送就沒有出來。。之前還可以用的,別人還來留言呢,怎么會這樣?
    May 22
    衫衫 夜wrote:
    Hǒbēˊ가행 你好,
    對啊~ 因為暫時仍只有 Sandbox 才支持 iframe 語法, 自訂 HTML 模塊就不可以了~
    衫衫在這裡先恭喜你成功了~ ^_^
    Apr. 14
    TakHye Hawrote:
    TO  杉杉:
     
    俺終於成功弄得了,原來是自訂HTML 模板沒有顯示出來,一定要用SANDBOX才行,呵呵~
     
    謝謝指教了~
    Apr. 13
    衫衫 夜wrote:
    nets~喵 你好,
    你是指介面上的文字嗎?
    你的代碼沒有問題啊~ 而是「ShoutMix Flash 版本」只有英文的~ 要用中文介面的 ShoutMix, 只有使用「ShoutMix HTML 版本」及 Sandbox 了~ 你再看看本教學頂部, 兩者的分別自會明白~ (不過衫衫倒是在教學中忘了說明這個...)
    希望你會明白吧~ ^_^
    Apr. 4
    wrote:
    哈囉衫衫
    以下是我的語法~但是怪怪的耶~怎是出現英文的~
     
    <!-- Begin ShoutMix - http://www.shoutmix.com -->
    <object title="ab321468" type="application/x-shockwave-flash" data="http://www4.shoutmix.com/viewer.swf" width="160" height="400">
    <param name="movie" value="http://www4.shoutmix.com/viewer.swf" />
    <param name="flashvars" value="id=ab321468&amp;popup=1&amp;invite=Join%20chat%21" />
    </object>
    <br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">Free chat widget @ ShoutMix</a><br />
    <!-- End ShoutMix -->
    Apr. 3
    衫衫 夜wrote:
    Hǒbēˊ가행 你好,
    你的代碼沒有問題啊, 只是可能你錯用了「自訂 HTML」模塊吧~
    因為 CBOX 的代碼是利用 iframe 語法的, Windows Live spaces 中的「自訂 HTML」模塊是不支持 iframe 語法啊~
    要在 Windows Live spaces 中加入 CBOX, 必須如教程中, 使用 Sandbox 才行啊, 有關 Sandbox 的詳情, 可參考以下文章:
    http://camuschu.spaces.live.com/blog/cns!85BD955C085738A8!1250.entry
    祝你成功~ ^_^
    Mar. 2
    TakHye Hawrote:
    <!-- BEGIN CBOX - www.cbox.ws -->
    <div align="center" id="cboxdiv">
    <iframe frameborder="0" width="160" height="305" src="http://www3.cbox.ws/box/?boxid=2912053&amp;boxtag=ktgece&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#000000 1px solid;" id="cboxmain"></iframe><br/>
    <iframe frameborder="0" width="160" height="75" src="http://www3.cbox.ws/box/?boxid=2912053&amp;boxtag=ktgece&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#000000 1px solid;border-top:0px" id="cboxform"></iframe>
    </div>
    <!-- END CBOX -->
     
    以上是我CBOX的代码,我曾经在SINA的博客上添加成功过,但是不晓得为什么就是在MSN空间添加显示不出来,麻烦帮我看下了,谢谢!
     
    我的MSN:hobe116@hotmail.com 希望你能教我!万分感谢~
    Feb. 29
    TakHye Hawrote:
    这个不晓得为什么我添加到HTML 哪里去却没有显示出来,弄了好多次都是这样,怎么办?
    Feb. 29
    衫衫 夜wrote:
    你好,
    衫衫先恭喜你成功了~ ^_^
    不過, 衫衫提醒你, 如果是因為改用 Firefox 才成功, 用 I.E. 則仍然不行的話, 則代表你的 I.E. 瀏覽器可能出現問題了, 例如可能是設定出錯、系統或 I.E. 沒有更新、瀏覽器插件配置、甚至防毒或防火牆軟件錯誤阻隔等也有可能發生這種情況, 請盡早檢查。(PS: 不過有不少朋友也有相類似的問題...)
    不論如何, 衫衫也再次恭喜你成功了~ ^_^
    Jan. 31
    衫衫 夜wrote:
    兔子蕾 你好,
    你的 sandbox 是不是因為設定了「使用全寬度」, 所以才會太大? (可以先進入重整或隱藏模組模式, 然後在模塊的右上角, 點擊倒三角型的按扭, 再選擇「設定」選項, 看看有沒有將「使用全寬度」的選項打勾, 如果有的話可以試試不打勾這選項)
    另外, cbox 的尺寸是可以自行調整的, 方法在步驟 4 中, 更改介面的大小來配合 sandbox 的大小。
    基本上不會太困難的, 你再試觀看吧~ ^_^
    祝你成功~ ^_^
    Jan. 31
    wrote:
    夜衫衫 大大感激謝謝成功了.... 改用瀏覽器Firefox...
    ( IE...騰訊TT......
    將瀏覽器內的暫存檔及 cookie 全部刪除, 然後重新登入再試
    嘗試刪除現有的 Sandbox, 然後重新加入新的 Sandbox, 再將新的 Sandbox 放在頁首不同的位置上再嘗試。都無法使用...)
    Jan. 30
    wrote:
    大大 真麻煩你了 .以上方式都有嘗試...我努力
    在試市好了   謝謝
    Jan. 30
    晓蕾 莫wrote:
    您好!夜衫衫
    我已经成功添加了cbox啦,可是html sandbox太大块啦,能不能调整它的尺寸的呀?期待你的回答
    Jan. 30
    衫衫 夜wrote:
    你好,
    因為衫衫無法訪問你的 Space, 所以無法清楚判斷問題原因; 而你遇上的問題, 衫衫上次也提過了, 很有可能是跟瀏覽器有關, 未知你有沒有嘗試衫衫上次留言的幾個建議?
    衫衫在 sandbox 中測試過你的 cbox 及 shoutmix 代碼, 完全沒有任何問題, 分別加入後, 兩個留言板都可以正常運作, 所以己確定問題和代碼無關, 所以請再測試清楚吧~ ^_^
    祝你成功~ ^_^
    Jan. 29
    Picture of Anonymous
    wrote:
    大大 以下是cbox
    <!-- BEGIN CBOX - www.cbox.ws -->
    <div align="center" id="cboxdiv">
    <iframe frameborder="0" width="160" height="305" src="http://www5.cbox.ws/box/?boxid=108854&amp;boxtag=rjmkz1&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe><br/>
    <iframe frameborder="0" width="160" height="75" src="http://www5.cbox.ws/box/?boxid=108854&amp;boxtag=rjmkz1&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe>
    </div>
    <!-- END CBOX -->
    ShoutMix
    <!-- Begin ShoutMix - http://www.shoutmix.com -->
    <iframe title="msn09775" src="http://www2.shoutmix.com/?msn09775" width="160" height="400" frameborder="0" scrolling="auto">
    <a href="View">http://www2.shoutmix.com/?msn09775">View shoutbox</a>
    </iframe>
    <br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox at ShoutMix!">Free shoutbox @ ShoutMix</a><br />
    <!-- End ShoutMix -->
    Jan. 29
    衫衫 夜wrote:
    你好,
    衫衫明白你的問題, 而且 Sandbox 無法儲存語法這問題, 一直也有不少朋友遇上過, 一般來說, 衫衫只能建議以下方法:
    1. 請將瀏覽器內的暫存檔及 cookie 全部刪除, 然後重新登入再試, 希望可以解決問題。
    2. 嘗試改用其他瀏覽器, 例如 Firefox, 看看能否成功。
    3. 嘗試刪除現有的 Sandbox, 然後重新加入新的 Sandbox, 再將新的 Sandbox 放在頁首不同的位置上再嘗試。
    4. 如果上述都試過了, 但仍然不行的話, 你將你使用的代碼嘗出來, 衫衫盡能力幫你檢查一下吧。
    祝你成功~ ^_^
    Jan. 25
    Picture of Anonymous
    wrote:
    http://home.doramail.com/ph168796:doramail.com/0125.jpg 大大 這麼圖片檔 我還是不能 掛留言板訊息 已照步驟一步一步 七他 留言內容 大概是跟他們差不多 ㄅ知我那出錯 麻醉你ㄌ
    Jan. 25
    衫衫 夜wrote:
    你好,
    印象中, Cbox 是沒有「中文化」的- 不過 ShoutMix 卻可以啊~
    方法就是登入 ShoutMix 後, 按下 Labels, 就可以為每個按扭及選項設定中文名稱了 (即教學內的 圖9); 另一方面, ShoutMix 介面的大小也可以在按下 Get Codes 時設定啊~ (即教學內的 圖11)
    祝你成功~ ^_^
    Jan. 7
    莉 Leilawrote:
    夜衫衫你好:
    這個留言版如何中文化?
    另外 要怎麼將他改變為基本資料的大小?
    Jan. 7