How-To add DISQUS manually on Blogger/BlogSpot avatar
ᜌᜓᜃᜒ (Yuki)
 | | 3 分で読めます

Fediverse Follow

This guide was last updated on 2008 and since then Disqus created an automated method. It is strongly suggested to use it by visiting this link and then switch to the correct site.

If like me you are using DISQUS for your blog or site comments system, then maybe you’ve encountered a problem with integrating it to your custom theme/template. In this simple tutorial, I will show you which code bits to edit to successfully integrate Disqus into your Google Blogger/BlogSpot XML-based template. (Basically it is the same with any theme/template regardless of your blog platform or CMS.)

But if you have a Classic Template, then read my HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template instead.

Check for updates below this guide. Latest update: Saturday, 2008-08-23.

WARNING: Be sure to back-up your working template before you overwrite it! Last but not the least, you should be comfortable with editing HTML and CSS, otherwise, you might get frustrated, confused, and end up with a non-working blog/site.

With that said, let’s begin!

Step 1

This step is for the “0 Comment”; “1 Comment”; “10 Comments” link that shows on your main page.

  • 1.1: Add this to your CSS area or CSS file

    1
    2
    3
    4
    
    /* Depending on your template, sometimes on some browsers, disqus doesn't auto-width 100% */
    #disqus_thread, #disqus_thread #dsq-content {
        width: 100%;
    }
    

Step 2

  • 2.1: Look for:

    1
    2
    3
    
    <b:if cond='data:post.allowComments'>
        <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> Comments<;/a>
    </b:if>
    
  • 2.2: Change it to:

    1
    2
    3
    4
    5
    6
    
    <b:if cond='data:post.allowComments'>
        <!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> Comments</a> -->
        <!-- +disqus -->
        <a class='comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'>View Comments »</a>
        <!-- -disqus -->
    </b:if>
    

Step 3

Step 3 is for the “0 Comment”; “1 Comment”; “10 Comments” text that shows when viewing a specific post. Some templates do not have this, so if you can’t find it, skip to Step 4.

  • 3.1: Look for:

    1
    2
    3
    4
    5
    
    <b:if cond='data:post.numComments == 1'>
            1 <data:commentLabel/>:
        <b:else/>
            <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
    
  • 3.2: Change it to:

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

Step 4

  • 4.1: Look for:

    1
    
    <div id='backlinks-container'>
    
  • 4.2: Usually, above the code bit in 4.1, you will find this:

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

It may be enclosed on a DIV tag instead of a P element. Additionally, sometimes you may find that it’s arranged differently, if so, just look for any bits similar to 4.1.

  • 4.3: Once you find it, change it to:

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

Step 5

  • 5.1: Look for:

    1
    
    <div id='backlinks-container'>
    
  • 5.2: Above it add:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    <!-- BGN: disqus -->
    <div id="disqus_thread"></div>
    <div id='disqus_post_title' style='display:none;'><data:post.title/></div>
    <div id='disqus_post_permalink' style='display:none;'><data:post.url/></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'DISQUS-SHORT-NAME'; // required: replace example with your forum shortname
        var disqus_title = document.getElementById('disqus_post_title').innerHTML;
        var disqus_url = document.getElementById('disqus_post_permalink').innerHTML;
        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    <!-- END: disqus -->
    

Note: If above the code bit shown in 5.1 there is a &lt;/b:if&gt;, then put the code bit in 5.2 before &lt;/b:if&gt;. If it isn’t there, as in some templates, you probably have to add it.

  • 5.3: From Step 5.2, change the DISQUS-SHORT-URL to your blog’s DISQUS URL.
    Example, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-URL to libresoftware. There are two to change!

Step 6

  • 6.1: Look for:

    1
    
    </body>
    
  • 6.2: Add above:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    
    <!-- BGN: disqus -->
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'DISQUS-SHORT-NAME'; // required: replace example with your forum shortname
    
        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function () {
            var s = document.createElement('script'); s.async = true;
            s.type = 'text/javascript';
            s.src = '//' + disqus_shortname + '.disqus.com/count.js';
            (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        }());
    </script>
    <!-- END: disqus -->
    
  • 6.3: In Step 6.2, change the DISQUS-SHORT-URL to your blog’s DISQUS URL.
    Again, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-URL to libresoftware, there is only one to change.

Step 7

  • 7.1: Copy your final code to your Blogger’s template and save it.

Step 8

  • 8.1: Force refresh your blog and blog-post (usually CTRL+F5) to see the changes.
    * Force refresh tells your browser to discard your current cached copy of your site and instead fetch a new copy from the server.

At this point, you are done when all is working fine. Congratulations!

Some things to remember. This how-to was designed to still show the comments posted on your built-in comment system (usually Blogger’s) while at the same time disabling any new comments from being posted using the built-in comment system, by removing the link to do so. However, if your visitors knows the direct link to Blogger’s built-in comment system, they can still leave comments the old way.

To effectively disable it without hiding all earlier comments, you need to edit the Post Options of each of your posts and change it to “Don’t allow, show existing”. Later, Disqus will introduce an import feature, so all old comments will be copied to your Disqus as well. Until then, this is the solution that I can think of.

For the adventurous, you can find information on the Disqus API by visiting the official developers webpage.

Hope that helps!


Updates

  • Friday, 2013-08-02: Updated the JavaScript code to reflect the latest disqus script in steps 5 and 6

  • Saturday, 2008-05-24: Thanks to Disqus’ Daniel Ha for featuring this how-to article on the official website! Glad to be of help.

  • Monday, 2008-05-26: Chinese (Taiwan) version [教學]Blogger如何手動安裝Disqus with screenshots by Joyce Wu.

  • Saturday, 2008-06-14: I updated step 6. I missed to change a Disqus URL to DISQUS-SHORT-URL, it was previously pulling data from “highstreet5”. Please check your codes on step 6.

    • Thanks to the classic Blogger code provided by David Alvarez, you can find his blog at balazos.blogspot.com. I was helping him integrate Disqus and that was when I caught the code I missed on Step 6.
  • Saturday, 2008-08-02: The tutorial was added at Disqus help forums by Andrew (from Disqus). Thank you very much and I’m glad to be of help to the community!

  • Saturday, 2008-08-23: Changed /{YOUR-DISQUS-URL}/ to /DISQUS-SHORT-URL/ to avoid confusion. Thanks to hackcrack.

If you have other questions, don’t hesitate to post a reply in our Disqus powered comments system.


avatar

ᜌᜓᜃᜒ (Yuki ・ 雪亮)これが忘却の終わりではないなら、私は自分の人生がまさにこの日に終わるかのように毎日生きるでしょう。

YOOki(柳紀 ・ 유기)クロニクル

YOOki(柳紀 ・ 유기)クロニクル は、ᜌᜓᜃᜒ (Yuki ・ 雪亮) がカジュアルで個人的なブログに戻ったことです。 「YOOki」という名前は、YourOnly.One の頭字語と私のニックネーム ᜌᜓᜃᜒ (Yuki ・ 雪亮) のマッシュアップです。

興味深いことに、中国の伝説によると、「柳」(YOO)は古代中国の名前です。この名前の祖先は、舜という古代の賢者の王と密接に関連していました。韓国では、「유」(YOO)の血統の痕跡があります。 Xia、Han、Joseon王朝に。YuまたはYooという名前の所有者は慈善と勤勉さで評判がありました。1

それはまた、「柳」または「柳の木」の言葉でもあり、優雅または細いことを意味します。 そして、水域の近くに生えている木は、すべての人に継続的な栄養と資源を提供します。 それはまた、存在すること、油(油注ぎ(?))、そして単に「U」(あなた)として存在することを意味することもあります。

漢字「紀」(ki)は、記録し、訓練し、秩序を与えることを意味します。 ハングルに相当する「기」(気;技)は、エネルギー、精神、旗、そして期間を意味します。 また、動名詞または不定詞を作成するために使用される接尾辞でもあります。

「YOOki」の中国語と韓国語としての「柳紀」と「유기」の意味を推測できますか?


注意:Google翻訳

再生中