Within this tutorial, you will learn how to integrate Disqus within a Umbraco website. Allowing site visitors to leave comments on your website is a pretty common requirement. On first consideration, you may consider building a custom commenting system yourself. Create a form that accepts comments and then create a component that displays comments. When you start to drill into detail, there is a lot of hidden complexity. You may want an add a captcha to the form to prevent spam, you might want the person to get an email notification when someone replies to a comment, you may want a commenting approval system before comments can go live, you may even want people to add a like this page button or link to their social media account. Instead of reinventing the wheel, this is where Disqus comes in.
Most people reading this will have probably unintentionally come across Disqus while surfing the web. A Disqus commenting widget looks like this:
There are lots of plus points of using Disqus. It is FREE, it looks good, it is feature-rich, it is GDPR compliant, and it is quick and easy to implement Disqus within your website. The two downsides of Disqus are branding and ownership. If you run a large enterprise-level organization, having a Disqus branded commenting system, may look a little unprofessional! Also, when you use Disqus comments are stored within Disqus. Comments will not be stored within your own database. This is good in terms of GDPR, however, the client will not own the data. For some clients, this may be a show stopper. If you decide Disqus is the correct solution for you, read on to learn how to install it 💁👌🎍😍
How To Install Disqus
Installing Disqus is pretty simple. First, you need to head over to Disqus and create an account. Next, you need to head on over to the universal code page. Within the Disqus admin area, you should see a link called 'Place the following code where you'd like Disqus to load'. Copy the script and copy it into the Razor view where you want your commenting system to display. If you look at this snippet that you just copied, you should see a commented out area that looks like this:
I suggest you uncomment this value and use the Umbraco page ID as the unique identifier. Below shows two ways to create a unique Discuss identifier using the Umbraco Helper API:
Assuming you use this code as-is, the Discus script should not look like this:
With this script added, when you load the page containing the script in a browser the Disqus widget should load 💥. One reason why the widget might fail to use is the domain you call the widget from. If you are testing the widget locally, you will need to enable a local domain before the Disqus widget will load. This can be done within the Discus portal. From my testing localhost couldn't be used directly. Instead, I had to use a different hostname to test successfully. As no one adds comments in my test environments, I don't see it as a show stopper, however, it is definitely something to consider.
Disqus Takeaway
Adding the ability for users to leave comments on your website can be very quick and simple with Disqus. The whole process took me about 30 minutes. After installing Disqus, my comment conversion rate increased and I ended up with a higher number of people leaving comments. If you need to add the ability to allow comments on your website, I definitely recommend Disqus. Happy Coding 🤘
