Blogger手動新增Disqus留言系統

對於Blogger本身提供的留言板，個人覺得不合我的胃口，搜尋了一下，有蠻多人使用Disqus所提供的網路留言服務，感覺還不錯，於是找了一篇時間最新的教學文章，{ 鍵盤自耕農 }-將 Blogger 留言 轉換到 Disqus 平台，結果做到「Add xxx to my Blogger site」這步驟時，產生了一些問題，無論怎麼新增網頁都無法正確顯示，後來查看了官網的教學，Manually adding a Disqus gadget to Blogger，手動新增Disqus就成功了。

(1) 到Blogger後台→選擇左側「版面配置」

(2)選擇新增小工具→選擇HTML/JavaScript

(4)標題輸入Disqus，內容輸入<!-- Disqus comments gadget -->，如下圖，儲存

(5)將Disqusw從rightsidebarwidgets拖拉到mainblogsec，如下圖，拖拉之後，右上角儲存排列方式

(6)到Blogger後台→選擇左側「範本」→編輯Html

(7)於程式碼區塊，Ctrl+F搜尋Disqus，會找到這行程式碼

<b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>

view raw Disqus.xml hosted with ❤ by GitHub

在這行加上mobile='yes'，如下面的程式碼

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'>

view raw Disqus-add-1.xml hosted with ❤ by GitHub

程式碼的右邊 有一個黑色小箭頭，把它點開，可以看到如下程式碼，把它全部刪掉

	<b:includable id='main'>
	<!-- only display title if it's non-empty -->
	<b:if cond='data:title != &quot;&quot;'>
	<h2 class='title'><data:title/></h2>
	</b:if>
	<div class='widget-content'>
	<data:content/>
	</div>
	<b:include name='quickedit'/>
	</b:includable>

view raw Disqus-Delete.xml hosted with ❤ by GitHub

刪掉之後，於「</b:widget>」的前面，將下面程式碼貼上

	<b:includable id='main'>
	<script type='text/javascript'>
	var disqus_shortname = &#39;EXAMPLE&#39;;
	var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
	if (!disqus_blogger_current_url.length) {
	disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
	}
	var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
	var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
	</script>
	<b:if cond='data:blog.pageType == &quot;item&quot;'>
	<style type='text/css'>
	#comments {display:none;}
	</style>
	<script type='text/javascript'>
	(function() {
	var bloggerjs = document.createElement(&#39;script&#39;);
	bloggerjs.type = &#39;text/javascript&#39;;
	bloggerjs.async = true;
	bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
	(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
	})();
	</script>
	</b:if>
	<style type='text/css'>
	.post-comment-link { visibility: hidden; }
	</style>
	<script type='text/javascript'>
	(function() {
	var bloggerjs = document.createElement(&#39;script&#39;);
	bloggerjs.type = &#39;text/javascript&#39;;
	bloggerjs.async = true;
	bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
	(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
	})();
	</script>
	</b:includable>

view raw Disqus-add-2.xml hosted with ❤ by GitHub

程式碼第三行的部分「"var disqus_shortname = &#39;EXAMPLE&#39;;"」，請把EXAMPLE換成你自己在Disqus所申請的Site，假設你的site是abc，那你就要改成「"var disqus_shortname = &#39;abc&#39;;"」 

(8)儲存範本後，即可回前端網頁文章底步觀看成果!