Blogger 安裝 DISQUS 社群聚合留言板
DISQUS 留言系統支援大部份主流部落格平台安裝,而在社群媒介方面也支援「Twitter、G+、Facebook」,在社群集合力方面很完善,相比在 Blogger 上面的原生留言板系統,也就較為全面!尤其 Blogger 在不支援 Facebook 用戶留言的情況下,帶來了很大的方便性!
在安裝過程中,會有出現需要 Google 帳號授權的部份,若對帳號安全有顧慮的話,可先思考一下是否要安裝 ( 可先至「Step16. ~ Step18.」觀察一下關於授權的部份 ) 。建議可到後台新創一個 Blogger 網誌來試做,降低設置錯誤時的風險。
另外,安裝過程中在 HTML ( 範本 ) 裡需要「
若是在後台使用 新增小工具「HTML/JavaScript」來置入語法的話,可以成功,不過這樣在首頁也會出現「Disqus」留言工具!
進入「Disqus」網站,點擊網頁中右下方的【Add Disqus to Your Site】
輸入相關註冊資料
URL ← 網站網址
Site Name ← 網站名字
Site Shortname ← 在 disqus 的個人帳號頁面
Username ← 登入 disqus 的帳號
Password ← 用來登入的密碼
Email Address ← 用來認証註冊的 Email 信箱
註冊完成後,在這個頁面,點選畫面中的【Uinversal Code】圖示
接著我們將「第一區的程式代碼」全選【複制】
「瀏覽器」開一新分頁,來到「Blogger 後台」,選擇畫面中的【範本 \ 編輯 HTML】
接著在頁框內的【程式代碼中點一下】,按下鍵盤上的【Ctrl + F】( 按著 Ctrl 再按一下 F ) 在跳出的搜尋框中 輸入 [ <div id='backlinks-container'> ] 並【按下 Enter】
在「<div id='backlinks-container'>」的下方,放上剛才「Step4.」複制的程式碼
補充:程式碼 需介於下方區間,因為測試使用的模板有兩處「<div id='backlinks-container'>」
「瀏覽器」回到 Disqus 的分頁,再全選【複制】網頁下方「第二區的程式代碼」
「瀏覽器」回到 Blogger 後台分頁,在搜尋框中輸入 [ </body> ] 並【按下 Enter】,且在它上面放上「Step7.」的程式碼,按下畫面上方的【儲存範本】
接著「瀏覽器」開一新分頁,來到「Blogger 後台 」的【設定 \ 文章和留言】
留言位置 選擇 → 隱藏
誰能留言 選擇 → 任何人
留言管理 選擇 → 永不
點擊右上方【儲存設定】之後,「瀏覽器」回到 Disqus 分頁
將「Uinversal Code」下拉【選擇 Blogger】
點取【See instrucitons here】
將頁面中的「兩段程式代碼」,一同【複制】到「Step14.」中
「瀏覽器」回到 HTML 分頁,在搜尋框中 輸入 [ <head> ] 並按下【Enter】,且在它的下面放上「Step13.」的程式碼,最後再按下畫面上方的【儲存範本】
「瀏覽器」回到 Disqus 分頁,在這裡選擇畫面中的【Tools > Import】
點擊【Import comments from Blogger】並在出現的視窗中點選【授予存取權】
接著點擊【Import】
這裡是同步留言的功能,點擊【Disable syncing】並在出現的視窗中點選【授予存取權】
接著的這個畫面可以【將它關掉】,因為要做的設定,在「Step10.」時已經完成
回到「Blogger 前台」,可以看到「Disqus 留言板」成功運作了
最後,別忘了到「電子信箱收信」,並將 Disqus 寄來的認證信做【認證】
[教學] Blogger 快速安裝 DISQUS 留言板
在安裝過程中,會有出現需要 Google 帳號授權的部份,若對帳號安全有顧慮的話,可先思考一下是否要安裝 ( 可先至「Step16. ~ Step18.」觀察一下關於授權的部份 ) 。建議可到後台新創一個 Blogger 網誌來試做,降低設置錯誤時的風險。
另外,安裝過程中在 HTML ( 範本 ) 裡需要「
<div id='backlinks-container'>
」這段代碼,如果沒有的話,可能會無法安裝!若是在後台使用 新增小工具「HTML/JavaScript」來置入語法的話,可以成功,不過這樣在首頁也會出現「Disqus」留言工具!
![Blogger 安裝 DISQUS 社群聚合留言板_001 Blogger 安裝 DISQUS 社群聚合留言板_001](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6GuhCBCxd06myHUaOVcbbKlWjWMdcechnR28V8S6qjt-MKr-3tvOp1DXJHQ5GxZV92PQr5FVRnq3PkrizGY1cdCsHLzEEhfSb356oe4YBOsK36dhUoMU2TV-iDSUUQMJyB4iA8Q7rhbE/s1600/install-disqus-on-blogger_001.jpg)
網站連結
Disqus 官方網站:「https://disqus.com/」前置作業
若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。設定教學
Step 1
進入「Disqus」網站,點擊網頁中右下方的【Add Disqus to Your Site】
![Blogger 安裝 DISQUS 社群聚合留言板_101 Blogger 安裝 DISQUS 社群聚合留言板_101](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvTITwW-e6dSVOt65loGRt7Gw0B-7xPMf23f63tDHBWj6qD-gM9o9yxORlLx4vkFcvNcv79_bRgI-3mfhaVXzhx5qatCRbjoAjsZsyctxcOjNwkFHAwmLZorI5lUwORPS0tBsJMjeiOI/s1600/install-disqus-on-blogger_101.jpg)
Step 2
輸入相關註冊資料
URL ← 網站網址
Site Name ← 網站名字
Site Shortname ← 在 disqus 的個人帳號頁面
Username ← 登入 disqus 的帳號
Password ← 用來登入的密碼
Email Address ← 用來認証註冊的 Email 信箱
![Blogger 安裝 DISQUS 社群聚合留言板_102 Blogger 安裝 DISQUS 社群聚合留言板_102](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhilUyGiX2FoX8kOFBjOREIbh0I2WadwId3Faohug99FOpS8yP4uH0NNYdWvE7hNrD_rl2aC8l7tEa5s1ywYUgztUxMa8bHIKtcjyXDyTPU812ob-xhx0iGfG6KXc_4AzH9ntrOGpmdMGo/s1600/install-disqus-on-blogger_102.jpg)
Step 3
註冊完成後,在這個頁面,點選畫面中的【Uinversal Code】圖示
![Blogger 安裝 DISQUS 社群聚合留言板_103 Blogger 安裝 DISQUS 社群聚合留言板_103](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWqTTPcR7GF-1lbtRswE6O4B1uOGMSkJ6syDP8GeijCQ23DpGZ5V7rW-9CEK8ODkJxVIbMys7I_5HHm6Y8mWC2PH9fFBHP4JnZlWWraNfalXlfT5oRo7yCKTqtPxs3jC5bV_4q0Zo5DY/s1600/install-disqus-on-blogger_103.jpg)
Step 4
接著我們將「第一區的程式代碼」全選【複制】
![Blogger 安裝 DISQUS 社群聚合留言板_104 Blogger 安裝 DISQUS 社群聚合留言板_104](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyqgjdqLncW3jlZfMpnU5fdjhEjgYt5oOIJ7xCVHGjTQPqoeCCCLyW6Jk6TuGxm4XQB9vn_v5cjDgisdIdEhgJ541VIJTzeHqJ7IhDKNRYYpxHNbqXC-ewfupkG9P3hyphenhyphenbNm3vAKeBa3YU/s1600/install-disqus-on-blogger_104.jpg)
Step 5
「瀏覽器」開一新分頁,來到「Blogger 後台」,選擇畫面中的【範本 \ 編輯 HTML】
![Blogger 安裝 DISQUS 社群聚合留言板_105 Blogger 安裝 DISQUS 社群聚合留言板_105](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ4ZPgB2lAsx76aPRcBxXAeoD7RWMrLPK1_XL3NToSnYIJnQ3YzkkXdtniL1aMac6La_2KdjV_5ivUG97Vhbcq_mmUevNoIjDJ7LqgvL7QZ2PP94Bi3iaHxTcryx3sRMKn_rxH9toxTFc/s1600/install-disqus-on-blogger_105.jpg)
Step 6
接著在頁框內的【程式代碼中點一下】,按下鍵盤上的【Ctrl + F】( 按著 Ctrl 再按一下 F ) 在跳出的搜尋框中 輸入 [ <div id='backlinks-container'> ] 並【按下 Enter】
![Blogger 安裝 DISQUS 社群聚合留言板_106 Blogger 安裝 DISQUS 社群聚合留言板_106](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNGA17oqvP8FgZJMoxIxBBQcsxhuEV7jQ0o-1kShon7qFcjnSwqsY264B4wlA17N_0nSb47HA0fbZ9ZGRtX2hPI8FaQQho2un9ywdbgXGzQT6ZPKSjDEFQGFL_XPH8sTjGdagbrm2xgLQ/s1600/install-disqus-on-blogger_106.jpg)
Step 7
在「<div id='backlinks-container'>」的下方,放上剛才「Step4.」複制的程式碼
補充:程式碼 需介於下方區間,因為測試使用的模板有兩處「<div id='backlinks-container'>」
<div id='backlinks-container'>
→ 此區間為要放入的程式碼 ←
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
![Blogger 安裝 DISQUS 社群聚合留言板_107 Blogger 安裝 DISQUS 社群聚合留言板_107](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxD-qILxZ4IX2lYL-Y5-LewEgZzBA8cPCcDnh1cDvyJJmIcQ1HoIQc9Y7I6qySmWE6QhETPa6R1bPgs96GwKtwMNxvYI16tfMG0Od1qTknTcXo_vMFxyhYRQUAGUeoQ_czt0OlstPtFg/s1600/install-disqus-on-blogger_107.jpg)
Step 8
「瀏覽器」回到 Disqus 的分頁,再全選【複制】網頁下方「第二區的程式代碼」
![Blogger 安裝 DISQUS 社群聚合留言板_108 Blogger 安裝 DISQUS 社群聚合留言板_108](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg28d5YWkhLUp34-pbuNSRZNYOYTeOea0LaIfYKTXgss0a-CGxaPFCsEvSKoD_2cfIL3b-b8Qa1-xJ8m3Xm8rDd6Xpdxfo4FqtPNuQoAQfuauaYnyZtA0jDtcoJwDj9CvCeJp7RTZlqd4Y/s1600/install-disqus-on-blogger_108.jpg)
Step 9
「瀏覽器」回到 Blogger 後台分頁,在搜尋框中輸入 [ </body> ] 並【按下 Enter】,且在它上面放上「Step7.」的程式碼,按下畫面上方的【儲存範本】
![Blogger 安裝 DISQUS 社群聚合留言板_109 Blogger 安裝 DISQUS 社群聚合留言板_109](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLB9BQBSv3XQqAeOLpfkTUr8RC_3wH7W8h0tp9rwcWpsquXShgXRiMVue8VkDBMmUggpQKIFxaWA2vyYyMkRR5sC4Df_95EvMGU3dKChcTznu9xT2QtNDNKwD1sigFLhzBylbpGZlJZR8/s1600/install-disqus-on-blogger_109.jpg)
Step 10
接著「瀏覽器」開一新分頁,來到「Blogger 後台 」的【設定 \ 文章和留言】
留言位置 選擇 → 隱藏
誰能留言 選擇 → 任何人
留言管理 選擇 → 永不
點擊右上方【儲存設定】之後,「瀏覽器」回到 Disqus 分頁
![Blogger 安裝 DISQUS 社群聚合留言板_110 Blogger 安裝 DISQUS 社群聚合留言板_110](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NlXZBfPVidCs03C8vyqssCrQ6zRr9WmAtqxy44RIfCOkkDdOH7xAgftf0fGh8akuogoPiYO3PTVNkLTQNuYLVKjOCWeNJ9sSSo01eqnp-RFNxTi1xDBmtOzGLfBsn70TR7V4xxWtDr4/s1600/install-disqus-on-blogger_110.jpg)
Step 11
將「Uinversal Code」下拉【選擇 Blogger】
![Blogger 安裝 DISQUS 社群聚合留言板_111 Blogger 安裝 DISQUS 社群聚合留言板_111](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAr8_fvHrpLjDu7fhqFBVoX_LvitJlZi-AUDZ72WT6FRzN_2CRqGujSpVGJ0Q99HH6sz_Zh-hVBK8GQBtv5NeI0pjvGenTWTBBDMTiS4pDE01hnj24wKS6Qe7H8wVg283alTDoZaFFIGg/s1600/install-disqus-on-blogger_111.jpg)
Step 12
點取【See instrucitons here】
![Blogger 安裝 DISQUS 社群聚合留言板_112 Blogger 安裝 DISQUS 社群聚合留言板_112](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSSJBBzLp-nHT2S5stUvX9VtFVWTj6YCmdIDJCL4m0rv_tbfaLStT5OCQUsLevIhoT7IQE1st-EerWKuv49ge3cSln-7OqEV_iaMs4t1jsTayyVmP_OiRLD-AsnN-OrTRcH0fKry5qqk/s1600/install-disqus-on-blogger_112.jpg)
Step 13
將頁面中的「兩段程式代碼」,一同【複制】到「Step14.」中
![Blogger 安裝 DISQUS 社群聚合留言板_113 Blogger 安裝 DISQUS 社群聚合留言板_113](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2MSguQGqpr68EieRFfFQCD6d0YuSnamrPD6MI18CGyYTqaBZCdLaLDcpy-6TtwRcZmTDSJBWFU3cGEtGTfvk_l4e_ZZqkNU0tZyqExOXKp_1aoIti2wXmyzmSjDH1b2mL0AG3M75jhNo/s1600/install-disqus-on-blogger_113.jpg)
Step 14
「瀏覽器」回到 HTML 分頁,在搜尋框中 輸入 [ <head> ] 並按下【Enter】,且在它的下面放上「Step13.」的程式碼,最後再按下畫面上方的【儲存範本】
![Blogger 安裝 DISQUS 社群聚合留言板_114 Blogger 安裝 DISQUS 社群聚合留言板_114](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZSw5MGNEcmOe6la8Q4msPQArswcN4K3U-7EKPzYz-nRxfhm_c74NIH4uUuz6Apx4y3u5bB0LNubEWTo7P5GLnE06XIkw-7izjOsoLPeX7R3AocckTSmPBZKsUqFp32BfAzcMSYaTB3X4/s1600/install-disqus-on-blogger_114.jpg)
Step 15
「瀏覽器」回到 Disqus 分頁,在這裡選擇畫面中的【Tools > Import】
![Blogger 安裝 DISQUS 社群聚合留言板_115 Blogger 安裝 DISQUS 社群聚合留言板_115](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDtiDrb-7WDxvDam0SQrZiSobup6S1q-yH5cKK7AArr09FJXH7api6tqUPco51-b_k7l8Ye4-H_7JwNCMto3NKpmQur-kN_Jjw8nY6JuaAkZuHdrc6HGj0Ivb90Q1cmiZRmt1VLQZUG7I/s1600/install-disqus-on-blogger_115.jpg)
Step 16
點擊【Import comments from Blogger】並在出現的視窗中點選【授予存取權】
![Blogger 安裝 DISQUS 社群聚合留言板_116 Blogger 安裝 DISQUS 社群聚合留言板_116](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDreZf_hqksiCQ5ciOh6kEba86QtvlDlXimRxsLPhBIprPRHIOtOBePdAco-KfmWOOaEFmQwVpU9YSHq6InZBUu2uTqlBseO_2aoH_ghkm26hYbU8XDDTVgXNOXJOSCfsSfTY31Jn52HU/s1600/install-disqus-on-blogger_116.jpg)
Step 17
接著點擊【Import】
![]() |
(* 如果留言數量很多的話,那對應的時間可能要 24 小時 ) |
Step 18
這裡是同步留言的功能,點擊【Disable syncing】並在出現的視窗中點選【授予存取權】
![Blogger 安裝 DISQUS 社群聚合留言板_118 Blogger 安裝 DISQUS 社群聚合留言板_118](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihmpzjfpZDVUGjc6UCYrv7FBV3dE7I6S6ksM8TcFWzX0VV4-wvlSb5-hCoBl_CF7_BIRGw_Vm5h8kPBxMsB5er30l8FW0DA5Ywt5h_hr3X6FiqHRKwnrswIXUatrv3Fcrn7mSRHsiN0k0/s1600/install-disqus-on-blogger_118.jpg)
Step 19
接著的這個畫面可以【將它關掉】,因為要做的設定,在「Step10.」時已經完成
![Blogger 安裝 DISQUS 社群聚合留言板_119 Blogger 安裝 DISQUS 社群聚合留言板_119](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg69cdJweNy3icgSK0CrVdl3cqbuegQWIUAaUkmgLij9xbK9hyphenhyphenYuvPgmvuPxZaTw7EYtJvRCJKAT3Kb45OIRI7K1k8cfjoLfvHIca54iUI8xADeTIheUS_GsBXtiRzGBeeNEt8QycdcDBA/s1600/install-disqus-on-blogger_119.jpg)
Step 20
回到「Blogger 前台」,可以看到「Disqus 留言板」成功運作了
![Blogger 安裝 DISQUS 社群聚合留言板_120 Blogger 安裝 DISQUS 社群聚合留言板_120](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXSLo3jttW15K8n5sONYwwu_DQjFMf1b6QEgtZCybxG9PJXEDFk4F_Z-fcQN4A7XIBDJTz24yJD5k8pXpj9Vmdcf3XVr75mFclmXTvl79tFvTNmXUv9HcGiIQw6KQmIOq_PLb9UazgYCk/s1600/install-disqus-on-blogger_120.jpg)
Step 21
最後,別忘了到「電子信箱收信」,並將 Disqus 寄來的認證信做【認證】
![Blogger 安裝 DISQUS 社群聚合留言板_121 Blogger 安裝 DISQUS 社群聚合留言板_121](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU4Yc-u-jliNIF392ro4d29_sjpFBwXowX4YV9RsXkWa8VhGc_dZS0N_iaUtlbM57hQ_F66z140ww4jUSERqV16v5E1YjD_gSKoRbNG971-mWpqDnKEnNXQ_ueFX17mUzbLzim088fXwM/s1600/install-disqus-on-blogger_121.jpg)
相關文章
Blogger 安裝 DISQUS 最新留言[教學] Blogger 快速安裝 DISQUS 留言板
留言
張貼留言