內嵌的文章留言 (Embedded Comment Form)

自從四個月前 Blogger in Draft 發表了多項新功能後，其中除了 Import / Export 這個備份功能外，我最感興趣的就是終於有內嵌式的文章留言了。當然第一時間我也玩了一下，功能面我很滿意，但是在自訂外觀和手動調整方面限制很多，一方面懶、另一方面想說等正式版公佈後再花時間研究，所以遲遲沒有套用在 Blog 上。終於在上禮拜，Blogger 官方 Blog 宣佈這個功能在正式版上可以使用，當然我也掛來玩，發現在 Draft 上的限制依舊，但功能更完整和強大了，既然都是正式版了，那還是來更新一下吧！

官方說明該功能要啟用很簡單，只要登入 Blogger 的後台介面，在「設定」、「意見」的地方，將「意見欄位置」，從原來的地方改成「已內嵌下列文章」（Embedded below post, 嵌入文章下方，翻譯的真爛）就好了！但如果這樣啟用，在文章的下方卻沒看到可以直接回應文章的表單的話，那代表你使用了非官方的樣板、或像我曾經改動過程式碼，讓系統找不到能嵌入原始碼的地方，為求安全起見，Blogger 不敢硬塞破壞原來的版面，所以啟用後才會看不見，如果仍堅持要用這個功能，請乖乖修改程式碼 Hack 一下，才能正確啟用囉！（如果你到這個步驟就看得到內嵌的意見欄，那下面就可以跳過啦！）

嵌入式留言功能的設定方法（順利的話這個步驟就能完成）

動手修改之前，我比較了一下前後程式碼的差別。官方為了實現這個功能，產生了一段多的程式碼（照理來說這段每個人的樣板裡都有，打開「版面配置」、「修改HTML」、「開啟小裝置範本」，搜尋一下就找得到），讓使用者能 include 這個「模組」，這段原始程式碼如下（如果找不到，自己找類似的地方複製貼上）：

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
    <data:post.iframeColorizer/>
  </div>
</b:includable>

顧名思義，這個 comment-form 模組就是顯示「內嵌意見欄」的程式碼定義，仔細一看，沒錯，是用之前曾經人人喊打的 iframe 語法，如果端詳一下原始碼，會發現嵌入 iframe 裡的是一隻 Javascript 程式，不過為了實現很多神奇的功能（容後述），似乎也不得不這樣做。但也因為意見欄完全由內嵌 iframe 的 Javascript 產生，如果更要改樣式內容就變得很困難（這就是我前面說的限制），還好那個程式寫得還不錯，當嵌入 Blog 後，會根據你 Blog 的背景和文字樣式自動調整，所以顏色字型不至於格格不入。如果樣板裡有發現上面那段程式碼，接下來才進到 Hack 的重點：要找到「內嵌意見欄」程式碼的正確位置，然後塞進顯示的程式碼。

程式碼很短，但找到正確的位置很不容易（人眼都不一定看得出來，也難怪 Blogger 系統找不到），我 Google 了一些修改的文章，裡面範例的程式碼和我的樣板不大一樣，所以這裡只能交代一下「大原則」，不要問我為什麼你的樣板裡面找不到（尤其是只想 search & replace 的人），因為每個人的樣板都不一樣。原來樣板裡的「發表留言」，程式碼只不過是一行帶你到留言介面的「連結」，這個連結會塞在首頁，以及文章的後面，連結的程式碼為：

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

所以你在搜尋上面這段的時候，如果有多筆就要判斷一下（只有一筆就直接改啦），基本上是在 <p class='comment-footer'> 這一行下面、最靠近它的那一筆，才是嵌入文章下方的正確位置。上面這一行的內容是找出留言的連結網址 (a expr...)、還有顯示發表留言的訊息（<data:postCommentMsg/>，像我的 Blog 這個訊息就是「張貼意見」），要嵌入意見欄、哪天不想用又可以改回來（到「設定」、「意見」切換回「整頁模式」就行），把上面那一行取代成下面這樣（如果你原始碼裡有其他樣式定義，請自行補足）：

<b:if cond='data:post.embedCommentForm'>
  <b:include data='post' name='comment-form'/>
<b:else/>
  <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>

有點程式基礎的應該看得懂，我用了一個 if 的判斷句，如果在設定那邊開啟「已內嵌下列文章」（cond='data:post.embedCommentForm'），那就使用 comment-form 這個模組，不然，請使用可以跳到留言介面的連結，順利的話這樣就搞定啦～如果你對留言的樣式不滿意，就像上面講的，iframe 裡面定義的玩意很難改動，我唯一有做的，就是把這個意見欄寬度，改得和我 Blog 文章一樣，不然就那麼一小塊看起來怪怪的。改法也不難，就是在 CSS 樣式區段裡 （<b:skin> 後面）、加入覆蓋原定義的宣告：

/* The comment-form width */
.comment-form {
  max-width: 650px !important;
  width: 650px !important;
}

紅色的值請照每個人樣板的寬度自行調整。我個人覺得原來另外跳出的留言介面（整頁模式）其實也很不錯，不但不用改就能顯示頭像、留言的身份和登入系統整合的也比較完整，重點還有防垃圾留言的機制。內嵌的意見欄雖然比較簡潔、也符合一般 Blog 的習慣，但功能還不夠齊全，還好未來 Blogger 官方只要修改 iframe 嵌入的那隻 Javascript，應該也能無痛升級，這點就請各位期待囉～

這個內嵌意見欄比起一般 Blog 的留言有幾個特異功能，首先是留言的身份，除了最基本的匿名、提供名字網址、用 Blogger 身份，還有像 AOL、OpenID 或幾種常見的 Blog 系統帳號，當然，只要你有輸入過，它也會 Log 起來，不過特別的是它把紀錄的 cookie 直接整合進下拉的 combo list 上面，這樣就不用仰賴瀏覽器的「自動完成」啦！再者，由於提供多種系統的登入支援，登入資訊是用 popup 的小視窗動態顯示在 iframe 裡，所以登入、文章預覽和留言結果，都是塞在 iframe 的範圍內，這樣好不好見仁見智，但至少不用跳轉下一頁、而且又不會破壞版面 Layout。最後，也是網友熱烈要求的「訂閱」功能，只要使用者留言時的「身份」裡面有正確的 e-mail，點下「訂閱」的連結，只要該文章的留言有更新或回覆時，系統都會主動寄 e-mail 來通知你，這樣對留言發問的人來說，就不用一直盯著留言等回應了～

留言身份的整合機制、留言的訂閱功能

其實除了嵌入式的留言介面，還有 Ranking、Star Rating 評分機制，和最新的「追蹤者」紀錄、還有 iGoogle 的文章發表 Widget ，都看得出來 Blogger 一直在成長和進步，而且都不需要 Hack 修改就能用（反而，如果你像我去 Hack，會導致這些新功能不能用，就像這個嵌入式留言還要修改才出得來）。所以如果是新手使用者、沒時間或能力來修改，就和一般 BSP 一樣，直接用官方的樣板和模組，套用起來既簡單又方便，像我一樣不安於室的、或嫌官方功能不好用的，才需要手動亂改，而且要擔的風險就像這個 Hack 一樣，一日 Hack 就終身都要 Hack 了，雖然可以隨心所欲把 Blog 調整成自己想要的樣子，但手動調整功能和定期維護都是免不了的啦～