2014年7月29日

[小工具]幫 Blogger 安裝三種留言分頁 (含 Google+ 及 Facebook 留言板)

[小工具]幫 Blogger 安裝三種留言分頁 (含 Google+ 及 Facebook 留言板)

Wayne Fu 0 A+
2015.9.4 公告:若因未將 js 檔分流,而導致留言分頁無法顯示,請重新安裝本文程式碼,並自行將 js 檔分流!

部落格常見的留言板外掛有 G+、FB、Disqus 等留言板,如果能同時擺放幾個留言板是有他的好處(後面會分析),但多個留言板並存時,隨之而來的是版面凌亂,由上到下的多個留言板會讓訪客滑鼠捲個不停。因而喜歡潔淨版面的站長會選擇只放其中一種,甚至隱藏官方留言板,但這是很可惜的事,因為最不該屏棄的就是官方留言板。

如果安裝了本文的留言分頁小工具後,不但 Blogger、G+、FB 留言板三合一,沒有了上述的缺點,還能各自保有本身的優點。以下先簡單介紹這個留言分頁的功能及三個留言板的優點,想直接安裝請跳至「二、安裝準備動作」。




一、留言板的功能及優點


1. 留言分頁

除了節省擺放留言板的空間以外,這個小工具還能設定預設開啟的分頁為 G+ 留言板、或 FB 留言板。站長可以根據自己網站讀者的習性、三種留言版的使用率,來決定預設開啟的分頁。

這個工具的基本款只放了 Blogger、G+、FB 三個留言板,原因為 G+ 與 FB 留言板,是對社群傳播力有幫助的工具,會比其他任何留言板的功效來得大

另外,這個小工具的 G+ 與 FB 留言板都支援自適應版面,會根據螢幕寬度來顯示留言板的寬度


2. Blogger 官方留言板

簡單說明官方留言板的好處,主要為 SEO 的用途,留言也可成為搜尋引擎索引的內容。由於這個主題比較大,有機會再詳述。


3. G+ 留言板

如果想知道文章誰分享到 G+,有誰留了言、按了 +1,那麼 G+ 留言板是非常棒的工具,不僅僅是留言功能而已

想對 G+ 留言框有通盤的瞭解,這篇「G+ 社交圈與 FB 社團比一比」分析地非常詳細。


4. FB 留言板

最大社群網站的留言板,應該不必多解釋了,如果 FB 朋友多的話,這個留言板對傳播力很有幫助。


5. 擴充功能

除了基本功能,還可另外顯示各個留言板的留言數量、新增其他留言板等,請見「五、擴充功能」。



二、安裝準備動作


1. 關閉 G+ 留言板選項

如果 Blogger 後台 → Google+ → 勾選了「為這個網誌啟用 Google+ 留言功能 」,請將這個功能取消,以免無法正常執行。


2. FB 管理留言

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


2014.8.1 新增── 3. 刪除相關外掛

若曾安裝過「FB留言板安裝懶人包」、「G+留言框與其他留言外掛並存」類似這樣的留言工具,請完整移除原本的程式碼,以免顯示異常。



三、安裝 CSS


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

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

<style>
/* 留言分頁 start*/
#commTab { /* 整個分頁區塊 */
height: 35px;
margin-top: 50px;
}
#commTab img {
align: left;
padding: 0 px;
vertical-align: -3px;
}
.commTab-area { /* 個別分頁區塊 */
margin: 30px auto;
}
.commTab-tab { /* 分頁按鈕 */
font: bold 20px Arial;
margin-right: 10px;
}
.commTab-goTop { /* 回到分頁選單按鈕 */
text-align: center;
margin-top: 50px;
font-size: 22px;
cursor: pointer;
}
.commTab-menu { /* 整個分頁區塊 */
margin: 0px;
height: 25px;
border-bottom: 1px dotted #ccc;
}
.commTab-in { /* 作用中的分頁 */
color: #333;
vertical-align: 5px;
border: 1px solid #8abeb7;
border-left: 4px solid #8abeb7;
border-radius: 3px;
padding: 4px;
cursor: pointer;
background-color: #ffffff;
}
.commTab-out { /* 非作用中的分頁 */
color: #777;
vertical-align: 5px;
border: 1px solid #8abeb7;
border-radius: 3px;
padding: 4px 4px 4px 7px;
cursor: pointer;
background-color: #dde3dc;
}
.buttonAll { /* 回到分頁選單按鈕 */
cursor: pointer;
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #fff;
color: rgba(255,255,255,1);
padding: 1px 5px;
border-style: solid;
border-width: 1px;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset;
}
.buttonAll:hover {
box-shadow: 0 1px 1px rgba(255,255,255,0.5) inset,0 0 2px rgba(0,0,0,0.2);
opacity: 0.9;
}
.buttonAll:active {
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4) inset;
opacity: 1;
color: rgba(255,255,255,0.5);
}
.buttonGrey { /* 回到分頁選單按鈕 */
cursor: pointer;
border-radius: 4px;
background: #f2f2f2;
background: rgba(0,0,0,0.05);
border-color: #eee;
border-color: rgba(0,0,0,0.1);
color: #999;
color: rgba(0,0,0,0.5);
padding: 3px 5px;
}
#showFBcomment.fb_iframe_widget {display:block!important;}
/* 留言分頁 end*/
</style>


想要自訂 CSS 參數的話,請見綠字註釋,來找到對應修改的區塊。



四、安裝程式碼


接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


請參照以上程式碼行號修改參數:

F:請參照綠色字串,填入預設要顯示的分頁代表數字

G:數字 5 可改為 FB 留言框最多顯示的留言數

H:如果部落格顏色是深色底,請改字串為 "dark"

N:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。

2014.8.3 新增:

I~K:這三行分別為 Blogger、Goolge+、Facebook 分頁上的文字。有讀者提出手機版面上,分頁會被斷行的情形,如果想要縮減整個區塊的寬度、避免被斷行的話,可以自行修改這些文字,或是留下空白字串(兩個雙引號)"",來達到這個目的。



五、擴充功能


如前所提,這個留言分頁工具是基本款,由於每個人需要的功能都不一樣,如果有其他客製需求,請使用本站側邊欄的表單與我聯繫:

  • 想顯示個別留言板的留言數量
  • 想新增留言分頁,例如 Disqus、「推文」、「私密留言
  • Blogger 以外的部落格想要安裝這個小工具
  • 其他功能請描述



六、常見 FAQ


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

Q1: 留言 #5、#110 詢問如何隱藏 FB、G+ 分頁?

Ans: 請分別在 CSS 多加一行:

  • 隱藏 FB 分頁:.commTab-tab[title="使用 FB 留言框"]{display: none;}
  • 隱藏 G+ 分頁:.commTab-tab[title="使用 G+ 留言系統"]{display: none;}


Q2: 留言 #7、8 詢問 G+ 留言內容太長時,無法完整顯示?

Ans: G+ 留言框外面是個透明的、有捲軸的框架,用滑鼠滾輪在留言內容捲動,就能把看不到的內容捲上來了。


Q3: 留言 #9 詢問按進 G+ 按鈕, 只是顯示"開始中...", 就這樣子停了下來. :( 沒法鍵入任何文字.?

Ans: G+ 留言框其實偶爾都會這樣,過一陣子應該自己就會修好了。可以用這個網址來檢測:「https://gdriv.es/comments」,輸入自己的網頁,就能測試是否為官方的問題,還是本文小工具的問題。


Q4: 留言 #44 詢問 FB 留言板能否改為其他語言?

Ans: 請下載程式碼 N 行的 js 檔,編輯這個檔案、尋找字串 "zh_TW",改成對應的語言 → 請參照官方提供的「FacebookLocales.xml」,找到需要的語言字串來置換,並參照官方的說明「Locales and Languages Supported by Facebook」,有幾個語言選項是不支援的。修改完後,將 js 檔上傳到自己的空間,並修改程式碼 N 行的 js 檔路徑。


Q5: 留言 #58 詢問電腦版不論 IE11 或 CHROME 都無法顯示 FB 留言板。

Ans: 檢查了一下,FB 已經不支援舊版 API,因此修改了程式碼。請重新安裝本文程式碼,並自行將 js 檔分流!

因 FB 會不斷推出新版 API,若日後這個留言分頁小工具有改版,會直接刪除舊版程式碼 js 連結,改換新版 js 連結,請讀者自行回來重新安裝程式碼。若未將 js 檔分流,會導致舊版 js 連結失效、留言分頁小工具無法執行。


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

124 則留言:

  1. 我是一樓~哈哈哈哈

    話說我很想問這功能很久了~每次來你這留言看到那個分頁就好想要!
    但是看起來很專業我怕那個是專案處理的就不好意思多問!

    現在感謝wayne分享這個基本款~我先來裝看看有沒有甚麼問題!!
    有專案要委託的部分我再另外跟你說哦^^

    回覆刪除
  2. WFu,午安安喔!

    很棒的分享喔!覺得自己越來越有進步了。

    不過,還是,想請問,

    你之前的分享文章裡,都是說在〈head〉或〈body〉之前放入程式碼,

    可是,如若要放一百種程式碼,那它會承受得了嗎?每一次都要放在它們之前,

    哈))))

    回覆刪除
  3. <2282994853111779275>(以上內容請勿刪除,從括號之後開始留言)這個工具的關注度很高啊~ ^^ 不過有成案的竟然不是 Blgger 平台(題外話). 有需要再用G+或表單給我訊息吧.

    回覆刪除
  4. <8582736302992798950>(以上內容請勿刪除,從括號之後開始留言)你好,這個問題非常棒啊~的確很多站長在網站裝了太多外掛,不過你擔心網站是否能否承受是正確的!

    可參考「為何部落格最好避免第三方外掛?」、「如何選擇外部工具」,部落格應該避免裝太多不需要的工具,篩選一下,留真正對經營網站有幫助的裝就好。

    回覆刪除
  5. 感謝分享~

    但我安裝後為何在Blogger留言也會出現FB留言框呢? http://travel20.blogspot.tw/2013/09/evernote.html

    回覆刪除
  6. <4577653468502866405>(以上內容請勿刪除,從括號之後開始留言)你好,kevin, 看了網頁之後,發現你裝了「FB留言板懶人包」,因此請將該程式碼移除,即可正常顯示~

    回覆刪除
  7. 謝謝分享
    請問, 有沒有只是設定 "Blogger" & "G+" 而不用"FB" 啦

    回覆刪除
  8. <6056291377759005292>(以上內容請勿刪除,從括號之後開始留言)這樣啊...那 CSS 多個一行:
    .commTab-tab[title="使用 FB 留言框"]{
    display: none;
    }
    把這個分頁隱藏起來吧...XD

    回覆刪除
  9. <637209987141128087>(以上內容請勿刪除,從括號之後開始留言)哪裡~ :)

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

    FB 隱藏確實可行. 謝謝你
    但是在我的網頁上,
    http://freetongdiy.blogspot.hk/2013/10/blogger.html
    G+ 的留言, 不可以完全列出, 不知問題所在.

    回覆刪除
  11. <5253151083938635367>(以上內容請勿刪除,從括號之後開始留言)不然把 CSS 設定中的 .commTab-goTop 裡面的 margin-top 調大一點,例如 100px 試試看,如果還是有問題,大概是 G+ 本身的問題了。

    回覆刪除
  12. <3390143340636430835>(以上內容請勿刪除,從括號之後開始留言)
    "G+ 的留言, 不可以完全列出"
    已經看到了它的問題出在那裡,
    G+留言,如果內文長度比較多,它不會完全顯示出來.
    每當滑鼠經過它時,它才會全部顯示,以至所有內容向下走.
    但是外框經過排版,已經定了下來,所以發生"不可以完全列出"的現象.
    希望可以得到解決方法. 言身寸

    回覆刪除
  13. 再發現問題,
    按進 G+ 按鈕, 只是顯示"開始中...",
    就這樣子停了下來. :(
    沒法鍵入任何文字.

    回覆刪除
  14. <5638734475532910269>(以上內容請勿刪除,從括號之後開始留言)因為沒有測試環境,所以這個問題不曉得出在那一方。不曉得你測試過上面提的調整 margin-top,改成 100px 或 150px?

    我看了你附的網頁,雖然內容無法完全顯示,但其實那個區塊外面是個透明的、有捲軸框架,用滑鼠滾輪捲動,就能把看不到的內容捲上來了。

    回覆刪除
  15. <2966785135089455932>(以上內容請勿刪除,從括號之後開始留言)我的G+沒問題,看了 http://www.wallfriendorsino.com/ 也沒問題 → G+ 留言框其實偶爾都會這樣,過一陣子應該自己就會修好了,可以用這個網址來檢測:http://gdriv.es/comments

    回覆刪除
  16. <2449259263155879908>(以上內容請勿刪除,從括號之後開始留言)
    margin-top 有修改過,沒效果.
    "滑鼠滾輪捲動"只會是整頁移動,不是單單G+的,不知正確點在那裡.
    這頁也有同樣現象,可以參考.
    http://www.wfublog.com/2013/04/gplus-comments-box-install.html

    回覆刪除
  17. <4066525080669855931>(以上內容請勿刪除,從括號之後開始留言)謝謝測試,那的確不知道問題出在哪。

    我測試了提供的網址 http://www.wfublog.com/2013/04/gplus-comments-box-install.html ,的確會有很多看不到的內容,不過滑鼠指標只要在 G+ 留言區塊內,用滾輪就能捲動內容了。也許可以在留言提示文字,向讀者說明這一點吧~

    回覆刪除
  18. <6462898085942725828>(以上內容請勿刪除,從括號之後開始留言)
    wallfriendorsino 這頁可以.
    gdriv.es/comments 檢測不成功.
    另外,網友的網頁不一定成功
    e.g. Ken CHEN, Ken CHEN
    我把程序刪除後,我的網頁上,另一個G+回復登入.
    http://freetongdiy.blogspot.hk/p/googleplus.html
    我懷疑是不是跟FB有關.(我沒FB有的)

    回覆刪除
  19. <3013663669565888923>(以上內容請勿刪除,從括號之後開始留言)it's ok, G+ 留言框的現象可以放寬心看待,我寫了很多跟 G+ 留言框有關的小工具,也經歷過非常多次 G+ 的異常現象,通常這代表 G+ 在修正內部程式碼或資料庫,等他恢復正常就好了~

    回覆刪除
  20. 如果我希望在三個按鈕上方加入自己想說的話,我應該如何加入?

    回覆刪除
  21. 發現一個嚴重的問題! 剛剛請朋友幫我測試FB留言板狀況
    我知道基本款式沒有留言EMAIL通知站長功能的這我可以理解

    但是...訪客留言之後站長自己點選FB留言板分頁卻一則留言都看不到不知道問題出在哪了@@?

    回覆刪除
  22. <9167144223303527341>(以上內容請勿刪除,從括號之後開始留言)上面自問自答! 原來是我朋友留言到別篇文章去了,我明明跟她講到A留言他卻去B留言,難怪我A文章怎樣重新整理都看不到留言 真是烏龍@@

    回覆刪除
    回覆
    1. 應該真的是你的朋友搞錯,我剛剛看,是有留言進來,而且fb留言管理也是有的

      刪除
  23. <913911043383342236>(以上內容請勿刪除,從括號之後開始留言)在範本中找到

    </b:includable>
    <b:includable id='postQuickEdit'

    在這些字串的前一行,加入自己想說的話。

    回覆刪除
  24. <3676651608521754779>(以上內容請勿刪除,從括號之後開始留言)FB 因為有隱私權限設定的關係,不是每則留言都看得到,例如不是你好友(路人)的留言,可能就看不到,除非這位路人的帳號是公開給所有人,才會看得到。

    所以比較麻煩的是,要常去看留言管理,才會知道有沒有人留言。

    回覆刪除
    回覆
    1. 如您所提到的,如果改用fb留言框+mail提醒,可以解決隱私權因素沒注意到留言的問題嗎?

      刪除
  25. <8347716979863271287>(以上內容請勿刪除,從括號之後開始留言)好的 謝謝您的耐心回覆!!看您的文章,受益良多!!

    回覆刪除
  26. <3288997859803760835>(以上內容請勿刪除,從括號之後開始留言)請詳閱「FB留言板安裝懶人包+留言email通知」→「五、使用說明」,該工具正是為了解決這個問題而設計。

    回覆刪除
  27. <393574718815815819>(以上內容請勿刪除,從括號之後開始留言)如您所說的,如果我需要實現Blogger+FB+G+三個留言框就需要使用"「G+ 留言框__官方安裝版」+留言提醒功能"+"FB 留言板安裝懶人包 + 留言 email 通知 + 自適應寬度"這兩份教學使用,相對的我就必須捨棄掉此篇的分頁功能??

    回覆刪除
  28. <3726294579476928026>(以上內容請勿刪除,從括號之後開始留言)G+ 留言提醒、FB 留言 email 通知,都屬於擴充功能,請按「五、擴充功能」進行。不過建議考量部落格訪客的使用量、使用習性,若目前很少人使用的話,其實使用基本款即可;等有需求產生時,再來變更不遲~

    回覆刪除
  29. 不好意思, 又來麻煩您了.... 今天開文章下方三個留言的button都是顯示 "undefined" 而不是Blogger, Google+及Facebook耶 ? http://travel20.blogspot.tw/2014/08/2014-itf.html

    回覆刪除
  30. <1925608957051278019>(以上內容請勿刪除,從括號之後開始留言)糟糕~kevin 你還沒進行 js 檔分流喔..XD

    因為更新了 js 檔,請見 「2014.8.3 新增:」的部份,多了一個自訂字串的功能,請在安裝程式碼補上 I~K 這三行即可 ^^

    回覆刪除
  31. YES!! 改好了~ 感謝Wayne Fu大大!!

    回覆刪除
  32. 作者您好 我又來發問了
    我的BLOG http://blog.xuite.net/c091170/sad/212259239
    外掛留言框變成了2個 請問發生甚麼問題? 謝謝 :)

    回覆刪除
  33. <6745099118966643798>(以上內容請勿刪除,從括號之後開始留言)因為最近 Xuite 新增了官方的 FB 留言板,請依照這篇文章進行即可:「為何 Xuite 出現了 Facebook 留言框?要如何關閉?」。

    P.S. 這件事也請轉告給你的 Xuite 朋友,因為我不知道貼 Xuite 的事宜有何管道~

    回覆刪除
  34. 非常感谢分享,我找这个找了好久哦。

    回覆刪除
  35. 請問一下要如何隱藏blogger的留言板呢? 上面只有介紹FB隱藏的方法

    回覆刪除
  36. <8776059937904408400>(以上內容請勿刪除,從括號之後開始留言)發問請附上相關的網址,你在留言板附的網址 http://www.jigif.com/ 是首頁的網址,我得自己找有留言板的網址查看,看到的情況跟你描述的也不一樣,你說能看到 G+ 留言板而我看不到。

    現在你詢問留言分頁的問題,問題你留的網站根本就沒有安裝留言分頁,而你的簡介也不存在。

    建議如果不願意網址資訊、個人資訊被知道,可以考慮改循「私人諮詢」管道。

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

    已經OK感謝

    回覆刪除
  38. 版主您好~有個問題想請問您,
    選擇Google+這個分頁留言時,發現下方的「↑ 回到留言分頁選單」,
    掉到超遠的地方去了,和對話框離超遠~
    相較之下,Blogger與Facebook就沒這個問題,
    看了一下您的示範網頁中也是一樣的情形,不曉得要怎麼處理呢?
    先謝謝你喔

    回覆刪除
  39. <2181461205280390643>(以上內容請勿刪除,從括號之後開始留言)你好~這件事實在沒辦法,因為 G+ 留言板本身就是預留了這麼大的空間,如果單獨只裝 G+ 留言板,就能看出這個狀況囉~

    P.S. 加油!支持學運的下一代讓台灣看到了希望 :)

    回覆刪除
  40. <7359350165244205839>(以上內容請勿刪除,從括號之後開始留言)還是謝謝你,因為沒有單獨裝過 G+ 所以沒有發現這件事,希望Google有天會發現這件事~

    另外突然間被鼓勵了,雖然嚇一跳但覺得很開心,支持學運的下一代的大人們也是台灣很棒的希望!

    回覆刪除
  41. 你好~我有個問題想請教一下。
    要怎麼做才能像你的 G+留言板counter只出現數字(圓圓紅底白字的那個)。
    我用 g-commentcount 在後面都會多個comments字樣。
    麻煩你了~

    回覆刪除
  42. <5353357255646657512>(以上內容請勿刪除,從括號之後開始留言)hi Liki, 這個功能請見「商品化的 Blogger 工具」,或者請私下用表單跟我聯繫此事吧~

    回覆刪除
  43. 你好~我想教一個問題,我按照步驟裝好了,但是按了Goole+的留言和FB留言,裡面是空的,無法留言,請問是不是要另外加上別的外掛呢?參考以下網址,我不知問題出在哪兒?? http://www.onepiece101.com/2014/08/28.html

    回覆刪除
  44. <2643532570222933685>(以上內容請勿刪除,從括號之後開始留言)我看沒什麼問題啊~可能只是有時 js 檔沒有執行完全,導致無法顯示吧!我看你 js 檔還沒有分流,仍使用我的連結,也許很多人使用這個檔時,流量就會被限制,建議按本文指示,把檔案分流試試。

    回覆刪除
  45. 我把js分流了,還是一樣,我發現您的DEMO頁
    http://demo.wfublog.com/2014/07/blogger-google-facebook-demo.html
    Google+,Facebook留言和我一樣無法顯示耶!是不是我還少了什麼部份呢?感謝~^^

    回覆刪除
  46. <6776368990173580679>(以上內容請勿刪除,從括號之後開始留言)1. 我再次看了你的頁面、以及 DEMO 頁面,都沒什麼問題說~@@", 也許是我們看的環境不一樣吧,麻煩提供你使用的作業系統及版本、瀏覽器及版本,我看看是不是這個問題。

    2. 我看了你的網頁原始碼,唯一的差別是,你安裝了以下內容:

    <!--臉書按讚app-->
    <div id='fb-root'></div>
    <script>(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 = "//connect.facebook.net/zh_TW/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
    <!--臉書按讚appEND-->

    由於本文的程式碼也會執行這段內容,造成重複,或許先你將這段程式碼先刪除試試看。

    回覆刪除
  47. <8201630578312889466>(以上內容請勿刪除,從括號之後開始留言)YA~可以了,非常感謝!效果很好,應該瀏覽器的問題!真的很謝謝你~

    回覆刪除
  48. 請問一下
    我的Blogger留言是空白的
    另外Google+岸留言會停在開啟中
    目前只有FB的正常
    麻煩大大的解答,謝謝

    回覆刪除
  49. <1187811327428462078>(以上內容請勿刪除,以下引言請自行刪減) [quote]我的Blogger留言是空白的[/quote]
    看看是不是「二、安裝準備動作」→「1. 關閉 G+ 留言板選項」
    [quote]Google+岸留言會停在開啟中[/quote]
    請參考「六、常見 FAQ」→ Q3。

    還有問題的話,記得留下出問題的網址方便查看。

    回覆刪除
  50. 版主你好,我照你的方法安裝後,出現了兩個問題!
    第一,我先安裝了這個分頁功能的留言版後,發現沒有任何改變(網頁上還是呈現預設的blogger留言版,在此之前我沒有安裝任何留言版外掛程式)
    第二,我先卸除掉分頁功能的留言版後,安裝上fb留言版,發現在點開網誌文章串之後,文章底下會出現fb留言版,但是底下也同時出現blogger留言版@@",而且我去點開自己新增一些"網頁"底下都不會出現fb留言版!
    想請教一下我是哪個步驟出錯了? 謝謝~

    回覆刪除
  51. <8252922439842699689>(以上內容請勿刪除,從括號之後開始留言)請提供出問題的網址,並而留下異常的狀態,才能看是什麼問題。

    回覆刪除
  52. 作者已經移除這則留言。

    回覆刪除
  53. <713179505004908395>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁原始碼,發現每行程式碼之前都有 A. B. C. 這樣的編號,這會讓程式當掉而無法執行。

    你可能使用了非主流的瀏覽器複製,才會出現編號,建議改用 Chrome、Firefox、IE 等主流瀏覽器重新複製程式碼,就不會出現編號了。

    回覆刪除
  54. <7011209768224223772>(以上內容請勿刪除,從括號之後開始留言)
    我是使用chrome,我剛剛檢查了! 也把ABC註解刪了!可是好像還是沒用耶~

    回覆刪除
  55. <113496122215463523>(以上內容請勿刪除,從括號之後開始留言)是不是因為
    在[/head]裡面加入的字串}
    #commTab img {
    align: left;
    padding: 0 px;
    vertical-align: -3px;
    }其中align顯示紅色這邊代表有問題?

    回覆刪除
  56. <6770277090584940799>(以上內容請勿刪除,從括號之後開始留言)測試了一下,發現這個小工具的 jquery 程式碼無法在你的網頁執行,因為你的不是官方範本,無法知道該範本的作者是怎麼寫的,而導致程式會產生衝突。

    如果真的需要在貴站成功安裝這個工具,可參考「諮詢服務與提案合作」→ 非官方範本屬於「5. 其他類諮詢」,再用該網頁的聯絡表單與我聯繫~

    回覆刪除
  57. <1883257621023142255>(以上內容請勿刪除,從括號之後開始留言)好吧! 我先放棄使用此功能!先理解其他簡單的概念~另外我想請教,我有打開blogger預設的文章分享按鈕,可是也都不見它出現在我每篇的文章裡,這是不是也跟我的範本有關係?是被寫範本的作者hack掉了嗎?謝謝

    回覆刪除
  58. <3390813361692214289>(以上內容請勿刪除,從括號之後開始留言)原因請見「讓 Blogger 能在文章下方顯示作者簡介」→「一、無法顯示的原因」

    回覆刪除
  59. <8000712226461134548>(以上內容請勿刪除,從括號之後開始留言)
    我第一個問題解決了 感謝幫忙
    但是我還是卡在第二個問題
    Google+按留言會停在開啟中
    下面是我Blogger網址(還在規劃)
    http://minecraft736275.blogspot.tw/2014/11/sourcemod-2ggc2087.html

    在麻煩Wayne Fu 大大了

    回覆刪除
  60. <5974357036556174301>(以上內容請勿刪除,從括號之後開始留言)你好,我看沒什麼問題喔。G+ 不穩的狀況上次回答過了喔~

    回覆刪除
  61. <5464109805423325194>(以上內容請勿刪除,從括號之後開始留言)
    我這邊是只有我自己不能,換了瀏覽器也一樣
    然後到你這邊的又可以

    所以再請大大幫我看看了

    回覆刪除
  62. 版主您好!
    我照著您提供的步驟插入了程式碼,但是一直沒辦法看到效果。
    麻煩您查看一下了! 附上網址:http://ipoytom2014.blogspot.tw/

    回覆刪除
  63. <506543978622395379>(以上內容請勿刪除,從括號之後開始留言)你好,你的網站範本很漂亮,可惜並非官方範本,不好意思只能依照「諮詢服務」→「5. 其他類諮詢」來處理。

    回覆刪除
  64. 版主您好
    很謝謝您,依照您的教學我已經成功安裝了留言板,但我想請教您留言板是不是只能顯示中文,因為我的BLOG專門做西語的,所以我想請問如何將留言板改成其他語言?

    http://choroni-chies.blogspot.com/2014/12/la-armonia-en-una-familia.html

    回覆刪除
  65. <8801778236901542624>(以上內容請勿刪除,從括號之後開始留言)不好意思,不太清楚你的意思,在我看來,你的留言板的確有顯示西語。

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

    嗯 可能是我沒說清楚
    G+ 和 Blogger留言板都是西語,唯獨FB留言板顯示的是中文,我試著切換成西語的FB帳號登錄也是一樣的情況。

    回覆刪除
  67. <1053988193141515663>(以上內容請勿刪除,從括號之後開始留言)改 FB 留言板的語系得自行修改程式碼才行,不是很輕鬆,請參照「六、常見 FAQ」→ Q4 的步驟進行。

    回覆刪除
  68. <3342888382491985010>(以上內容請勿刪除,從括號之後開始留言)已成功改了FB留言板的語言,非常謝謝版主詳細的說明,感激不盡!

    回覆刪除
  69. 不好意思,請問一下,我安裝了分頁後 Blogger無法顯示...於是我到後台的 設定->文章與留言->留言位置->嵌入 後,不旦Blogger無法顯示,連FB留言也無法顯示...請問是什麼原因呢?

    http://blissdean.blogspot.tw/

    回覆刪除
  70. 版主你好,我亂試一通後....現在能在"文章與留言"選取"嵌入",FB comment不會消失了。但是Blogger的留言版一樣顯示不出來 > <"

    http://blissdean.blogspot.tw/2015/01/blog-post_22.html#more

    回覆刪除
  71. <4560952415825232541>(以上內容請勿刪除,從括號之後開始留言)你的 blogger 留言的確無法顯示, 不過看不出你在後台或範本中動到哪裡, 所以你必須先找出原因來。你可以先移除「四、安裝程式碼」的部分,先想辦法恢復 Blogger 留言,讓他能正常顯示出來。

    如果你有按照「三、安裝 CSS」的說明先備份範本的話,那麼應該可以輕易恢復原狀。

    如果 Blogger 留言能正常顯示了,再重新安裝程式碼一次試試看,應該是沒問題。

    回覆刪除
  72. 版主大大您好~我想請問分頁選單問題~
    我在BLOG套用之後~Google Chrome顯示都沒有問題,但是用IE與Firefox 都會造成FB的按鈕被切斷耶!(如圖: http://ppt.cc/J3j1 ),但是我看您的網站不會這樣,是不是我哪邊設定有問題呢?麻煩請您指點一下,謝謝您!^^
    網址:http://wingfly155.blogspot.tw/

    回覆刪除
  73. <3521844134019596604>(以上內容請勿刪除,從括號之後開始留言)你好,每個人的版面寬度、字體大小設定不一樣,因此比較窄的版面可能就塞不下。請見「2014.8.3 新增」的參數說明,可修改這三個字串,例如 "FB"、"G+",這樣就一定塞得下了。

    回覆刪除
  74. <2347967534254435604>(以上內容請勿刪除,從括號之後開始留言)感謝版主!謝謝~

    回覆刪除
  75. 版主您好!我是因為blogger本身的留言不見了,所以前來找尋解決方法,依照這篇文章的方法安裝之後,仍然沒有顯示本身的留言,反而全部變成G+的留言,請問有可能是什麼原因嗎?另外,G+的留言部份,測試了之後發現仍然無法輸入,會是有什麼原因嗎?謝謝版主!

    網址:http://tcm-dr.blogspot.tw/

    回覆刪除
  76. <1813910983744779048>(以上內容請勿刪除,從括號之後開始留言)Dr. Lin 你好:

    >> blogger本身的留言不見了
    請參考「二、安裝準備動作」→「1. 關閉 G+ 留言板選項」,檢查是否啟用了 G+ 留言功能

    >> G+的留言部份,測試了之後發現仍然無法輸入
    請參考「六、常見 FAQ」→「Q3」,應是相同的狀況,通常過陣子就好了。

    回覆刪除
  77. <3352736442690982855>(以上內容請勿刪除,從括號之後開始留言)謝謝版主!我再研究看看!

    回覆刪除
  78. 留言三分頁,在「行動版」的「blogger」分頁有以下兩種情況。
    a.文章本來就有留言的,會正常顯示。
    b.文章沒有任何留言的,連留言框都不會出現。

    不知道跟 blogger 官方本身的默默異動ing 有沒有關係,
    發現這情況有兩天了。

    回覆刪除
  79. <2531707420968363158>(以上內容請勿刪除,從括號之後開始留言)我沒特別注意留言框的狀態呢,過去逛到別的 Blogger,連網頁版也是有的有留言框、有的沒有,沒有去細究原因,大概是因為,就算沒出現留言框,也是會有明顯的提示按鈕,可以把留言框按出來吧~

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

    嗯,發現我昨天忘了附圖,補上
    http://i.imgur.com/IUOsdLW.png

    行動版,白底,是 面壁王澳西諾 的

    btw~怎麼留言變成以前另開分頁的樣子 @@?

    回覆刪除
  81. 找了很多掛FB留言的方式,您的方法最實用。感謝。

    回覆刪除
  82. <5357312836515880259>(以上內容請勿刪除,從括號之後開始留言)如我上面提過的,過去我只是覺得怎麼有時會顯示留言框、有時不會顯示,但沒去特別思考這件事,所以感謝 Ala 的細心觀察,原來是沒留言的時候,Blogger 會將留言框隱藏起來,只要按一下「張貼留言」,那麼留言框就顯示出來了。

    如果不想留言框被隱藏,其實也滿簡單的,改一下 CSS 就好了,你可以增加以下這一項:

    #comment-editor {display:block!important}

    這樣就可以強制留言框出現了。

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

    回覆刪除
  84. <1585675061180172294>(以上內容請勿刪除,從括號之後開始留言)喔~~原來是點「張開留言」,那我真是誤會大了,以為是 blogger 在進行什麼而導致。請把我當成來耍憨的,謝謝!(默默收下那一行)

    回覆刪除
  85. 不好意思,想請問我這樣是成功了嘛??http://ellin0409.blogspot.com/
    好像不能切換到FB跟google+的分頁呢....
    謝謝^^"

    回覆刪除
  86. <5679626945330666154>(以上內容請勿刪除,從括號之後開始留言)hi Ellin, 你的網站風格很可愛,看起來是有設計過的~

    只是不好意思,因為非官方範本,想必是跟範本中某處的程式碼相衝突了。那麼您的網站只能依照「諮詢服務」→「3. 其他類諮詢」處理了~~

    回覆刪除
  87. 你好。我有個問題,為什麼我之前安裝你的留言功能是沒問題的,可是現在卻變樣了。遊客留言的呈現方式變不能回复了,你可以幫忙看下嗎?謝謝你。
    網址:http://winrayhwon-winray.blogspot.com/2015/06/Celcom-First-38.html

    回覆刪除
  88. <2259644206329493610>(以上內容請勿刪除,從括號之後開始留言)你好,如果覺的是這個分頁工具造成的影響,可以暫時將這個工具移除:
    1. 如果仍然不能回覆留言 → 那就與分頁功能無關
    2. 如果可以回覆留言 → 那有可能是分頁功能的影響,再來進行其他的測試。

    回覆刪除
  89. 你好,我有按照你的步驟安裝了編碼,目前有幾個怪怪的狀況想請教。

    1.我把G+關閉卻依舊出現
    2.手機板三個留言顯示都有出來,但電腦版不論IE11或CHROME都會讓FB無法顯示留言的框框。
    3.部落格底圖是深色,所以填入dark,但沒注意到差異在哪裡?
    填入light也沒發現差異@@
    4.手機板FB留言後,沒有收到信件通知@@

    不知道問題出在哪裡@@

    部落格 http://wanghenrytw.blogspot.tw/

    回覆刪除
  90. <7318729570465200198>(以上內容請勿刪除,從括號之後開始留言)你好:[quote]我把G+關閉卻依舊出現[/quote]請參考「六、常見 FAQ」→ Q1 的方法,舉一反三來隱藏 G+ 留言分頁

    [quote]手機板三個留言顯示都有出來,但電腦版不論IE11或CHROME都會讓FB無法顯示留言的框框。[/quote]已將這個問題整理到「六、常見 FAQ」→ Q5

    [quote]手機板FB留言後,沒有收到信件通知@@[/quote]這個版本的功能並沒提到信件通知喔!如需要其他功能請見「五、擴充功能」

    你提到的第 3 點要問 FB 了。

    補充說明:手機版範本跟網頁版範本並非同一個範本,本站所有工具皆未針對手機版進行開發或測試,如需解決行動版的問題,可參考「客製 Blogger 行動版範本

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

    謝謝唷~~我等一下去嘗試著解決問題^^

    回覆刪除
  92. 請問一下為什麼登入了FB依然看不到會員限定文章,它顯示我已登入,我換了瀏覽器重整了一樣沒有。我已經想不到會是什麼問題了....

    回覆刪除
  93. <7120004871828143248>(以上內容請勿刪除,從括號之後開始留言)你好,謝謝回報狀況。測試了一下,只有這篇會出問題,其他會員限定文章正常。已經找出這個頁面的 bug 並修正,現在可以正常顯示了~ ^^

    回覆刪除
  94. 不好意思似乎第五項沒有說明完整??
    另外測試的結果FB留言好像時而消失時而出現

    回覆刪除
  95. <343596441624273791>(以上內容請勿刪除,從括號之後開始留言)[quote]FB留言好像時而消失時而出現[/quote]請留下有問題的網址,看看是什麼情形
    [quote]第五項沒有說明完整?[/quote]
    第五項是指「擴充功能」嗎?請用聯絡表單直接提出你的需求即可,有預算也請提出。

    回覆刪除
  96. <3064935822715307861>(以上內容請勿刪除,從括號之後開始留言)
    不是,是問答題的第五項,是指說要在CSS加入
    #showFBcomment.fb_iframe_widget {display:block!important;}
    這段的意思嗎?

    另,這是測試的頁面,感謝您唷~^^
    http://huanlunmeng.blogspot.tw/2015/08/blog-post_31.html?showComment=1441266080176#c3620965679599594858

    回覆刪除
  97. <6981650508264806958>(以上內容請勿刪除,從括號之後開始留言)看了測試頁面,的確無法顯示,且增加 CSS 的方法也無效了。

    推估是 FB 不支援舊版 API 了,因此修改了程式碼,請重新安裝(主要是 N 行的 js 檔連結),並進行分流,這樣應該可以了。

    同時修改了「六、常見 FAQ」→ Q5 的內容,也請注意文章開頭新增的「2015.9.4 公告」。

    回覆刪除
  98. <6226525830997258028>(以上內容請勿刪除,從括號之後開始留言)感謝您的即時回覆,我重新安裝並分流了js碼,不過似乎問題還是差不多呢??FB真喜歡改...感覺只是越來越難用="=

    回覆刪除
  99. <639374276768274916>(以上內容請勿刪除,從括號之後開始留言)原本在 DEMO 頁面測試正常,直到 Lunmeng 再次說不行,才發現原來有時 ok、有時不行。

    我更改了執行方式,改為動態載入、增加過場動畫,現在於 DEMO 頁面多次執行都沒問題了:http://demo.wfublog.com/2014/07/blogger-google-facebook-demo.html

    一樣請更改 N 行的 js 檔連結即可,感謝 Lunmeng 的測試回報問題。

    回覆刪除
  100. <6368960144030027515>(以上內容請勿刪除,從括號之後開始留言)已經沒有問題了!而且有過場動畫後就比較知道到底有沒有再載入,真的是太感謝您了!!!

    回覆刪除
  101. <5358653432541414348>(以上內容請勿刪除,從括號之後開始留言)本站的主題是 "Blogger 調校資料庫
    ", 製作的工具主要在 Blogger 平台開發。你可自行安裝在 WP,能否正常使用就不知道了,也許將來會開發 WP 版本吧。

    回覆刪除
  102. 您好,我全部的步驟都已經完成,不過好像還是無法顯示像您一樣分類的按鈕,可否幫我查看一下是哪邊出問題了呢?感激不盡

    https://makeinsuranceeasy33.blogspot.tw/2017/01/blog-post_3.html#more

    回覆刪除
    回覆
    1. 你好,請按照程式碼 N 行的說明進行喔,你還沒有修改 JS 外連

      刪除
    2. 謝謝,我真的漏掉了這個步驟,請問我修改完這樣的頁面是正常的嗎?

      刪除
    3. 你的 dropbox 連結內容,是 wyboard 的程式碼,不是本篇工具的程式碼喔

      刪除
    4. 總算用好了,謝謝Wayne大,總是能一眼就知道問題所在,看來需要學的地方實在太多了,期許自己能在這裡挖更多寶,學習更多知識

      刪除
    5. 不客氣~
      Blogger 資源很多,歡迎自取 ^^

      刪除
  103. 你好,我想請問,我安裝了程式碼,留言板都沒跑出來是什麼問題,可以幫我看看嗎謝謝
    https://jack3422.blogspot.tw/

    回覆刪除
    回覆
    1. 看了你的網站,沒有看到留言板的跡象,建議先想辦法讓官方留言板顯示出來吧

      刪除
  104. 請問站長目前使用的留言板是哪一個程式碼,我用新範本都顯示不出來,謝謝。

    回覆刪除
    回覆
    1. 請參考 https://www.wfublog.com/2017/03/blogger-rwd-official-template.html → 新版官方 RWD 範本不建議做任何修改。

      刪除
  105. 你好站長:)
    我最近遇到一個難題,想請問站長該如何解決...
    就是我之前在我的網站中安裝了雲端字型(noto sans tc)
    所有的文字都有套用到,但是偏偏blogger的留言功能(就是我現在留言的地方),沒有辦法套用
    還是處於"新細明體"的狀況
    沒有辦法像站長您的留言板一樣,是可以套用的...(但是留言的區塊我看起來好像也沒有辦法套用)
    請問該怎麼解決?
    拜託請站長回覆我:))))

    回覆刪除
    回覆
    1. 我的網址是
      https://jmes311chiyi.blogspot.com
      另外,我成功套用留言區的字型
      但是留言板還是不行(輸入留言的地方)
      麻煩站長看看:)

      刪除
    2. 你好,看了你的網站,不像官方範本。請參考留言注意事項,
      "非官方範本問題"、"CSS 相關問題非免費諮詢",建議使用「Chrome 開發人員工具」尋找答案,不好意思喔。

      然後,"輸入留言的地方" → 這裡是 Iframe,外部 CSS 無法控制 Iframe 內的 CSS 樣式,所以這裡的 CSS 是不可能更改的。

      刪除
  106. 大神平安:
    這個整合性留言框真的太威了!!
    因為目前Google+要整個停用
    想請問大神是否可以重出一個FB+Blogger的更新版本呢
    再次感謝!!

    回覆刪除
    回覆
    1. 你好,已補充在「六、常見 FAQ」→ Q1,請照著修改 CSS 即可~

      刪除

張貼留言注意事項:

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

TOP