Disqus + Magnolia CMS

How to use Magnolia and Disqus together

What Disqus offers

Disqus is a commenting platform that allows websites to incorporate a dynamic commenting system into their pages, fostering engagement and community interaction. With Disqus, users can leave comments on articles, blog posts, and other web content seamlessly. The platform offers features such as threaded discussions, upvoting/downvoting, user profiles, notifications, and moderation tools.

One of the key benefits of Disqus is its ease of integration, making it simple for website owners to add commenting functionality to their sites without extensive technical knowledge. Additionally, Disqus provides a centralized dashboard for managing comments across multiple sites, streamlining the moderation process.

Furthermore, Disqus offers various customization options, allowing website owners to tailor the appearance and functionality of the comment section to align with their branding and preferences. This flexibility extends to moderation settings, enabling administrators to control spam, filter inappropriate content, and manage user accounts effectively.

From a user perspective, Disqus provides a familiar and intuitive commenting experience, with features like threaded conversations enabling meaningful discussions. Users can engage with content, express their opinions, and interact with fellow readers, contributing to a vibrant and dynamic online community.

Overall, Disqus enhances the user experience on websites by facilitating dialogue, fostering community interaction, and providing robust moderation tools for administrators. It serves as a valuable tool for content creators and website owners looking to cultivate engaging discussions and build a loyal audience.

Disqus Component

Add the disqus component

To integrate Disqus into Magnolia, the easiest way is to use a component like the one below.

Disqus uses the URL to identify the comment thread. Our component below adds a dialog to define an optional canonical thread if the URL of the page isn't the same as the page URL. This comes in handy if you have paginated pages or articles on multiple pages.

Since this is totally optional, you could also get rid of it and make the component simpler. If you don't want to use a component, you could also add this to your template.

Component Yaml

dialog: <moduleName>:components/disqus
renderType: freemarker
title: "Disqus"
templateScript: /<componentPath>/templates/components/disqus.ftl

Freemarker Template

<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 () {
    [#assign baseURL = ctx.request.getRequestURL()?replace(ctx.request.getRequestURI(), "")]
    
    [#if content.canonical?has_content]
		this.page.url = '${baseURL}${cmsfn.link(content.canonical)}';
	    this.page.identifier = '${baseURL}${content.canonical}';
	[#else]
		this.page.url = '${baseURL}${cmsfn.link(cmsfn.page(content))}';
	    this.page.identifier = '${baseURL}${cmsfn.page(content).@uuid}';
	[/#if]
    
    };
    
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    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>

Dialog Config

label: "Disqus"
form:
  properties:
    canonical:
      label: "Canonical Link (Optional)"
      $type: pageLinkField