Pages

Friday, January 24, 2020

Add Disqus comments to old school, html template Blogger sites

Added Disqus comments to the blog today. I imagine they do all sorts of nasty things behind the scenes with cookies and JavaScript. I apologize for that in advance -- though see below. The way I've done it, you'll only get that nastiness if you go to a single-post page by permalink.

Note also that I use the really old version of Blogger where I have my own html theme with some Blogger variables (like <$BlogItemPermalinkURL$>) sprinkled within. Let's just say that the instructions to add Disqus to Blogger are out of date for dinosaurs like me.

Here's what I added to my template. Neat plus: It's not loaded at all on my front page, and since every post is listed in its entirety there, you shouldn't get any Disqus nastiness unless you go to a specific post. That said, I've always kinda liked Disqus as a comment manager, so I hope you'll find it useful.

<!-- Disqus comments -->
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
    this.page.url = "<$BlogItemPermalinkURL$>";  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = "<$BlogItemNumber$>"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

(function () { // DON'T EDIT BELOW THIS LINE <<< MUAHAHAHAHA!!! I did anyway. Because I needed to.
    if (
        "/" !== window.location.pathname                                // on the home page
        && "" !== window.location.pathname                              // on the home page with IE < 11, _mayhbe_
        && !window.location.pathname.match(/^\/*[0-9]+\/[0-9]+\/*$/)    // archive pages
        && window.location.pathname.indexOf("search") == -1             // tag search pages
    ) {
        var d = document, s = d.createElement('script');
        s.src = 'https://myfreakinname.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    }
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<!-- eo Disqus comments -->

Key lines:

this.page.url = "<$BlogItemPermalinkURL$>";  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = "<$BlogItemNumber$>"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable

I'm pretty sure those are the Blogger variables you want to use for those two properties.

And then le piece de resistance. Or whatever.

    if (
        "/" !== window.location.pathname                                // on the home page
        && "" !== window.location.pathname                              // on the home page with IE < 11, _mayhbe_
        && !window.location.pathname.match(/^\/*[0-9]+\/[0-9]+\/*$/)    // archive pages
        && window.location.pathname.indexOf("search") == -1             // tag search pages
    ) {   

By adding that check in the shudder area Disqus says not to edit, you make it so that Disqus isn't loaded on your home page (or on archive review pages like this one), which is good, because who wants Disqus on every freaking post on your home page? That'd be lots of wasted space.

Taking the Disqus UI off of posts on the home page of the blog is also good because the UI will only pop up under the first post on the page. That's because Disqus doesn't honor multiple instances of its UI on the same URL. Which leads us into Good Thing #3: Those comments on the first page would forever be for the first post on the home page, which would change from day to day. So it's an important check.

Anyhow, with that info in hand, all you dinosaur Bloggers can add Disqus invasive nastiness to your posts too and enable comments in a manner that's much more mature than all the crap Google and Google+ has tried to pull (and then pull back!) over the years.