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

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

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

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

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

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



相關連結

DISQUS 官方網站「http://disqus.com/

範例 DEMO 頁面|電腦版網頁:「電腦版

範例 DEMO 頁面|行動版網頁:「行動版



設定流程

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

設置前準備

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




設定教學

Step 1

註冊 Disqus 帳號

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

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



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

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



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

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



Step 2

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

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

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



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

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



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

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



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

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



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

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



Step 3

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

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

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



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

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

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



接著按下鍵盤中的「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 留言板的留言數。

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



Step 4

同步 Blogger 留言至 Disqus 留言板

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

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



接著點選「Enable syncing」

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



點擊「授予存取權」

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



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

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



這裡點擊「Blogger」

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



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

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


Step 5

導入 Blogger 留言至 Disqus 留言板

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

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



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

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



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

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



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

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



Step 6

驗證 Disqus 電子郵件註冊信

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

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



Step 7

驗證 Disqus 安裝

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

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



驗證安裝成功

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



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 網誌來試做,降低設置錯誤時的風險。



相關文章

Blogger 安裝 DISQUS 最新留言 ( 最新回應 )

Blogger 安裝 DISQUS 社群聚合留言板


留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰