How-To integrate DISQUS on Blogger/BlogSpot classic templates

This only applies to “first-generation classic themes” or “traditional templates”.

Maybe you have read my HOW TO: Add DISQUS Manually on Blogger/BlogSpot but found it is for XML-based templates. Fret not, in this how-to, we are going to integrate DISQUS on your Blogger/BlogSpot Classic/Custom Template!

Check for updates below this guide. Latest update on Tuesday, 2009-04-28.

But first, thanks to Nathan Henderson for sharing the changes he did. I then added a few more edits to give the finishing touch. Last but definitely not the least, read this warning.

WARNING: Be sure to back-up your working template before attempting to overwrite it! This guide is also recommended to be followed by those comfortable with editing HTML/CSS.

Step 1

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

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

2.1: Look for:

1
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>

1
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> Comments</a>

2.2: Change it to:

1
2
3
4
<!-- <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a> -->
<!-- +disqus -->
<a class='comment-link commentslink' href='<$BlogItemPermalinkUrl$>#disqus_thread'><span style="text-transform:lowercase">View Comments »</span></a>
<!-- -disqus -->

1
2
3
4
<!-- <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> Comments</a> -->
<!-- +disqus -->
<a class='comment-link commentslink' href='<$BlogItemPermalinkUrl$>#disqus_thread'><span style="text-transform:lowercase">View Comments »</span></a>
<!-- -disqus -->

Step 3

This step is for “0 Comment”; “1 Comment”; “10 Comments” text that shows up when viewing a single post. Also note that this piece of code is not present in some templates by-design, so skip to Step 4.

3.1: Look for:

1
<$I18NNumComments$>:

1
<$BlogItemCommentCount$> Comments:

3.2: Change it to:

1
2
<!-- <$I18NNumComments$>: -->
Comments:

1
<!-- <$BlogItemCommentCount$> --> Comments:

Step 4

4.1: Look for:
1
<$BlogItemCreate$>
4.2: Change it to:
1

4.3: Look for:
1
<$BlogItemFeedLinks$>
4.4: Change it to:
1

Step 5

5.1: Look for:

1
2
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>

5.2: Add above/before:

 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;'><$BlogItemTitle$></div>
<div id='disqus_post_permalink' style='display:none;'><$BlogItemPermalinkUrl$></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 -->

5.3: In Step 5.2, change the DISQUS-SHORT-NAME to your blog’s DISQUS URL.
Example, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-NAME to libresoftware. There is one 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-NAME to your blog’s DISQUS URL.
Again, if your DISQUS URL is libresoftware.disqus.com then change DISQUS-SHORT-NAME to libresoftware. Only one to change here.

Step 7

7.1: Copy your updated code to your Blogger’s Template editing section 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 fetch a new copy of the site from the server.

You’re done! Congratulations!

Some notes to remember. This how-to guide was designed to still show the comments posted via your built-in comment system (Blogger’s in this case), while at the same disabling the ability to post new comments using the old system by removing the link.

For the adventurous, you can also find the DISQUS API here.

Updates

Friday, 2013-08-02: Updated the JavaScript code to reflect the latest disqus script in steps 5 and 6
Saturday, 2008-06-14
- Updated the instructions to include the older Classic Template codes
- Updated Step 6. The reason the ## Comments was not showing up was because I missed to change one instance of DISQUS-SHORT-NAME, which was pulling data from “highstreet5”. Please check your codes on Step 6
- Thanks to the classic blogger code provided by David Alvarez. I was helping him integrate DISQUS and that’s when I caught the error.
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 for the suggestion.
Tuesday, 2009-04-28: Corrected Steps 5.2 and 6.2. Hat tip to chrisdfeld for catching the errors.
Tuesday, 2011-07-06: Fixed typographical error in Step 5.2, thanks to lil-bee for bringing it to my attention

If you have other questions, don’t hesitate to reply in our Disqus-powered comments or the official Disqus forums!