Blog-01.jpg Source: License: CC BY-SA 2.0 by

[How-To] Integrate DISQUS on Blogger/BlogSpot Classic Template

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

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!

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:

/* 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:

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


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

2.2: Change it to:

<!-- <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 -->


<!-- <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:



<$BlogItemCommentCount$> Comments:

3.2: Change it to:

<!-- <$I18NNumComments$>: -->


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

Step 4

4.1: Look for:


4.2: Change it to:

<!-- <$BlogItemCreate$> -->

4.3: Look for:


4.4: Change it to:

<!-- <$BlogItemFeedLinks$> -->

Step 5

5.1: Look for:


5.2: Add above/before:

<!-- 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">
  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 + '';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<a href="" 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 then change DISQUS-SHORT-NAME to libresoftware. There is one to change.

Step 6

6.1: Look for:


6.2: Add above:

<!-- BGN: disqus -->
<script type="text/javascript">
  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 + '';
    (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
<!-- 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 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.


  • 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!

Blog by is licensed under CC BY-SA 2.0.

Is a self-confessed bibliophile and technophile other than being an early adopter, an avid gamer, a geek, nerd, role-player, anime otaku, and trekker.

His first online project was in 1998 when he launched the unofficial website for Ansalon MUD and his own community forums Laibcoms.Community. By 2003 he created his work blog GM-Yukino which grew into gameshogun™, Snoworld™, and techmagus™.

His website is and He also owns Clean Real Food, YourOnly.One, Adorable & Beautiful, and other online properties.

Article Name
[How-To] Integrate DISQUS on Blogger/BlogSpot Classic Template
A short guide on how to integrate Disqus on Google Blogger / Blogspot websites. This tutorial is for those using the Classic Template, not the XML version.

CC BY-SA 4.0 [How-To] Integrate DISQUS on Blogger/BlogSpot Classic Template by Yuki is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at Legal Notice.

Comment(s) via

Loading Disqus Comments ...
Loading Facebook Comments ...

11 thoughts on “[How-To] Integrate DISQUS on Blogger/BlogSpot Classic Template”

    1. Yep, it is very tricky.

      Could you send me your template on my gmail – jcjohn.sesecuneta, just remove any identifiable codes and stuff, I’ll take a look what’s new with Blogger or what’s unique that isn’t on other templates.

      Thank you!

      1. can you help me also?! >.< Please and thank you?? My blog template is a complete mess! Half of the things you ask me to look for arent even there I think… its like i puked html out on a page T___T

  1. Just a heads up. I found a couple of bugs in the code above that was introduced after I migrated to WordPress.

    I’ll have an updated version by tomorrow with the new Disqus JavaScript code, which was the reason why it was no longer working.

    It’s midnight here so pardon me for not updating it yet.

  2. Hi, thanks a lot for this tutorial but I have some doubts… sorry.
    I’m using a template of blogskins(for blogger- classic template) and I was wondering if this works if I’m using that template? because I’m trying but… I can’t or I didn’t quite understand. Sorry for the inconvenience.

  3. Hi,I am trying to do this, but I have a classic template I created myself and half the stuff is not even present on my template! What do I do?

Leave a Reply

Skip to toolbar