[教學] Blogger 快速安裝 DISQUS 留言板

Blogger 網誌模板範本應用教學：最近更換 Blogger 模版，試裝「Disqus 留言板」的時候發現，用 Disqus 官方的 Blogger ( 小工具 ) 安裝法安裝留言板，在安裝完成後留言板已經可以直接使用了！留言框只會出現在文章頁面。

早前介紹過一篇「Blogger 安裝 Disqus 社群聚合留言板」，是於 Blogger 後台中使用「編輯HTML」的方式安裝 Disqus 留言板，動作繁複且容昜把 Blogger 模板的 HTML 弄的亂亂的。

會使用該方式安裝是因為用原本官方提供的 Blogger 安裝法安裝 Disqus 留言板，在網站中的每一個頁面都會出現留言框，所以才用更改 HTML 的方式安裝 Disqus 留言板 ( HTML 方式安裝完成後只會出現在文章頁面 ) 。

既然現在直接用「新增小工具」就可以安裝使用，當然一樣把安裝流程記錄下來，以供未來安裝時方便查閱。

設定流程

註冊 Disqus 帳號
用 Blogger 的「新增小工具」安裝 Disqus 留言板
讓留言板相容 IE 瀏覽器，在首頁及文章頁面顯示留言數
同步 Blogger 留言至 Disqus 留言板
導入 Blogger 留言至 Disqus 留言板
驗證 Disqus 電子郵件註冊信
驗證 Disqus 安裝
讓 Disqus 留言版，在行動版網頁顯示

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『備份 Blogger 模板 (範本)』的動作，以防原始模板資料遺失。

設定教學

Step 1

註冊 Disqus 帳號

進入 DISQUS 官網，按下畫面中的「Add Disqus to Your Site」

輸入要登入的「帳號名稱、電子郵件、登入的密碼」，按下『Next step』

輸入「網站名稱、Disqus帳號網址、網站屬性」，點擊『Finish registration』

Step 2

用 Blogger 的「新增小工具」安裝 Disqus 留言板

接著到了 Disqus 後台，選擇「Settings 〉install 〉Blogger 圖示」

點選畫面中的「Add 你的網站名稱 to my Blogger site」

這裡直接按下「新增迷你組件」

畫面跳轉後，可以看到 Blogger 後台拖拉編輯頁的「版面配置」中，新增了一個小工具「Disqus for 你的網站名稱」，可以將小工具拖拉至「網誌文章」的下方

接著前往自己的文章頁面，可以看到 Disqus 留言框組件出現了

Step 3

讓留言板相容IE瀏覽器，在首頁及文章頁面顯示留言數

回到 Blogger 後台，選擇「範本〉編輯HTML」

找到「<head>」並在它下方輸入以下程式碼


<!-- DISQUS相容IE瀏覽器開始 -->
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<!-- DISQUS相容IE瀏覽器結束 -->

接著按下鍵盤中的「Ctrl + F」( 按著 Ctrl 再按一下 F ) ，輸入「</body>」，在搜尋到的「</body>」上方置入以下程式碼，接著按下【儲存範本】


<script async='async' id='dsq-count-scr' src='//demo2-techcoke.disqus.com/count.js'/>

「.disqus.com/count.js」前面的「shortname」改為自己在 Disqus 註冊時的「Admin URL」名稱

接著前往 Blogger 前台首頁或文章頁面的作者區塊，就可以看到 Disqus 留言板的留言數。

Step 4

同步 Blogger 留言至 Disqus 留言板

回到 Disqus 頁面，點擊「Tools » import」

接著點選「Enable syncing」

點擊「授予存取權」

這邊，選擇自己剛才註冊的網站名稱來同步留言

這裡點擊「Blogger」

畫面跳轉至 Blogger 後台，到「設定〉文章和留言〉圈選 ◎任何人-包括匿名使用者」，按下『儲存設定』

[教學] Blogger 快速安裝 DISQUS 留言板_406

Step 5

導入 Blogger 留言至 Disqus 留言板

回到 Disqus 頁面，這裡點選「import comments from Blogger」

接著在出現的視窗點擊「授予存取權」

這裡選擇「Blogger」，點選『import』

接著頁面會提示「可能需要 24 小時的時間來匯入所有留言」

Step 6

驗證 Disqus 電子郵件註冊信

接著別忘了到自己的電子信箱，驗證剛才註冊的帳號

Step 7

驗證 Disqus 安裝

最後前往 Disqus 後台，「Settings 〉install」點擊畫面下方的『Verify』

驗證安裝成功

Step 8

讓 Disqus 留言版，在行動版網頁顯示

要讓小工具顯示在行動版網頁上，得先開啟 blogger 的自訂行動範本，開啟自訂行動範本可參考：「自訂 Blogger 行動版範本與自適應設計原理｜STEP 1：使用自訂 Blogger 行動版範本」。

接著在「STEP 2」的時候，我們有新增一筆 Disqus 的小工具。於範本中搜尋 Disqus 的「小工具名稱」，在小工具「b:widget」裡面加入「mobile='yes'」，於『儲存範本』後，Disqus 留言板就會在行動版網站上顯示。找到的「b:widget」整體代碼類似：


<b:widget id='HTML2' locked='false' mobile='yes' title='Disqus for 技研可樂-小工具示意網頁' type='HTML' version='1' visible='true'>

小結

在安裝過程中，會有出現需要 google 帳號授權的部份，若對帳號安全有顧慮的話，可先思考一下是否要安裝 ( 可先至 Step 4. 及 Step 5. 看一下關於授權的部份 ) 。建議可到後台新創一個 Blogger 網誌來試做，降低設置錯誤時的風險。

搜尋此網誌

技研可樂