2013年11月29日

[小工具]FB 留言板安裝懶人包__留言email通知

A+
2014.5.28 公告:最新版本請見:「Facebook 留言板安裝懶人包 + 留言email通知 + 自適應寬度

由於在上一篇「我如何進入痞客邦Facebook留言框管理介面 並成為管理員」發現了 FB 的 App ID 目前有安全上的漏洞,對「留言管理」這個功能有所疑慮,因此決定修改舊版「Facebook留言板安裝懶人包」的程式碼,去除 App ID 的部分。

雖然如此將不能管理留言,不過藉由 FB 提供的 API 仍可取得所有留言資訊,配合 Google 試算表將留言資訊以 email 寄給站長,不會錯失任何留言,且收到通知更為即時




一、準備動作


1. 選擇是否使用「管理留言」功能

Blogger、WP 等可以修改範本的部落格,可以另外選擇使用「管理留言」的功能,與本文的程式碼並不衝突。而不能修改範本的部落格,以下步驟只要取得 "FB 管理者 ID" 即可跳「二、程式碼內容及參數」

如果不擔心 App ID 安全問題、選擇管理留言的話,請依照舊版「Facebook留言板安裝懶人包」→「一、準備動作」,來取得 FB 管理者 ID 及 FB 應用程式 ID,並進行下一個動作。


2. 安裝 META 標籤

選擇使用留言管理功能的話,依照舊版「Facebook留言板安裝懶人包」→「三、Blogger 安裝」→「2013.11.22 補充」的內容,將 META 標籤的字串放在範本中 <head> 後面即可。



二、程式碼內容及參數


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。


安裝程式碼之前,需修改一些參數,請對照以上程式碼行號:

G:紅色字串請填入自己的 email,並檢查不要拼錯,否則就收不到 email 通知了。

H:預設為不收到自己的留言通知;若要收到自己留言通知請將紅色字串改為 Y

I:紅色字串請填入自己的 FB 管理者 ID,可參照「一、準備動作」得到此字串。

J:藍色字串請改為符合自己頁面寬度的像素值

K:預設值為最多顯示 5 則留言,可自行調整

L:這一行要設定的是 FB 留言框出現在網頁上的位置,請參照以下大標題,依不同部落格的安裝範例來修改。

M:FB 留言框官方有兩種顏色效果,預設值適合淺色為底的部落格;若部落格底色是深色,可將藍色字串改為 dark



三、Blogger 安裝


1. 對程式碼不熟者

請到後台「範本」→「編輯 HTML」,搜尋 </body> 這個字串,找到後在此字串的前一行,插入「二、程式碼內容及參數」的程式碼即可。

程式碼 L 行的參數即代表 Blogger 的留言區塊,因此可不修改,FB 留言框出現的位置會在原留言區塊的上方。


2. 對程式碼熟悉者

如果 FB 留言框想放在自訂位置,L 行參數可改為 "#fb-comment-area",然後可參考「Blogger 範本__(三)文章及留言區塊的程式碼」,把全部程式碼放在範本中的自訂位置即可。

想先看 Blogger 的安裝效果可參考以下網頁:




四、非 Blogger 安裝


1. Xuite
  • 先修改「二、程式碼內容及參數」的所有參數
  • L 行的紅色字串改為 ".item_message"
  • 新增自由欄位,所有程式碼複製進去,將此自由欄位放在側欄最下方即可。
  • FB 留言框出現的位置會在原留言區塊的上方。

效果可參考以下範例網頁:



2. Pixnet
  • 先修改「二、程式碼內容及參數」的所有參數
  • L 行的紅色字串請改為 "#comment-text"
  • 新增自訂欄位,所有程式碼複製進去,並將此自訂欄位放在側欄最下方即可。
  • FB 留言框出現的位置會在原留言區塊的上方。

效果可參考以下範例網頁:



3. 對程式碼熟悉者

若想自訂 FB 留言框在部落格中出現的位置,可參考類似「Chrome開發人員工具」,來找出預定擺放區塊的 id 或 class,然後將 L 行的紅色字串,置換為 "#id字串" 或 ".class字串" 這樣的形式即可。


4. 其他部落格

其他部落格若想安裝 FB 留言框,但不知道 L 行參數如何修改,請再留言並提供網址,會再測試後告知如何修改,並增加到本文的安裝範例之中。



五、使用說明


由於 FB 的隱私性設定,在「不能管理留言」的情況下,以下情況的留言站長不一定能看到,例如:
  • 非站長的朋友
  • 留言者的身份非公開

不過安裝本文的程式碼後,所有的 FB 留言(包含以上兩狀情況)一定可以收到 email 通知




email 內容大致如上圖,包含了以下資訊:
  • 留言時間
  • 部落格名稱及文章標題
  • 文章網址
  • 留言者暱稱
  • 留言者 FB 網址連結
  • 留言內容

如果有意跟留言者交流,可藉由以上資訊與聯繫留言者,互加好友後,原本無法顯示的留言便能出現在 FB 留言板了



六、其他注意事項


1. 調整留言框 CSS 版面配置

請參考「舊版文章」→ 「五、調整留言框 CSS 版面配置」


2. 安裝完沒看到 FB 留言板?

請到後台檢查,是否啟用了「G+留言框」!因為他會排斥其他所有留言框,因此請在後台關閉「G+留言框」即可。若要另外安裝 G+ 留言框,可參考「Google+留言框與其他留言外掛並存


3. Email 每日寄送額度

這個 email 通知的功能,是利用 Google 試算表上的「FormEmailer」這個程式,每天能夠寄出的 email 上限是 500 封

2014.2.10 公告

不太好的消息,最近「Google 官方公告」表示,免費的 google apps 帳號一天寄出郵件的上限下修到 100 封,付費的 google apps 帳號,目前查到的資料是一天 1500 封。


這個留言通知功能,與本站發佈的「推文系統」及「WYBOARD 部落格即時留言板」共用 email 寄送系統,如果發現某些網站使用了上述工具,而每日平均寄信使用量達到 5 ~ 10 封時,為了避免佔用其他使用者的額度,WFU 可能會要求該網站使用客製的試算表資料庫。

如果需要使用自訂的試算表資料庫存放留言,以獲得獨立的寄信配額,請利用下面的表單與 WFU 聯繫

聯絡表單:




七、常見 FAQ 整理


若有常見問題產生,會整理在此:

◎ Xuite 貼上程式碼並儲存後,若想要重新編輯「自由欄位」的內容,會發現系統常常自行竄改程式碼,而導致程式無法執行。因此最保險的方法是將本文程式碼自行複製一份,將來欲修改「自由欄位」的內容時,全部重新貼上最為保險。


更多實用工具:

20 則留言:

  1. 繼續支持網誌內建留言功能 :D

    回覆刪除
  2. <5822551388556590269>(以上內容請勿刪除,從括號之後開始留言)
    我也是,因為如果FB不想玩了,那那些留言不就.......

    回覆刪除
  3. <5557960129651633570>(以上內容請勿刪除,從括號之後開始留言)@Almighty Demiurge, @Pan Kuan, 純粹提供一個 FB 分享的機會, 在我網站的確 FB 留言也很少。

    回覆刪除
  4. 您好:先謝謝Wayne Fu的留言回覆通知該篇文章已發佈。
    於此請教 此篇程式碼的第O行部分裡面的有個gmail部分是有什麼作用呢?

    回覆刪除
  5. <2759354803751662835>(以上內容請勿刪除,從括號之後開始留言)就是本文最重要的功能 "留言以email通知" 啊~~
    程式碼 G 行填入你的 email,而不是預設值(我的email),你就能收到 email了。

    回覆刪除
  6. email 寄送系統?? 這就是收到通知的原因??

    我們「教會網誌」,可能會需要「客製的資料庫」寄送功能,長遠來說,以後會成為討論區,教會資工組,已經被我說服,準備要買獨立網址了! 希望FB留言板,安裝後能一勞永逸....

    回覆刪除
  7. <4564756777331049907>(以上內容請勿刪除,從括號之後開始留言)
    1.是的
    2.有案子接我當然不會往外推啦 ^^ 只不過我的網站真的很少人用FB留言框留言就是了,當然也有可能是網站屬性的不同所導致,用Blogger的族群說不定很少用FB。所以你們可以評估一下,若確定FB留言框是必要的功能,且需要「客製資料庫」時,請利用「諮詢服務與提案合作」這個網頁跟我聯繫了!

    回覆刪除
  8. Hello Wayne大 好久不見

    我剛開始要裝新的 自適應 樣板
    請問這個有辦法弄成自適應的版本?

    我有參考一個社團裡的格主的文章

    http://www.chodaict.com/2014/03/facebook-comment-responsive-design.html

    但還是改不出來 Orz

    回覆刪除
  9. <2893411354975436870>(以上內容請勿刪除,從括號之後開始留言)好的,自適應寬度要實現不難,我看看怎麼設計比較好~

    回覆刪除
  10. <8301828248055496001>(以上內容請勿刪除,從括號之後開始留言)

    好的,麻煩大大了。

    我發現現在新出的樣板幾乎全都是自適應的版本,都不在用手機版網頁了。我在安裝一些功能就有很多困擾...

    先別說左右換頁或回到最頂端的浮動按鈕那些,我安裝 Wayne 大的 相關文章也遇到困擾了 Orz

    在手機板上看會跑掉...

    自適應真是令一個新的時代的開始阿...

    回覆刪除
  11. <8234498080878861409>(以上內容請勿刪除,從括號之後開始留言)因為我沒使用自適應的版面,所以無從得知哪些小工具會有異常現象~不過沒關係,如果你裝了哪些小工具有問題,請到該篇文章留言,並提供異常現象的網址供參考,這樣比較好測試產生問題的原因~

    回覆刪除
  12. <2772414928165437926>(以上內容請勿刪除,從括號之後開始留言)

    好,我自己也還在摸索,我先全部測試過一次以後,在統一一次在那些文章下面留言吧。真是麻煩大大啦

    回覆刪除
  13. 請問我突然收不到FB留言通知該怎麼解決?
    我留言數是設定顯示100

    回覆刪除
  14. <2042872440452278933>(以上內容請勿刪除,從括號之後開始留言)請附上收不到留言通知的文章網址。(留言數的設定沒有影響)

    回覆刪除
  15. <4574001378543507175>(以上內容請勿刪除,從括號之後開始留言)
    http://blog.xuite.net/c091170/sad/221757027 還是說同時於 Facebook 上發表 沒打勾的發`言會收不到 謝謝作者 :)

    回覆刪除
  16. <8236910717451081266>(以上內容請勿刪除,從括號之後開始留言)1. 與有無打勾無關
    2. 在你家測試留言,某幾篇一定能執行程式(會有通知),但某幾篇一定不會執行程式 → 目前看不出原因再哪

    暫時推測與你側欄裝的 FB 浮動區塊相衝突,請按以下步驟檢查:
    A. 暫時移除側欄 FB 浮動區塊,看看能否恢復正常
    B. 如果是這個原因的話,請把你側欄 FB 浮動區塊的程式碼 mail 給我(waynefu.g@gmail.com)

    回覆刪除
  17. <4480251333319799755>(以上內容請勿刪除,從括號之後開始留言)已寄信給您~

    回覆刪除
  18. <6771353153306361531>(以上內容請勿刪除,從括號之後開始留言)你有移除側欄 FB 浮動區塊來測是嗎? 請先回報測試結果,如果不是這個原因的話,單單給我程式碼沒用喔。

    回覆刪除
  19. 我想请问BLOGGER和面子书的留言板是不是不能同时拥有?
    因为有放了两个之后虽然看得见,但是只要BLOGGER留言板有留言,面子书的留言板就会消失。
    是技术问题还是本来就要二选一? 谢谢你

    回覆刪除
  20. <1471610656145926046>(以上內容請勿刪除,從括號之後開始留言)你有裝本文的程式碼嗎?有的話請留個出問題的網址,才能檢視問題所在~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。