Adding Comments to Ghost with Disqus

For blog articles I visit, the comments section can be more helpful than the actual article's content. Often times the comment section contains the solution I am looking for. Because of these and other reasons interesting to me I have set up comments on this blog.

The platform I have chosen is Disqus. I chose Disqus for a few reasons

• Pricetag (free)
• Simplicity
• Opt-out of ad experience
• The first I found

Set up

After creating an account on Disqus, you are guided through the "getting started" wizard. At some point you will be asked to select a platform. In this case you will want to choose "Universal Code".

At the time of writing this article, you are presented with some code to paste into your website

<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = '//pdemro.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>

This is a great start but not optimal for Ghost. I read an article somewhere on embedding this code directly into Ghost via the footer (ghost admin -> code injection -> Blog Footer Paste). This method works, but the comments section appears underneath the "you might also be interested in" portion of the default Casper UI and is not ideal.

Solution

1. Host a custom javascript file on the Ghost server
2. Reference the hosted JS from the footer section in the Ghost admin UI
3. Set up a symbolic link to the file on the server so it doesn't get blown away by Ghost during upgrade

You can skip some of these steps if you want to paste the code below directly into the footer. I prefer to use a text editor with syntax highlighting when making changes

Host the file

First, find your Ghost directory. For me this is /var/lib/ghost. I briefly browsed the documentation for Ghost to see if I could easily set up a pseudo CDN directory to host custom JavaScript files, but did not find any answers. The workaround is to store my Javascript file directly in the theme folder for the default Casper theme. For me this folder is /var/lib/ghost/themes/casper/assets/js. After adding my file to that folder, I was able to navigate to it with the browser via GHOST_URL/assets/js/comments.js.

//Load Disqus stuff
jQuery("document").ready(function() {

	if(window.location.href != "https://pdemro.com/") {

		jQuery("article").append("<div id='disqus_thread'></div>");	

		var d = document, s = d.createElement('script');
		s.src = '//pdemro.disqus.com/embed.js';
		s.setAttribute('data-timestamp', +new Date());
		(d.head || d.body).appendChild(s);
	}
});       

This code is very similar to the code provided by Disqus. The difference is I am placing the code in a more aesthetically pleasing part of the page using jQuery.

Reference the file

Now that the file is uploaded to the web server, reference it in the footer section of the Ghost admin UI. Ghost Admin -> Code Injection -> Blog Footer

<script type="text/javascript">jQuery.getScript("/assets/js/comments.js");</script>

Sym Link the file

I'm not exactly sure how themes work with Ghost. My guess is that anything stored in a theme's assets directory in the way I describe above is very likely not supported. Furthermore, the file will probably be deleted when updating the theme as a part of the Ghost platform upgrade.

My solution here is to host the actual Javascript file somewhere else and use a symbolic link to expose it to Ghost. It's not perfect and will still break if the symlink gets deleted, but at least the actual Javascript file is preserved.

ln -s /path/to/new/directory/comments.js /var/lib/ghost/themes/casper/assets/js/comments.js

Additional Disqus Configuration

Activate Anonymous Posts

You can turn on anonymous posting in the Disqus administrative dashboard under "allow guests to comment"

Profile -> Manage Site -> Edit Settings -> Community -> Allow Guests

Disable ads

In the same settings section, select the Advanced properties. Un-checking Enable anonymous cookie targeting and Automatically append merchant codes should disable most of the advertising in the Disqus widget

Add a trusted domain

Also in the advanced section, make sure to add your URL to the trusted domains. This should stop people from adding comments to your Disqus profile from other places.

A word on Privacy

A large portion of cloud offerings use advertising as a revenue model, and Disqus is no exception. Fortunately, Disqus offers a way to opt out of some of its advertising offerings. While this is an option it is likely that they are still gathering some user data which some might consider offensive. If there is a more privacy conscious option which allows me to host I may migrate at some point. Use at your own risk!

Hope this is helpful and feel free to comment below.

Title Image | Discus by
Magnus Akselvoll / CC BY 2.0