2014年5月15日

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

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


更多實用工具:

23 則留言:

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

    回覆刪除
  2. <1747430820685850667>(以上內容請勿刪除,從括號之後開始留言)沒有啦,這個不難~XD

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

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

    回覆刪除
  4. <3647548633848299324>(以上內容請勿刪除,從括號之後開始留言)會的,將來會發表,只不過不清楚何時能進入排程...XD
    如果想研究的話,其實可以參考我的分頁小工具,自行將 G+、FB 留言框弄進分頁裡面,不過有難度就是了~

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

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

    回覆刪除
  6. <2703023967921761218>(以上內容請勿刪除,從括號之後開始留言)哈哈~沒關係,再等我一陣子吧!

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

    回覆刪除
  8. <7057725366351877620>(以上內容請勿刪除,從括號之後開始留言)[quote]我的blogger用這個方式沒出現留言板[/quote]看了你的網站,因為你啟用了「G+留言框」,他會排斥其他所有留言框,因此請到後台關閉「G+留言框」即可。若要安裝 G+ 留言框,可參考「「Google+留言框與其他留言外掛並存

    [quote]行動版上面可否也顯示?[/quote]請參考「Blogger 行動版範本初探」,只有選擇"自訂"行動版範本,才能在行動版顯示。

    [quote]或是跟版大您的一樣有多種選擇[/quote]我的這個留言板分頁工具,目前尚未正式發布,不過過一陣子就會發佈了~你可以訂閱本站來追蹤這件事。

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

    回覆刪除
  10. <8895994108942546969>(以上內容請勿刪除,從括號之後開始留言)請留下你的網址,才能查看是什麼情況。另外,除了系統提供的參數修改,其餘的程式碼請不要變動,我從你的圖看到,似乎有更改了某個 email 字串?

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

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

    回覆刪除
  12. <4509230002600352355>(以上內容請勿刪除,從括號之後開始留言)很抱歉 kivxlee.blogspot.com 違反了本站的版權聲明,請參閱「WFU BLOG 的版權聲明及版權圖示」,你安裝「單篇文章計數器」但移除了本站的 "出處連結",所以案件不受理。

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

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

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

    回覆刪除
  15. <7701468945213883423>(以上內容請勿刪除,從括號之後開始留言)痞客邦本身有提供 FB 留言框的 app,所以必須先將官方的 app 移除,再使用本文開頭的「痞客邦安裝流程」

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

    回覆刪除
  17. <1958619532091792980>(以上內容請勿刪除,從括號之後開始留言)呵呵,我都寫在文章開頭了:「本文只針對 Blogger 的安裝流程,其他部落格請參照以下連結:

    痞客邦安裝流程
    Xuite 安裝流程」

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

    回覆刪除
  19. <2520470365816728533>(以上內容請勿刪除,從括號之後開始留言)我在你的這篇文章留言測試了,沒什麼問題呢。看到我的 FB 測試留言後,可以將它刪除。

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

    回覆刪除
  21. <6050244382668263569>(以上內容請勿刪除,從括號之後開始留言)不客氣,類似的說法的確其他讀者也有提過~~ XD

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

    回覆刪除
  23. <2316325199101852720>(以上內容請勿刪除,從括號之後開始留言)我看沒什麼問題, 你可以檢查有沒有正確登入 FB, 也有可能是瀏覽器的問題.

    回覆刪除

張貼留言注意事項:

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