How-To integrate DISQUS on Blogger/BlogSpot classic templates avatar
Yohan Yukiya Sese-Cuneta
 | | 5 minutes read

Fediverse Follow

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>

    OR

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

    OR

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

    OR

    1

    <$BlogItemCommentCount$> Comments:

  • 3.2: Change it to:

    1
2

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

    OR

    1

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

Step 4

  • 4.1: Look for:

    1

    <$BlogItemCreate$>

  • 4.2: Change it to:

    1

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

  • 4.3: Look for:

    1

    <$BlogItemFeedLinks$>

  • 4.4: Change it to:

    1

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

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!

Did you like it? Do share this post, leave a comment below, and send me a gift! (opens in a new tab/window)

avatar

Yohan Yukiya Sese-Cunetaㆍ사요한・謝雪矢·ᜌᜓᜃᜒIf this is not the end of oblivion, then I shall live everyday as if my life were to end this very day.

Advice Android Appointed Times Astronomy Autism Discourse Events Films Geography How-To Internet Life Linux Literature Love Meteorology Music Opinion Photography Sports TV Unicode Web Windows
The YOOki Chronicles

The YOOki Chronicles is Yohan Yukiya Sese-Cuneta’s return into casual and personal blogging. The name “YOOki” is a mash-up of the acronym of YourOnly.One and my nickname ᜌᜓᜃᜒ (Yuki・雪矢).

Interestingly, according to Chinese legend, 柳 (YOO) is an ancient Chinese surname. The ancestors of the surname were closely linked with the ancient sage-king named Yu Shun. In Korea, the 유 (YU) lineage traces to the Xia, Han, and Joseon dynasties. Holders of the surname Yu or Yoo had a reputation for charity and diligence.1

It is also the word for “willow” or the “willow tree” which means graceful or slender; and a tree growing near a body of water which provide continuous nourishment and resources for everyone. It can also mean to exist, an oil (anointment(?)), and simply as “U” (you).

The Hanzi 紀 (ki) character means to record, be disciplined, provide order. While the Hangeul equivalent, 키 (ki), means energy, spirit, a banner, and a period of time; and is also a suffix used to make a gerund or an infinitive.

  1. 「유」 Yoo (Korean surname); CC-BY-SA 3.0 Unported License ↩︎

Now Playing
Social Links