2014年7月1日 星期二

[小工具]幫 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 分頁上的文字。有讀者提出手機版面上,分頁會被斷行的情形,如果想要縮減整個區塊的寬度、避免被斷行的話,可以自行修改這些文字,或是留下空白字串(兩個雙引號)"",來達到這個目的。



五、擴充功能


如前所提,這個留言分頁工具是基本款,由於每個人需要的功能都不一樣,如果有其他客製需求,可用後面的聯絡表單與 WFU 聯繫:

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


聯絡表單:




六、常見 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」,輸入自己的網頁,就能測試是否為官方的問題,還是本文小工具的問題。


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、「追蹤」粉絲團、「訂閱」最新文章
TOP