由於在上一篇「我如何進入痞客邦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 留言框出現在網頁上的位置,請參照以下大標題,依不同部落格的安裝範例來修改。
1. 對程式碼不熟者
請到後台「範本」→「編輯 HTML」,搜尋</body> 這個字串,找到後在此字串的前一行,插入「二、程式碼內容及參數」的程式碼即可。
程式碼 L 行的參數即代表 Blogger 的留言區塊,因此可不修改,FB 留言框出現的位置會在原留言區塊的上方。
2. 對程式碼熟悉者
如果 FB 留言框想放在自訂位置,L 行參數可改為 "#fb-comment-area",然後可參考「Blogger 範本__(三)文章及留言區塊的程式碼」,把全部程式碼放在範本中的自訂位置即可。
1. Xuite
效果可參考以下範例網頁:
2. Pixnet
效果可參考以下範例網頁:
3. 對程式碼熟悉者
若想自訂 FB 留言框在部落格中出現的位置,可參考類似「Chrome開發人員工具」,來找出預定擺放區塊的 id 或 class,然後將 L 行的紅色字串,置換為 "#id字串" 或 ".class字串" 這樣的形式即可。
4. 其他部落格
其他部落格若想安裝 FB 留言框,但不知道 L 行參數如何修改,請再留言並提供網址,會再測試後告知如何修改,並增加到本文的安裝範例之中。
由於 FB 的隱私性設定,在「不能管理留言」的情況下,以下情況的留言站長不一定能看到,例如:
不過安裝本文的程式碼後,所有的 FB 留言(包含以上兩狀情況)一定可以收到 email 通知。
email 內容大致如上圖,包含了以下資訊:
如果有意跟留言者交流,可藉由以上資訊與聯繫留言者,互加好友後,原本無法顯示的留言便能出現在 FB 留言板了。
1. 調整留言框 CSS 版面配置
請參考「舊版文章」→ 「五、調整留言框 CSS 版面配置」
2. Email 每日寄送額度
這個 email 通知的功能,是利用 Google 試算表上的「FormEmailer」這個程式,每天能夠寄出的 email 上限是 500 封。
雖然有限制,但實際上本站發佈的「推文系統」及「WYBOARD 部落格即時留言板」也是共用這個 email 寄送系統,感覺上一天從未寄出達 100 封過,就算現在加入這個 FB 留言通知功能,我相信提供給大部分中小型的部落格使用,也是綽綽有餘。
而如果是超大型的部落格,FB 留言一天肯定超過 100 人次的話,請再私下與 WFU 聯繫了(email 在 G 行程式碼),必須使用客製的資料庫,以免佔了共同使用的額度。
若有常見問題產生,會整理在此:
◎ Xuite 貼上程式碼並儲存後,若想要重新編輯「自由欄位」的內容,會發現系統常常自行竄改程式碼,而導致程式無法執行。因此最保險的方法是將本文程式碼自行複製一份,將來欲修改「自由欄位」的內容時,全部重新貼上最為保險。
雖然如此將不能管理留言,不過藉由 FB 提供的 API 仍可取得所有留言資訊,配合 Google 試算表將留言資訊以 email 寄給站長,不會錯失任何留言,且收到通知更為即時。
一、準備動作
1. 選擇是否使用「管理留言」功能
Blogger、WP 等可以修改範本的部落格,可以另外選擇使用「管理留言」的功能,與本文的程式碼並不衝突。而不能修改範本的部落格,以下步驟只要取得 "FB 管理者 ID" 即可跳「二、程式碼內容及參數」。
如果不擔心 App ID 安全問題、選擇管理留言的話,請依照舊版「Facebook留言板安裝懶人包」→「一、準備動作」,來取得 FB 管理者 ID 及 FB 應用程式 ID,並進行下一個動作。
2. 安裝 META 標籤
選擇使用留言管理功能的話,依照舊版「Facebook留言板安裝懶人包」→「三、Blogger 安裝」→「2013.11.22 補充」的內容,將 META 標籤的字串放在範本中
二、程式碼內容及參數
安裝程式碼之前,需修改一些參數,請對照以上程式碼行號:
G:紅色字串請填入自己的 email,並檢查不要拼錯,否則就收不到 email 通知了。
H:預設為不收到自己的留言通知;若要收到自己留言通知請將紅色字串改為 Y。
I:紅色字串請填入自己的 FB 管理者 ID,可參照「一、準備動作」得到此字串。
J:藍色字串請改為符合自己頁面寬度的像素值
K:預設值為最多顯示 5 則留言,可自行調整
L:這一行要設定的是 FB 留言框出現在網頁上的位置,請參照以下大標題,依不同部落格的安裝範例來修改。
三、Blogger 安裝
1. 對程式碼不熟者
請到後台「範本」→「編輯 HTML」,搜尋
程式碼 L 行的參數即代表 Blogger 的留言區塊,因此可不修改,FB 留言框出現的位置會在原留言區塊的上方。
2. 對程式碼熟悉者
如果 FB 留言框想放在自訂位置,L 行參數可改為 "#fb-comment-area",然後可參考「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. Email 每日寄送額度
這個 email 通知的功能,是利用 Google 試算表上的「FormEmailer」這個程式,每天能夠寄出的 email 上限是 500 封。
雖然有限制,但實際上本站發佈的「推文系統」及「WYBOARD 部落格即時留言板」也是共用這個 email 寄送系統,感覺上一天從未寄出達 100 封過,就算現在加入這個 FB 留言通知功能,我相信提供給大部分中小型的部落格使用,也是綽綽有餘。
而如果是超大型的部落格,FB 留言一天肯定超過 100 人次的話,請再私下與 WFU 聯繫了(email 在 G 行程式碼),必須使用客製的資料庫,以免佔了共同使用的額度。
七、常見 FAQ 整理
若有常見問題產生,會整理在此:
◎ Xuite 貼上程式碼並儲存後,若想要重新編輯「自由欄位」的內容,會發現系統常常自行竄改程式碼,而導致程式無法執行。因此最保險的方法是將本文程式碼自行複製一份,將來欲修改「自由欄位」的內容時,全部重新貼上最為保險。