2014年5月15日

Facebook 留言板安裝懶人包+留言 email 通知+自適應寬度

Facebook 留言板安裝懶人包+留言 email 通知+自適應寬度

Wayne Fu 0 A+
上一版」留言 #5 +Lee Bruce 詢問能否改成自適應的版本。由於目前行動裝置的普及化,而各種行動裝置的螢幕寬度不一,因此舊版本只能固定 Facebook 留言框寬度的 px 值,的確不合時宜,於是本篇做了小幅度的修正。

另外,之前的文章一次說明了各種部落格平台的安裝方式,版面可能稍微凌亂、不利於閱讀,因此這次不同平台將個別說明,本文只針對 Blogger 的安裝流程,其他部落格請參照以下連結:



<< 請注意!本篇文章含會員限定內容 >>



一、留言框寬度設計的考量


根據 +Lee Bruce 提供的連結「Facebook Comment Responsive Design」,這個版本的設計原理包含了,當使用者改變視窗大小時,重新計算寬度,並重新載入 FB 留言框。

WFU 的版本考量如下:

1. 這樣的設計是真正的自適應版面,不過 WFU 覺得使用者改變視窗大小的機率不高,且每次一改變視窗就重新載入 FB 留言框,須花費額外的執行時間(例如有時使用者會在短時間內,多次按 Ctrl+、Ctrl- 來放大縮小調整視窗),因此未採用這個設計。

2. 留言框寬度符合自適應版面的寬度後,會產生的問題為,或許有的版面 100% 寬度在視覺上效果不佳,或許有的使用者不想要 100% 的寬度。因此 WFU 仍舊將寬度的參數開放出來自訂,例如可以設定為 95% 寬度這樣的效果。



二、安裝程式碼


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

接著請到 Blogger 後台「範本」→「編輯 HTML」,搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


基本上如果沒有特殊需求的話,儲存後就可以看到效果了,FB 留言框會出現在 Blogger 留言區塊的上方。也可看以下範例網頁的效果:



如果需要更多的功能,那麼請繼續往下看如何修改參數,及其他安裝步驟。



三、修改參數


請參照安裝程式碼行號及綠字的備註──

G:預設值 1 代表 FB 留言框的寬度為 100%;若改為 0.9 代表寬度為 90%

H:請改為自己的 email,那麼只要一有留言,可及時收到通知

I:請參考「四、管理留言」的步驟,填入自己的 FB 管理者 ID,那麼自己的留言就不會收到 email 通知

J:設定顯示幾則留言

K:留言框預設會出現在 Blogger 留言區塊的上方;若想擺放到自訂的位置,本行參數可改為 "#fb-comment-area",然後可參考「Blogger 範本__(三)文章及留言區塊的程式碼」,把全部程式碼放在範本中的自訂位置即可。

L:若部落格底色為深色, 字串請改為 "dark"



四、管理留言


如果需要管理 FB 留言的話,請請依照舊版「Facebook留言板安裝懶人包」→「一、準備動作」,來取得 FB 管理者 ID 及 FB 應用程式 →「三、Blogger 安裝」→「2013.11.22 補充」的內容,將 META 標籤的字串放在範本中 <head> 後面即可。



五、其他說明及注意事項


為了避免重複內容,關於「使用說明」、「調整 CSS」、「Email 每日寄送額度」等等事宜,請直接參照「上一版」→「五、使用說明」→「六、其他注意事項」

2015.1.13 公告:由於共用的試算表使用量日漸增加,為了讓所有使用者能正常運作,會不定期檢查資料庫,若有商業使用、或每日使用量較大的網站,會要求改用客製試算表,「使用者付費」是比較公平的折衷方式。



六、常見 FAQ


日後若有常見問題,會持續補充在此。

Q1: FB 留言 Ju Nina 表示無法收到留言通知

Ans:
  • 由於 Google Drive 於 2014 九月~十月 進行舊版升級,導致原本程式碼無法正常執行。目前本文的程式碼已經完成更新,請重新安裝程式碼即可。
  • 請檢查範本中的 jQuery 版本,若版本太舊可能會讓程式無法正常執行。可搜尋範本中類似 "/jquery/?.?.?/jquery.min.js" 這樣的字串,若是 ?.?.? 的版本號小於 1.8.2 的話,請一律改為 1.8.2


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

12 則留言:

  1. 大大真是太強了 剛剛才發現已經做好了 馬上來試試看

    回覆刪除
  2. 希望能順便出像這個部落格留言一樣的按鈕教學阿

    不然臉書留言跟部落格留言疊在一起好長阿

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

    這個難度有點考倒我這個外行人了 囧

    回覆刪除
  4. 請問我的blogger用這個方式沒出現留言板
    另外,在行動版上面可否也顯示??
    或是跟版大您的一樣有多種選擇
    http://mentor14901.blogspot.tw/

    回覆刪除
  5. Wayne您好,我想請教一下,我已經改成新的程式碼了,mail也給成我的,但是還是沒有收到通知
    不知道為什麼呢?
    我附上我擷取的圖
    http://i.imgur.com/1XbsbuT.png

    回覆刪除
  6. <4636691628675576798>(以上內容請勿刪除,從括號之後開始留言)
    我的網址是kivxlee.blogspot.com
    留言板有出現
    只是不會收到通知!

    原來那個不用改是嗎?
    我以為那個mail也是要改成我的XD

    回覆刪除
  7. <185016463839723190>(以上內容請勿刪除,從括號之後開始留言)
    不好意思,因為一直不小心按到所以拿掉了那段,
    我沒注意到這樣違反規定。
    真的很抱歉,跟您說聲對不起。

    已經加回去了,感謝您的付出和提供。

    回覆刪除
  8. 我是痞客邦的用戶,使用新的程式碼後,整個FB的留言版都會消失不見,連以前用的簡易版的FB留言版的APP也會消失,以前程式碼安裝完後會兩個都顯示。請問這個問題要如何解決??

    回覆刪除
  9. 所以是要使用「痞客邦安裝流程」該篇文章裡面的代碼嗎??因為用本篇的是無法看到FB留言版的。<5780508170196270164>(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  10. 您好,照著這篇安裝了FB留言板,自己嘗試留言按了發佈後卻出現訊息失敗,而且留言框變成灰色無法再按發佈,請問會是什麼問題呢?是ID部分錯了嗎?我後續是想安裝「幫 Blogger 安裝三種留言分頁 」這個的,請您撥空指導,非常感謝
    http://ellin0409.blogspot.tw/2015/02/solonambiniortopad.html

    回覆刪除
  11. <8236941036815869389>(以上內容請勿刪除,從括號之後開始留言)
    默默的它就能使用了.....安裝那天弄好久卻一直都出現訊息失敗,果然要有高手壓陣才可以(跟機器上要放乖乖差不多原理),感謝您啊^^

    回覆刪除
  12. 你好~我是貴網粉絲,追蹤已久.
    請問此篇為何無法閱覽隱藏內容呢?(已加入會員)
    謝謝

    回覆刪除

張貼留言注意事項:

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

TOP