Button to show disqus comments

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

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);
3 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.