Blog-01.jpg Source: https://www.flickr.com/photos/manoftaste-de/14045819341 License: CC BY-SA 2.0 by www.manoftaste.de https://www.flickr.com/photos/manoftaste-de/

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

OR

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

OR

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

<$I18NNumComments$>:

OR

<$BlogItemCommentCount$> Comments:

3.2: Change it to:

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

OR

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

Step 4

4.1: Look for:

<$BlogItemCreate$>

4.2: Change it to:

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

4.3: Look for:

<$BlogItemFeedLinks$>

4.4: Change it to:

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

Step 5

5.1: Look for:

</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>

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">
  /* * * 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="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://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:

</body>

6.2: Add above:

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


Blog by www.manoftaste.de 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 jcsesecuneta.com and 1way.faith. He also owns Clean Real Food, YourOnly.One, Adorable & Beautiful, and other online properties.

Summary
Article Name
[How-To] Integrate DISQUS on Blogger/BlogSpot Classic Template
Description
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.
Author
Publisher
techmagus™

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 Facebook Comments ...
Loading Disqus Comments ...
Skip to toolbar