disqus

Integrating disqus into Confluence

Integrating disqus into Confluence

As covered in a previous writeup: Installing, configuring, and integrating isso (commenting web app) into Confluence, I mentioned that I would cover integrating disqus into confluence.

💡
Now before you go ahead and integrate disqus with confluence, be aware that there are other commenting options (some of which are open-source) that will likely fit your needs better - especially if you care about privacy.

See https://me.jaytaala.com/installing-configuring-and-integrating-isso-commenting-web-app-into-confluence/ for another option.

In any case, your free to choose your poison (as it were)...

Integrating into Confluence

The below was modified to suit my needs from David Simpson's nice writeup on integrateing disqus into confluence (from back in 2013).

Once you've setup your disqus account, you can integrate it into confluence by pasting some HTML/javascript into the Custom HTML section found in General configuration. 

First let's get there.  Click on the cog icon in the top right of confluence and click General configuration:

On the resulting page click Custom HTML on the left hand menu.  This will bring you to a page with three boxes (which we can add HTML/Javascript into).  We're going to be interested in the At end of BODY box (the last one). 

Click the Edit button and paste (and edit as required) the following:

<script type="text/javascript">
 
AJS.toInit(function(){
 
        // place after normal confluence comments section
        AJS.$('#comments-section').after('<div id="disqus_thread"></div>');
         
        var disqus_config = function () {
            this.page.url = location.href;
            this.page.identifier = 'content_id_' + AJS.params.pageId;
        };
 
        (function() {
            var d = document, s = d.createElement('script');
            s.type = 'text/javascript'; s.async = true;
            s.src = 'https://example.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>
⚠️
You'll need to replace https://example.disqus.com in the code above with your own disqus address.

References

Adding Disqus commenting to Atlassian Confluence is easy
Some time back, I had a thought about integrating Disqus with Confluence. It’s a small matter really, just involving a little JavaScript, so rather than bothering to create a full blown plugin, I wrote a little user macro. Add the {disqus} user macro to a page and it will replace the Confluence comments section (if enabled) with the standard Disqus functionality. This example uses {disqus:shortname=your-disqus-identifier}: ## Macro title: Disqus ## Macro has a body: N ## Body processing: Selected body processing option ## Output: Selected output option ## ## Developed by: David Simpson ## Date created: 13/06/2011 ## Installed by: David Simpson ## This is an example macro ## @param shortname:title=Short Name|type=string|required=true|desc=The Disqus shortname associated to your account <script type=“text/javascript”> AJS.toInit(function(){ if (AJS.$(‘#comments-section’)){ // replace the comments section AJS.$(‘#comments-section’).after(‘<div id=“disqus_thread”></div>‘).remove(); var disqus_shortname = ‘$paramshortname’; //‘local-confluence’; var disqus_identifier = ‘content_id_$content.getIdAsString()‘; (function() { var dsq = document.createElement(‘script’); dsq.type = ‘text/javascript’; dsq.async = true; dsq.src = location.protocol +‘//’ + disqus_shortname + ‘.disqus.com/embed.js’; (document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(dsq); })(); } }); </script> This results in: Looking good for a single page, but what if you want to do this site-wide? Again, that’s pretty easy. In Confluence Admin | Look and Feel | Custom HTML | At the end of the BODY, paste: <script type=“text/javascript”> AJS.toInit(function(){ if (AJS.$(‘#comments-section’)){ // replace the comments section AJS.$(‘#comments-section’).after(‘<div id=“disqus_thread”></div>’).remove(); var disqus_shortname = ‘local-confluence’; // ##################### change this to your own var disqus_identifier = ‘content_id_’ + AJS.params.pageId; //var disqus_url = location.href (function() { var dsq = document.createElement(‘script’); dsq.type = ‘text/javascript’; dsq.async = true; dsq.src = location.protocol +‘//’ + disqus_shortname + ‘.disqus.com/embed.js’; (document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(dsq); })(); } }); </script> Again, this code only replaces the comments section if the comments have been enabled for the space -- removing commenting functionality in the standard way removes the Disqus comments. It works nicely on HTTP and HTTPS as we use location.protocol to match the protocols between Confluence and Disqus.
David Simpson