2013年11月15日

[小工具]FB 留言板安裝懶人包__各大部落格通用(附Blogger, Xuite, Pixnet範例)

A+
2014.5.28 公告:最新版本請見:「Facebook 留言板安裝懶人包 + 留言email通知 + 自適應寬度

Facebook 留言框要成功安裝在部落格不是容易的事,從官方提供的安裝方式來看,只能裝在 Blogger、Wordpress 這種開放自訂範本的部落格。但就算在 Blogger、WP,仍然常看到試遍各種網路教學、還是找不出安裝失敗因素的各種反應。其原因主要在於安裝步驟多,使用者不容易找出是那個步驟導致失敗。

前陣子安裝完 FB 留言框後,研究一下整個流程,覺得是有辦法將安裝程式碼的動作簡化到最少──只有一個步驟。利用本文封裝後的程式碼懶人包,以後安裝 FB 留言框就不會是苦差事了。而且更棒的是,由於只有一個步驟,如此只要是支援 js 的部落格,都是有可能成功安裝 FB 留言框的



一、準備動作


雖然安裝懶人包程式碼只要一個步驟,但仍須事先取得 FB 的身份識別碼,因此請先進行以下動作:

1. 取得 FB 管理者 ID

進入這個網址:http://findmyfacebookid.com

輸入 Facebook 帳號的網址後,按下「Lookup Numeric ID」即可取得管理者 ID,類似 100006369483483 這樣的一串數字。


2. 取得 FB 應用程式 ID

參考這篇教學「申請 Facebook 應用程式 APP ID 流程」即可取得。

因此以本文來說,取得 APP ID 是比較稍微有變數的一部份,能成功的話之後問題就不大了。



二、程式碼內容及參數


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


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

D:紅色字串請改為「一、準備動作」→「1. 取得 FB 管理者 ID」的字串 (Blogger 可省略此動作)

E:紅色字串請改為「一、準備動作」→「2. 取得 FB 應用程式 ID」的字串 (Blogger 可省略此動作)

F:藍色字串請改為符合自己頁面寬度的像素值

G:預設值為最多顯示 5 則留言,可自行調整

H:這一行要設定的是 FB 留言框出現在網頁上的位置。稍微解釋一下──
  • 如果對程式碼不熟的使用者,請參照以下大標題,依不同部落格的安裝範例來修改。
  • 如果對 HTML 很熟悉的使用者,想自訂 FB 留言框的擺放位置,可參考類似「Chrome開發人員工具」,來找出預定擺放區塊的 id 或 class,然後將 H 行的紅色字串,置換為 "#id字串" 或 ".class字串" 這樣的形式即可。

I:FB 留言框官方有兩種顏色效果,預設值適合淺色為底的部落格;若部落格底色是深色,可將藍色字串改為 dark


三、Blogger 安裝


請到後台「範本」→「編輯 HTML」,搜尋 </body> 這個字串,找到後在此字串的前一行,插入「二、程式碼內容及參數」的程式碼即可。

2013.11.22 補充

並在 <head> 的後面一行,插入以下程式碼,才能使用留言管理的功能:

<meta content='100006369483483' property='fb:admins'/>
<meta content='457090704320320' property='fb:app_id'/>

以上第一行的紅色字串請改為為自己的管理者 ID第二行的紅色字串請改為為自己的 add ID


程式碼 H 行的參數即代表 Blogger 的留言區塊,因此可不修改,FB 留言框出現的位置會在原留言區塊的上方;若 FB 留言框想放在別的地方,請按照 H 行的說明進行。

想先看 Blogger 的安裝效果可參考以下網頁:




四、非 Blogger 安裝


非 Blogger 平台的部落格,除了 WP 以外,大致都需要安裝到側邊欄的小工具或自訂欄位,最好放在最下面的位置;且程式碼 H 行的參數就一定要修改了,請參考以下的範例安裝。

1. Xuite
  • 先修改「二、程式碼內容及參數」的所有參數,H 行的紅色字串請改為 ".item_message"
  • 新增自由欄位,所有程式碼複製進去,並將此自由欄位放在側欄最下方即可。
  • FB 留言框出現的位置會在原留言區塊的上方。

想看效果可參考以下範例網頁:



2. Pixnet

Pixnet 本身有提供 FB 留言框的 app,可直接在「應用市集」安裝。測試之後發現,Pixnet 會將這個 app 的位置綁定在文章結尾處而無法移動。因此,如果想讓 FB 的留言集中在部落格原本留言區塊的話,那麼就可使用本文的程式碼,請依以下步驟:
  • 先修改「二、程式碼內容及參數」的所有參數,H 行的紅色字串請改為 "#comment-text"
  • 新增自訂欄位,所有程式碼複製進去,並將此自訂欄位放在側欄最下方即可。
  • FB 留言框出現的位置會在原留言區塊的上方。

想看效果可參考以下範例網頁:



其他部落格若想安裝 FB 留言框,但不知道 H 行參數如何修改,請再留言並提供網址,會再測試後告知如何修改,並增加到本文的安裝範例之中。



五、調整留言框 CSS 版面配置


如果對留言框的版面效果不滿意,例如 Xuite 剛安裝後可能會貼住左邊界,那麼就需要設定 CSS 參數,例如設定邊界值 margin 的參數。以下提供的範例,其參數內容請依自己需求調整。

1. 由於每個部落格的設定不一樣,如果知道部落格的 CSS 如何設定的話,可在 CSS 設定區域加入以下程式碼──

.fb-comments {
margin: 10px;
}


2. 如果不清楚部落格 CSS 如何設定的話,那麼最簡單的方法(但網頁執行效率稍差),就是在程式碼 A 行與 B 行之間,插入以下程式碼──

<style>
.fb-comments {
margin: 10px;
}
</style>


3. 經測試後 Pixnet 的 FB 留言框會與下方原本的留言貼太近,因此下邊界值最好設定多一些,可在 CSS 設定區域加入以下程式碼──

.fb-comments {
margin-bottom: 20px;
}




六、管理 FB 留言


如何管理 FB 的留言,網路上已經有非常多教學,因此就不用自己再寫一次,以下直接給連結。

這篇請直接看 Step 7~8,可讓管理者收到留言通知


這篇的後半段,對於如何管理留言講得比較仔細。


最後,如同「四、非 Blogger 安裝」所提,其他部落格若安裝上有問題,歡迎留言詢問,會盡量補齊其他部落格的安裝方式。


更多實用工具:

35 則留言:

  1. 成功了!
    懶人包真好用~我反而是appID卡關比較久~
    先放一段時間看好不好用了!搞不好大家會比較想在內建的留言板留言XD

    回覆刪除
  2. <4907583114425452573>(以上內容請勿刪除,從括號之後開始留言)相對之下的確是 appID 要多花一些時間~那就拿你家當 Xuite 範例了 ^^

    回覆刪除
  3. 您好:
    請問痞客邦想要自訂管理FB留言板(已成功崁入自己所設的留言板),
    不知道是不是 官方已在head加入官方預設app_id :101730233200171
    (痞客邦又無法自訂head區塊,無法設定自己的APP_ID),
    導致APP抓不到無法也無法由Comment Moderation Tool 管理自己的FB留言板部分,
    請問該如何解決?謝謝。

    回覆刪除
  4. <2035909371233548969>(以上內容請勿刪除,從括號之後開始留言)1. 請問是用官方的app還是本文的程式碼來安裝FB留言板?請留個網址來看你的安裝情形。
    2. "無法由Comment Moderation Tool 管理自己的FB留言板" 是怎麼樣的情形?請詳細描述一下,是無法進入還是什麼功能無法啟用?

    回覆刪除
  5. <7619025155910114924>(以上內容請勿刪除,從括號之後開始留言)1. 使用本文程式碼(官方app有停用)。
    痞客邦在[所有會員Blog]的head標籤後面加入官方APP ID(101730233200171)。

    本文程式碼FB留言板可正常運作,也可與官方app共同正常使用且無衝突。

    2.Comment Moderation Tool(FB應用程式所自訂崁入留言板的APP_ID)載入頁面之後,沒有顯示已崁入blog FB留言板裡面的留言內容及沒有擁有管理權限。

    因為pixnet無法自訂head標籤區塊,所以是否可能因為Comment Moderation Tool一直抓到官方APP ID導致無法自訂取得留言板管理權限呢?感覺是無解的問題....請問有什麼辦法可以解決?
    謝謝。

    回覆刪除
  6. <2811104036706874063>(以上內容請勿刪除,從括號之後開始留言)瞭解你的意思了,我試著只使用官方的app,結果官方的FB留言框一樣是沒有管理留言的功能。

    因此我覺得這是Pixnet方面的問題,而目前我能建議的就是跟Pixnet客服反應這個問題了!如果最終官方能解決的話,歡迎再回報,看看本文程式碼是否有需要修正的地方。

    回覆刪除
  7. 這懶人包真的是省事很多耶! 想當初我安裝這個光是用那個APP_ID就用好久!
    還好我有把它紀錄起來~所以帶入懶人包程式碼馬上就掛回去留言框了!
    謝謝你啊^^

    回覆刪除
  8. <3673436504882994892>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^

    回覆刪除
  9. <7187735047385681036>(以上內容請勿刪除,從括號之後開始留言)您好:目前痞客邦客服回覆『現階段無法讓會員自行修改「FB app_id」部分,只能修改「fb:admin_id」,可透過 FB 同步文章設定的。』
    但是沒有設定同步文章設定,按照本文程式碼使用,再加上FB的Debugger工具,就能抓到「fb:admin_id」部分;取得管理權限之後,發現本文程式碼所抓到的APP_ID部分是痞客邦官方的(非程式碼內自訂的APP_ID),所以還是沒辦法從Comment Moderation Tool管理自己所自訂的FB留言板部分(亦無FB通知的功能)。

    若於崁入blog的FB留言板將自己設為「版主」之設定,則通知的部分是全部的痞客邦有使用FB app的blog,Comment Moderation Tool部分也是全部的痞客邦有使用FB app的blog的FB留言。

    所以可能其他功能有使用到需要FB app_ID部分(?)官方才表示無法讓會員自訂APP_ID部分。目前還是因為無法自訂head區塊,所以APP_ID這個問題可能還是無解?

    不過還是謝謝您提供如此方便的安裝懶人包!謝謝。

    回覆刪除
  10. <5858242875071202346>(以上內容請勿刪除,從括號之後開始留言)謝謝你的詳細回報,我仔細研究過了,不能在 </head> 前加入 meta 標籤,的確無論如何無法使用管理留言的功能。

    不過我找到了解決方法,可以有辦法以 email 寄送每一則留言的資訊來通知站長,過陣子等程式完成之後會發佈新文章,請再關注後續文章、或訂閱本站的 RSS 了!

    回覆刪除
  11. <5858242875071202346>(以上內容請勿刪除,從括號之後開始留言)@Rong Hua LI, 已經有更新版程式了:請看「Facebook留言板安裝懶人包__留言email通知

    回覆刪除
  12. 請問留言版的顏色該如何調整呢?

    回覆刪除
  13. <8596540276163243962>(以上內容請勿刪除,從括號之後開始留言)我注意到你的版面底色為黑色,顯示的FB留言框顏色就是官方設定的顏色,可參考官方網頁的效果:https://developers.facebook.com/docs/plugins/comments/

    FB官方只有兩種效果可選擇,你的已經是深色的效果了,所以也沒有更好的選擇了~

    回覆刪除
  14. 感謝,我想問如果想把留言版改成dark要從哪改?

    回覆刪除
  15. <4756722475131624515>(以上內容請勿刪除,從括號之後開始留言)我修改了程式碼,請移除舊的程式碼,重新安裝新的程式碼,然後參照「2013.12.9 補充」的內容,修改 I 行的字串為 dark 即可。

    BTW, 我看你的 CBOX 很多留言機器人,可以考慮安裝我的「WYBOARD 部落格即時留言板」,然後來參加 Blogger 社群的「週年慶猜謎活動」,有機會可以拿到資料庫大獎,就能編修自己的留言資料了。

    回覆刪除
  16. <6680120764229653325>(以上內容請勿刪除,從括號之後開始留言)不好意思,看了下面的留言 #8 才發現,我誤以為你的網站已經是 dark 的效果了(其實是 light 效果),所以我改了程式碼,請按照我在 留言 #8 的回覆進行即可。

    回覆刪除
  17. 您好:小米看了您的"在blogger安裝fb留言版''的方法,
    在安裝之後一開始也都可以正常留言,
    可是剛突然發現下方的fb留言明明有人留言,
    卻都無法顯示出來,不知道是什麼原因,請問您知道該怎麼辦嗎?
    謝謝您 > <

    回覆刪除
  18. <7749011643932909116>(以上內容請勿刪除,從括號之後開始留言)麻煩提供您覺得有問題的那篇文章的網址,來看看是什麼狀況~

    回覆刪除
  19. 我的FB留言回覆都無法在任何有"FB comments"的公開顯示是為什麼?
    因為我是新申請,不會弄,要怎麼做?

    回覆刪除
  20. <7232829554687432231>(以上內容請勿刪除,從括號之後開始留言)你可以在這篇文章的 FB 留言板留個言,測試看看是什麼情形。

    另外有可能是你的 FB 隱私權設定的關係,例如我的 FB 帳號設定為任何人都能看到,那麼我的留言就能夠公開顯示;如果你的帳號設定為只有朋友才能看到,那留言就不一定能被所有人看到。

    回覆刪除
  21. <7945540083186389049>(以上內容請勿刪除,從括號之後開始留言)
    無法顯示!只有自己才看得到!FB改版很多次
    現在已經很難搞了!

    回覆刪除
  22. <2884329061183279347>(以上內容請勿刪除,從括號之後開始留言)從你原本的敘述,以為你的留言自己也看不到;現在知道你能看到自己的留言,那麼這是正常現象,大部分的帳號都是這樣的。

    解決方法如我上面提的,公開的 FB 帳號,留言才能讓所有人都看到,這是 FB 的隱私性設定限制。

    回覆刪除
  23. <581201287921876769>(以上內容請勿刪除,從括號之後開始留言)
    還是不行!算了沒關係謝謝!

    回覆刪除
  24. <496893233529913947>(以上內容請勿刪除,從括號之後開始留言)FB → 設定 → 隱私 → 誰可以看到我的東西? → 誰可以查看你往後的貼文 → 設定成「公開」試試看

    如果設定成「朋友」的話,只有你的朋友才能看到你的留言。

    回覆刪除
  25. 感謝!我成功在我的部落格上安裝FB留言板了。
    原本使用Facebook developer 官方產生的html5語法放入blogger都判定有誤,什麼appId後面要加";"之類的。

    回覆刪除
  26. <5767476048386641772>(以上內容請勿刪除,從括號之後開始留言)恭喜~不過這篇是最舊的版本,可參考文章開頭的公告,安裝最新版本喔!

    回覆刪除
  27. 你好,今天發現原本在blogger安裝你的FB留言板,
    網頁中的所有留言都看不見了,
    但在FB的「審核工具」還是可以看到這些流言,

    看了一下發現留言都存在.com 可是我的blogger是.tw
    是這個原因嗎 為何留言會突然消失

    回覆刪除
  28. <6812282671093389149>(以上內容請勿刪除,從括號之後開始留言)你好,請留下出問題的文章網址,看看是什麼情形

    回覆刪除
  29. 比方這一篇 .com 可以看見留言
    http://justlaughtw.blogspot.com/2016/03/natsume5-anime.html

    但是 .tw 流言卻看不見了
    http://justlaughtw.blogspot.tw/2016/03/natsume5-anime.html

    回覆刪除
  30. <1226569736357733902>(以上內容請勿刪除,從括號之後開始留言)看了你網頁的安裝碼,J 行的內容有問題:

    postUrl = "<data:blog.canonicalUrl/>";

    這裡在網頁原始碼,我看到的變成 .tw 的網址 → 但這不應該發生,正常來說,應該出現 .com 的網址。

    由於我看不到你的範本內容,建議你附個截圖,把 J 行的內容給我看看。

    回覆刪除
  31. 那weebly也可以放這種FB留言板嗎?! 可以的話 我fbLocation要填甚麼??

    回覆刪除
  32. <7328022869433666545>(以上內容請勿刪除,從括號之後開始留言)weebly 能否安裝要請自行測試喔,若不知 fbLocation 怎麼填,可以附上你的網址,告知想要擺放的地方,我再來看怎麼填。

    回覆刪除
  33. 你好~完全新手,目前正架構中的blogger--http://www.jojohouse.com.tw/
    安裝了fb留言板之後,header-wrapper下方的三格隨機文章會被移除
    請問是甚麼問題呢?(目前已移除fb留言板)

    回覆刪除
  34. <8291750060685898953>(以上內容請勿刪除,從括號之後開始留言)請見下面的留言注意事項,詢問非官方範本問題、或貴站為商業網站,請參考相關連結

    回覆刪除

張貼留言注意事項:

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