黑色童話不加糖Black Tale No Sugar

Joyce書寫對電影的反芻、文化的反叛與新媒體的反思

[教學]Blogger如何手動安裝Disqus

18級字體 16級字體 14級字體

 

 

Joyce這篇文章才寫到一半,就發現國外已經有人寫了幾乎一模一樣的教學,但我還是硬著頭皮寫完好了,希望能幫助更多想安裝Disqus的網友們無痛轉移,假如你英文不錯,可以直接閱讀Shixi XIE所寫的 「HOW TO: Add DISQUS Manually on Blogger/BlogSpot」,有外語焦慮症的請繼續閱讀Joyce的教學。

 

Joyce的Blogger現在所安裝的樣式其實是東拼西湊的混裝物,原作者有許多獨特的語法寫作習慣,加上我自己又寫入亂七八糟的功能,使得安裝disqus相當困難,我想很多blogger都有這種困擾,想挑個與眾不同的樣式,卻造成日後安裝其他功能常出錯。

 

改天再來講我與這個雙欄樣式的抗戰史,在安裝Disqus前,請一定要記得完整備份你的模版!

0

開始打開模板的XML檔案 手動修改,共四個步驟

步驟一:

在 ]]></b:skin> 前,加入下面曲線框框內的語法,可增加在不同瀏覽器的顯示相容性。

// 讓disqus能自動設定留言區塊寬度為100% // #disqus_thread, #disqus_thread #dsq-content { width: 100%; }

步驟二:

為首頁的文章資訊列加入留言訊息,如圖例

1

 

找到符合以下語法的區塊

<b:if cond="data:post.allowComments"><a expr:onclick="data:post.addCommentOnclick" expr:href="data:post.addCommentUrl"> <data:post.numcomments />Comments</a> </b:if>

 

以下面語法替換,中文的部分可換成你習慣的用語

<b:if cond='data:post.allowComments'> <!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:post.numComments/> 則回應</a> --> <!-- +disqus --> <a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>點此回應 &#187;</a> <!-- -disqus --> </b:if>

步驟三:

在每篇文章頁下方加入留言區塊,如圖例

2

 

找到下面這行語法

<div id='backlinks-container'>

 

在其上方加入這段程式碼,並注意下列程式碼中有兩處需填入你的Disqus帳號!

<!-- +disqus --> <div id='disqus_thread'/> <div id='disqus_post_title' style='display:none;'><data:post.title/> </div> <div id='disqus_post_message' style='display:none;'><data:post.body/> </div> <script type='text/javascript'> var disqus_url = &#39;<data:post.url/>&#39;; var disqus_title = document.getElementById(&#39;disqus_post_title&#39;).innerHTML; var disqus_message = document.getElementById(&#39;disqus_post_message&#39;).innerHTML; </script> <script src='http://disqus.com/forums/你的DISQUS帳號/embed.js' type='text/javascript'/> <noscript><a expr:href='&quot;http://你的DISQUS帳號.disqus.com/?url=&quot; + data:post.url'>View the entire comment thread.</a></noscript> <a class='dsq-brlink' expr:href='&quot;http://disqus.com&quot;'> blog comments powered by <span class='logo-disqus'>Disqus</span></a> <!-- -disqus -->

步驟四:

 

找到下列程式碼

</body>

 

在其上方加入這段程式碼

<!-- +disqus --> <b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> (function() { var links = document.getElementsByTagName(&#39;a&#39;); var query = &#39;?&#39;; for(var i = 0; i &lt; links.length; i++) { if(links[i].href.indexOf(&#39;#disqus_thread&#39;) &gt;= 0) { query += &#39;url&#39; + i + &#39;=&#39; + encodeURIComponent(links[i].href) + &#39;&amp;&#39;; } } document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;http://disqus.com/forums/ highstreet5/get_num_replies.js&#39; + query + &#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;); })(); </script> </b:if> <!-- -disqus -->

 

將修改過的語法套用到你的部落格,接著發一篇文章作測試,假如新文章有出現disqus留言功能,恭喜你已成功安裝。

 

假如按照Joyce的教學依舊失敗,那請接著以Shixi XIE在 「HOW TO: Add DISQUS Manually on Blogger/BlogSpot」這篇所提的另外兩個補充方法試試,方法如下。

補充一:

找找看你的模板內是否有“類似”下列的程式碼

<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if>

 

假如有,請以下列程式碼替換

<!-- <b:if cond='data:post.numComments == 1'> --> <!-- 1 <data:commentLabel/>: --> <!-- <b:else/> --> <!-- <data:post.numComments/> <data:commentLabelPlural/>: --> <!-- </b:if> --> Comments:

補充二:

找找看你的模板內是否有“類似”下列的程式碼

<p class='comment-footer2'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/></a> </p>

 

假如有,請以下列程式碼替換

<!-- <p class='comment-footer2'> --> <!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/></a> --> <!-- </p> -->

 

再一次將修改過的語法套用到你的部落格,假如依舊不行,歡迎留言或將模板寄給Joyce,我會盡力幫忙。

假如你用的是舊版的blogger模板,Shixi XIE同時寫了一篇「

HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template

 

衍伸閱讀:「Disqus視訊留言的策略分析」─ 生自藍海又殺回紅海

 
    
           

    我的噗浪誌

    流量工具




    Directory of Personal Blogs
    網誌排行 top-bloggers.com


    Anibi書櫃

     
    Related Posts Plugin for WordPress, Blogger...