While incorporating comments into my main blog page, I found out that Disqus does not provide a native way to place multiple comments on a single page. The Disqus commenting system includes an embedded javascript at the end of an article. The javascript writes out the commenting interface using global variables and it can't be included twice. This poses a problem as my main blog page contains all of my blog posts, and I wanted the readers to be able to comment without having to go to each individual entry page. After research, I figured out way. I'll share my approach and give the reader other resources so they can do the same.

Background

While researching, I found a promising lead... Most of the folks that have skinned this cat referred to an article written by mystrdat that is now long since dead. I dug it up using the wayback machine at https://web.archive.org/web/20170606070513/http://mystrd.at/articles/multiple-disqus-threads-on-one-page/. It is an excellent article, and if you're trying to do the same thing, it is worth a read. There were other helpful resources that I found. Shawn Zhouprovides a list of articles that solved this issue. Shawn uses iframes to encapsulate the Disqus comments. Tsachi Shlidor shared his approach using inline comments. His demonstration and code is on github at http://tsi.github.io/inlineDisqussions/. Since I already built my own commenting system using the open sourced Kendo Core UIwindow widgets, I chose a different approach. I am encapsulating Disqus logic into various Kendo windows. You can use the same approach that I used with a different windowing library, such as jQuery UI. Using multiple Disqus comments using a Kendo window widget

  1. First, I took the Disqus universal code script and saved it as a new ColdFusion template. Note that the this.page.url and this.page.identifier are dynamic variables. These will be passed to the window via the URL.
<!--- Note: the disqus_shortname, URL and identifier are passed to this page via the URL. --->
<div id="disqus_thread"></div>
<script type="text/javascript">
	/**
	*  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/#chr(35)#configuration-variables*/
	
	var disqus_config = function () {
	var disqus_shortname = '<cfoutput>#URL.alias#</cfoutput>';
	this.page.url = '<cfoutput>#URL.url#</cfoutput>';  // Replace PAGE_URL with your page's canonical URL variable
	this.page.identifier = '<cfoutput>#URL.Id#</cfoutput>'; // 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 = 'https://gregorys-blog.disqus.com/embed.js';
		s.setAttribute('data-timestamp', +new Date());
		(d.head || d.body).appendChild(s);
	})();
</script>
  1. Second, I created the scripts to create a new Kendo window. The only thing of interest in the code below is that I am passing the URL and Identifier variables that the universal code script needs (this.page.url and this.page.identifier in the code above):
// Disqus comment window ---------------------------------------------------------------------------------------------------------------------------------
function createDisqusWindow(Id, alias, url) {

	// Remove the window if it already exists
	if ($("#disqusWindow").length > 0) {
		$("#disqusWindow").parent().remove();
	}

	// Typically we would use a div outside of the script to attach the window to, however, since this is inside of a function call, we are going to dynamically create a div via the append js method. If we were to use a div outside of this script, lets say underneath the 'mainBlog' container, it would cause weird problems, such as the page disappearing behind the window.
	$(document.body).append('<div id="disqusWindow"></div>');
	$('#disqusWindow').kendoWindow({
		title: "Comments",
		actions: ["Minimize", "Refresh", "Close"],
		modal: false,
		resizable: true,
		draggable: true,
		// For desktop, we are subtracting 5% off of the content width setting found near the top of this template.
		width: (getContentWidthPercentAsInt()-5 + '%'),
		height: "60%",
		iframe: false, // Don't use iframes unless it is content derived outside of your own site. 
		content: "/blog/disqus.cfm?id=" + Id + '&alias=' + alias + '&url=' + url,// Make sure to create an absolute path here. I had problems with a cached index.cfm page being inserted into the Kendo window probably due to the blogCfc caching logic. 

		close: function() {
			$('#disqusWindow').kendoWindow('destroy');
		}

	}).data('kendoWindow').center();
}//..function createDisqusWindow(Id, alias, url) {

// The mobile app has a dedicated button to close the window as the x at the top of the window is small and hard to see 
function closeDisqusWindow(){
	$("#disqusWindow").kendoWindow();
	var disqusWindow = $("#disqusWindow").data("kendoWindow");
	setTimeout(function() {
	  disqusWindow.destroy();
	}, 500);
}
  1. Then, on the web page itself, I am showing the following button that calls the createDisqusWindow function above. I am adding this button for every single blog entry on the page. In the button, I am adding the entry ID as the first argument (the this.page.identifier), the 2nd argument, the entries 'alias' (disqus_shortname), and the entry URL is passed to the this.page.url.
<button id="disqusCommentButton" class="k-button" style="width:125px; font-size:0.70em;" onClick="createDisqusWindow('6C04DC8C-FF58-C02F-8C38E2BEEBCA282B', 'Incorporate-Disqus-into-Galaxy-Blog--Part-3', 'https://gregoryalexander.com/blog/index.cfm/2019/10/6/Incorporate-Disqus-into-Galaxy-Blog--Part-3')">
	<i class="fas fa-comments" style="alignment-baseline:middle;"></i>  Comment
</button>
  1. To display the comment count, I am placing the disqus-comment-count with the URL of the entry. Note: if you want, you can replace the span tags with an anchor tag ('a href') and include an onClick event to open up the comments window.
<span class="disqus-comment-count" data-disqus-url="https://gregoryalexander.com/blog/index.cfm/2019/10/6/Incorporate-Disqus-into-Galaxy-Blog--Part-3"></span>
  1. Finally, at the very bottom of the index.cfm page, I am adding the disqus comment count script:
<script id="dsq-count-scr" type="deferjs" src="//gregorys-blog.disqus.com/count.js" async=""></script >

For a demonstration, go to https://gregoryalexander.com/blog/index.cfm, click on a comment link, and make a comment or at least say hi! Happy coding! Gregory