Adopting DISQUS

Migrating to Jekyll was indeed a huge change. Now my website is just static HTML. There is no server side code going on, no database, nothing. At least, not yet. Except for one-time compilation process. Being so, I needed a solution to enable readers to comment on it. Looks like this is a well solved problem with disqus. I will not talk much about it, because there is a lot of content out there. I will just tell a little bit about my experience on adding it to this site.

Adding to your site

After creating an account there, you will see on your profile menu an option to “Install on Site”, after a few simple questions, you will be redirected to a page with some HTML/JavaScript code that you copy and paste into your site.

The first different thing that I did was NOT copy their code. I used a different version written by a friend of mine that I found to be more elegant solution. Here it is:

var disqus_shortname = 'rochalabs';
  (function() {
      var dsq = document.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] ||
       document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();

Using unique identifiers

The way disqus works by default is identify the page by its URL. So, if you, for any reason, change the URL of your blog post, it will loose your comments. You can go to the admin page and fix it manually, but I don’t think that this is a good solution.

Disqus provides a variable that you can use to identify your page instead of using the URL. The way I implemented it was setting a GUID property to my page on Jekyll and I set the value for this variable on the template.

Here is the page header, with the property disqus_id:

  ---
  layout:     post
  title:      "Adopting DISQUS"
  date:       2016-05-26 12:59:00 -0500
  categories: [jekyll, disqus]
  disqus_id:  eb1ed8dc-9f85-4355-a516-0a35944a2b9a
  ---

Here is the modified version of the provided script where I set the value for the unique identifier:

  var disqus_shortname = 'rochalabs';
  var disqus_config = function () {
      this.page.identifier = '';
  };
  (function() {
      var dsq = document.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] ||
       document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();

I hope this can be useful for you somehow, and you can check the source code here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s