2013年11月1日 星期五

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

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

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


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP