Button to show disqus comments

tips & tricks
1

I recently added disqus comments to one of my themes (and my site, which uses the theme). I didn’t like how the comments were displayed by default. So I hid them, then added a button to show them on click. A short GIF below.

show-disqus-comments
show-disqus-comments.gif984×455 94.2 KB

One thing to note: the disqus iframes when initially loaded had a huge height, like 1,000px plus, and it made my page look weird with all the empty space. So I set a max-height on the comment div and iframes. Not the most elegant but it does the job.

disqus.html partial

<div id="disqus-container">
  {{ $ctx := . }}
  {{ with .Site.DisqusShortname }}
    <button id="disqus-button" onclick="showComments()">Show comments</button>
    <div id="disqus-comments">
      {{ if eq . "yourdiscussshortname" }}
        <p>Disqus comments are disabled.</p>
      {{ else }}
        {{ template "_internal/disqus.html" $ctx }}
      {{ end }}
    </div>
  {{ end }}
</div>

CSS

#disqus-container {
  font-size: 0.85rem;
  border: 1px solid;
  padding: 1.5rem;
}
#disqus-button {
  width: 100%;
}
#disqus-comments {
  display: none; 
}
#disqus-comments,
#disqus-comments iframe {
  max-height: 65vh !important;
  overflow-y: auto; 
}

JS

function showComments() {
  var disqusButton = document.getElementById('disqus-button');
  disqusButton.parentNode.removeChild(disqusButton); 

  var disqusComments = document.getElementById('disqus-comments');
  disqusComments.style.display = 'block'; 
}
4 Likes
2

Nice idea, but perhaps this should be extended so that the Disqus JS is only loaded if the button is pressed, instead of doing it purely via CSS.

3

I like the idea. I guess I’d have to use straight disqus JS instead of the internal shortcode.

4

@olafghanizadeh New and improved. Disqus JS now only loaded on button click.

I like this much better as my average blog post is now 70 kb instead of 700 kb.

disqus.html

<div id="disqus-container">
  {{ with .Site.DisqusShortname }}
    <button id="disqus-button" onclick="showComments()">Show comments</button>
    <div id="disqus-comments">
      {{ $isDummyName := eq . "yourdiscussshortname" }}
      {{ $isServer := $.Site.IsServer }}
      {{ if or $isDummyName $isServer }}
        <p>Disqus comments are disabled.</p>
        <script type="application/javascript">
          function showComments() {
            {{ partial "disqus-js-common.js" . | safeJS }}
          }
        </script>
      {{ else }}
        <div id="disqus_thread">
        </div>
        <script type="application/javascript">
          function showComments() {
            {{ partial "disqus-js-main.js" . | safeJS }}
            {{ partial "disqus-js-common.js" . | safeJS }}
          }
        </script>
      {{ end }}
      <noscript>Enable JavaScript to view Disqus comments.</noscript>
    </div>
  {{ end }}
</div>

disqus-js-common.js

// Remove button
var disqusButton = document.getElementById('disqus-button');
disqusButton.parentNode.removeChild(disqusButton); 
// Un-hide comments
var disqusComments = document.getElementById('disqus-comments');
disqusComments.style.display = 'block';

disqus-js-main.js

// Config
var disqus_config = function () {
};
// Build and append comments 
var d = document;
var s = d.createElement('script');
s.async = true;
s.src = '//' + "{{ . }}" + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', + new Date());
(d.head || d.body).appendChild(s);
4 Likes
5

I didn’t like how the comments were displayed

the disqus iframe s when initially loaded had a huge height, like 1,000px plus

I hope it’s ok if I plug a Disqus alternative I’ve built then? 1) It resizes its iframe properly, so the iframe is not larger than needed. (I wonder why Disqus didn’t do that properly in you case? Is it something with this particular Hugo blog, or is it always like that, with Disqus? )

And 2) it looks quite different from Disqus; maybe you like it better? (If not, would be interesting to hear what could be changed.) Scroll down here for screenshots: https://www.talkyard.io/blog-comments

(B.t.w. interested to see how you hide the comments, … for different reasons — namely to not load the comments, until one has scrolled down so they would be visible. That’d save some bandwidth, in the cases when people don’t scroll down to the comments.)

6

Thanks for sharing. I’ll look into this when I have time.

Not sure. Something I did notice, once I made the change to only load the disqus JS on click, the iframe sizing problem went away. My fuzzy guess is it was all the various calls disqus was making while the rest of the page was being rendered.

9

By default disqus depends on lazyloading but when built with Hugo’s template things become annoying as Hugo(AFAIK) compile it along with other content and disqus lazyload waste away

10

@zwbetz

I tried this and I’m always getting “Disqus comments are disabled.” even if I put my disqus shortname

disqus.html:

<div id="disqus-container">
  {{ with .Site.DisqusShortname }}
    <button id="disqus-button" onclick="showComments()">Show comments</button>
    <div id="disqus-comments">
      {{ $isDummyName := eq . "iputmydisqusshortnamehere" }}
      {{ $isServer := $.Site.IsServer }}
      {{ if or $isDummyName $isServer }}
        <p>Disqus comments are disabled.</p>
        <script type="application/javascript">
          function showComments() {
            {{ partial "disqus-js-common.js" . | safeJS }}
          }
        </script>
      {{ else }}
        <div id="disqus_thread">
        </div>
        <script type="application/javascript">
          function showComments() {
            {{ partial "disqus-js-main.js" . | safeJS }}
            {{ partial "disqus-js-common.js" . | safeJS }}
          }
        </script>
      {{ end }}
      <noscript>Enable JavaScript to view Disqus comments.</noscript>
    </div>
  {{ end }}
</div>

Thank you!

11

You need to temporarily change the value of $isServer to false

12

Hi, this worked perfectly expect for where the button doesn’t disappear.
Is there a way to make the button disappear or make it show Hid Comments.

13

There is already JS code that removes the button Button to show disqus comments

1 Like
14

Thank you, let me try again, for some reason it wouldn’t disapper. But now it does, added a button class to theme it. But turns out it was the one causing issues

15

The “load Disqus JS only if the show comment buttons is pressed” should be supported by default by Hugo in its mobile version (kind of how Youtube’s website works).

Anyone surfing the net (1990! yeah!) with 4G need to be able to have the choice available.