部落格常見的留言板外掛有 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 朋友多的話，這個留言板對傳播力很有幫助。
二、安裝準備動作
1. 關閉 G+ 留言板選項
如果 Blogger 後台 → Google+ → 勾選了「為這個網誌啟用 Google+ 留言功能 」，請將這個功能取消，以免無法正常執行。
2. FB 管理留言
如果需要管理 FB 留言的話，請依照「Facebook留言板安裝懶人包」→「一、準備動作」，來取得 FB 管理者 ID 及 FB 應用程式 →「三、Blogger 安裝」→「2013.11.22 補充」的內容，將 META 標籤的字串放在範本中
2014.8.1 新增──3. 刪除相關外掛
若曾安裝過「FB留言板安裝懶人包」、「G+留言框與其他留言外掛並存」類似這樣的留言工具，請完整移除原本的程式碼，以免顯示異常。
三、安裝 CSS
請到後台「範本」→「編輯 HTML」，搜尋
<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 -15px -10px -15px;
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;
}
/* 留言分頁 end*/
</style>想要自訂 CSS 參數的話，請見綠字註釋，來找到對應修改的區塊。
四、安裝程式碼
接著請搜尋
請參照以上程式碼行號修改參數：
F：請參照綠色字串，填入預設要顯示的分頁代表數字
G：數字 5 可改為 FB 留言框最多顯示的留言數
H：如果部落格顏色是深色底，請改字串為 "dark"
N：由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流。
2014.8.3 新增：
I～K：這三行分別為 Blogger、Goolge+、Facebook 分頁上的文字。有讀者提出手機版面上，分頁會被斷行的情形，如果想要縮減整個區塊的寬度、避免被斷行的話，可以自行修改這些文字，或是留下空白字串(兩個雙引號)""，來達到這個目的。
五、擴充功能
如前所提，這個留言分頁工具是基本款，由於每個人需要的功能都不一樣，如果有其他客製需求，可用後面的聯絡表單與 WFU 聯繫：
聯絡表單：
六、常見 FAQ
日後若有常見問題，會持續補充在此。
Q1: 留言 #5 詢問如何隱藏 FB 分頁？
Ans: 請在 CSS 多加一行：
.commTab-tab[title="使用 FB 留言框"]{
display: none;
}
Q2: 留言 #7、8 詢問 G+ 留言內容太長時，無法完整顯示？
Ans: G+ 留言框外面是個透明的、有捲軸的框架，用滑鼠滾輪在留言內容捲動，就能把看不到的內容捲上來了。
Q3: 留言 #9 詢問按進 G+ 按鈕, 只是顯示"開始中...", 就這樣子停了下來. :( 沒法鍵入任何文字.？
Ans: G+ 留言框其實偶爾都會這樣，過一陣子應該自己就會修好了。可以用這個網址來檢測：「http://gdriv.es/comments」，輸入自己的網頁，就能測試是否為官方的問題，還是本文小工具的問題。
更多實用工具：