Adding a comments section to your Ubraco website by using Disqus

...

I have just added the ability for readers of these posts to add comments. Take a peek at the bottom of this post and you'll see what I'm talking about.  You've probably seen similar on lots of other websites. Thats because I chose to use Disqus. It's free, it gives me a very quick and easy commenting solution without me having to write much code at all, and without having to worry about storing data, which means I bypass any GDPR concerns.

The first thing you have to do is go and create an account on the Disqus website.

 

Having created your account and verified your email you'll be able to login and start the process of installing disqus on your site. They have specific instructions for a host of CMS platforms, but not Umbraco. Instead we will follow the link that says Install manually with Universal code.

This will display some code it tells you to insert at the point you want to display your comments.

 

So Paste that code into the location on your umbraco page where you wanted comments. Now replace the EXAMPLE with the name of your site when you registered it for comments.

Then we're going to uncomment the code at the top and create the Url and page identifiers.

This page we are on now, is based upon the Article template (article.cshtml in visual studio) and article datatype I created in Umbraco using the model builder.

@inherits Umbraco.Web.Mvc.UmbracoViewPage<Umbraco.Web.PublishedModels.Article>
 
@using LittlewolfSolutions.UmbracoCMS.Core.Extensions
 
@{
    Layout = "master.cshtml";
 
    var CommentId = Model.Id;
    var uriBuilder = new System.UriBuilder(
              HttpContext.Current.Request.Url.Scheme,
              HttpContext.Current.Request.Url.Host,
              HttpContext.Current.Request.Url.Port);
    var CommentUrl = uriBuilder.ToString() + "blog/"+ Model.UrlSegment;
 
}

The first thing to do then is add a bit of code at the top to create the values we need.

Then at the point at the bottom of the template I want to show the comments goes the following

<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 = '@CommentUrl';  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '@CommentId'// 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://littlewolfsolutions.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>

 

And thats it. Now I have comment functionality on all my articles. Feel free to leave one ;-)