2013年11月29日

[小工具]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> 後面即可。



二、程式碼內容及參數


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

  1. <!-- FB留言框懶人包__留言通知 start -->
  2. <b:if cond='data:blog.pageType == "item"'><div id="fb-comment-area"></div>
  3. <script>
  4. (function () {
  5. var postUrl = "<data:blog.canonicalUrl/>",
  6. //<![CDATA[
  7. email = "waynefu.g@gmail.com", // 填入自己的 email 可收到留言通知
  8. notify = "N", // 若要收到自己的留言通知請改為 Y
  9. admins = 351945654935259, // 填入自己的 FB 管理者 ID
  10. width = "550px", // 請改為符合自己頁面寬度的像素值
  11. numposts = 5, // 最多顯示幾則留言
  12. fbLocation = ".comments", // 留言框的擺放位置，請依不同的部落格範例, 置換不同的字串
  13. color = "light", // 預設值適合部落格底色為淺色；若部落格底色為深色, 字串請改為 "dark"
  14. sheet = "dEJjWGJDWWlDRl9YZld0ZDJGN2tlN0E6MA";
  15. var cb=function(){var $=jQuery;postUrl=(postUrl.search("http")<0)?"http://"+location.hostname+location.pathname:postUrl;$("head").prepend("<meta content='"+admins+"' property='fb:admins'></meta>");$(function(){$("body").prepend("<div id='fb-root'></div><sc"+"ript>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'http://connect.facebook.net/zh_TW/all.js#xfbml=1'; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</sc"+"ript>");$(fbLocation).prepend("<div class='fb-comments' data-notify='true' data-colorscheme='"+color+"' data-numposts='"+numposts+"' data-width='"+width+"' href='"+postUrl+"'></div>");FB.XFBML.parse()})};var getScript=function(url,cb){var script=document.createElement("script");if(script.readyState){script.onreadystatechange=function(){if(script.readyState=="loaded"||script.readyState=="complete"){script.onreadystatechange=null;if(cb){cb()}}}}else{script.onload=function(){if(cb){cb()}}}script.src=url;document.documentElement.firstChild.appendChild(script)};if(typeof jQuery==="undefined"){getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",cb)}else{cb()};window.fbAsyncInit=function(){FB.Event.subscribe("comment.create",function(b){var a=b.href,c=FB.Data.query("SELECT text, fromid FROM comment WHERE post_fbid='"+b.commentID+"' AND object_id IN (SELECT comments_fbid FROM link_stat WHERE url='"+a+"')"),d=FB.Data.query("SELECT name FROM user WHERE uid in (select fromid from {0})",c);FB.Data.waitOn([c,d],function(){var n=c.value[0],k=d.value[0],p="formResponse?formkey=",e=escape(k.name),w=".",o="google.com",v=escape(n.text),x="/",l=n.fromid,q="docs",j=/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/,i="spreadsheet",r=escape(document.title),m="https:",u="";email=(email!="waynefu.g@gmail.com"&&email.match(j))?email:"";u=m+x+x+q+w+o+x+i+x+p+sheet+"&ifq&entry.0.single="+a+"&entry.1.single="+e+"&entry.2.single="+l+"&entry.3.single="+v+"&entry.4.single="+r+"&entry.5.single="+email+"&submit=Submit";if(admins!=l&&notify!="Y"){$.getScript(u)}})})};
  16. //]]>
  17. } )();
  18. </script></b:if>
  19. <!--FB留言框懶人包__留言通知 end, Design by WFU BLOG-->

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

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 可能會要求該網站使用客製的試算表資料庫。

而如果需要使用自訂的試算表資料庫存放留言，以獲得獨立的寄信配額，請使用本站側邊欄的表單與我聯繫。



七、常見 FAQ 整理


若有常見問題產生，會整理在此：

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


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

前端開發 ‧ Blogger 探研 ‧ 網站架設

歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的 Blogger 中文部落格。利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！

下方連結還有更多的 Blogger 資源及服務，如需諮詢、合作，歡迎填寫 聯絡表單 或來信：contact@wfublog.com

11 則留言:

  1. Almighty Demiurge2013年12月5日 晚上8:47

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

    回覆刪除
  2. 跪婦阿冠說故事2013年12月7日 下午4:26

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

    回覆刪除
  3. Unknown2013年12月10日 下午4:45

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

    回覆刪除
  4. SHIQUAn2014年2月10日 清晨5:35

    email 寄送系統?? 這就是收到通知的原因??

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

    回覆刪除
  5. Bruce Lee2014年5月27日 凌晨2:34

    Hello Wayne大 好久不見

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

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

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

    但還是改不出來 Orz

    回覆刪除
  6. Bruce Lee2014年5月28日 凌晨12:34

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

    好的，麻煩大大了。

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

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

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

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

    回覆刪除
  7. Bruce Lee2014年5月29日 凌晨12:00

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

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

    回覆刪除
  8. dc2014年6月17日 凌晨3:24

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

    回覆刪除
  9. dc2014年6月17日 晚上8:36

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

    回覆刪除
  10. dc2014年6月18日 凌晨4:32

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

    回覆刪除
  11. Unknown2014年6月25日 下午4:15

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

    回覆刪除

張貼留言注意事項：

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

TOP