Disqus, the best commenting system for your web apps.

Tuesday, 10 November 2015



I have been making web apps for a while now and one thing that gives me headaches is implementing comment systems. Luckily there are various third party commenting systems out there to choose from. One system caught my eye and I decided to give it a try. After a few trial and errors. I was able to implement it and I can vouch for it, it's awesome.

This comment system is none other than Disqus and in this post, I will guide you on how to implement this system into any web app/site imaginable.

How it works.

First of all, for disqus to work, your app/website needs to have a function to return a unique id for every page/post. This can be a function that returns the current page URL or ID.
For me, as I implemented disqus in my blogger(blogspot) blog, I used a function that returned the current page's ID.

Disqus will create and return a comments thread based on a unique identifier. Lets say for example, you have several posts or pages in your app/site, and every post/page needs to have it's own comments thread. Disqus will take the page's/post's unique id and create a comment thread based on that, then whenever the page/post is loaded that comments thread is returned. 

That's how I understood it's workings. 

Advantages of using disqus.

Here are a few advantages of using disqus.
  1. It's free. You will not spend a single dime to get this system.
  2. All Comments are backed up.
  3. It can work on any system.
  4. Helps you not to re-invent the wheel.
  5. It's adaptive. It nicely adapts to any themes and colors in the most insanely awesomest way. Simply amazing.
  6. Allows people to log into the system using their social media accounts.
I could go all day, but at the end of that day, disqus will remain to be awesome.

Let's get working.

1. First thing you will need to do is sign up for disqus. Sign up here.


As you can see, you can sign up using facebook, twitter or google plus. Once you sign up, you will be logged into the site. On the top right corner, click the gear icon and choose "Add Disqus To Site" from the drop-down.

Next you will be taken to the Disqus Engage page, just choose the "install on your site" button on the top right corner. This will take you to the site/app registration page.
Now Fill in the required sites name then choose a unique Disqus URl . From the drop down, choose you app/site niche and you are good to go.
Next you will be taken to the set up page. you will be presented with a list of supported platforms, among them Blogger, WordPress, Tumblr, Squarespace e.t.c. Since I'm assuming you are a techie, choose "universal code". The universal code is the one that can be implemented on all web apps.
Next you will see the page with the code we need to implement the disqus system. In the code you will notice that you are being asked to uncomment some part and add the required info. Bellow are the two codes. I went ahead and uncommented the required section so just add the required data.

1. Add this code at the bottom of the page i.e just on top of the closing body tag
. The code simply includes the required javascript file needed for disqus to work.

<script id="dsq-count-scr" src="//testblog99.disqus.com/count.js" async></script>

While using this in blogger I got an error with the "async" attribute since it has no value, but this error ocurred because blogger template is XML based, so if your template is HTML based, it should run fine. It also worked fine with blogger once I deleted that attribute.

2. The next code should be posted where you want the comments to appear. probably below the posts. In the code below you will notice two things you will need to change: "this.page.url = PAGE_URL;" and "this.page.identifier = PAGE_IDENTIFIER;".

<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 = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // 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 = '//testblog99.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" rel="nofollow">comments powered by Disqus.</a></noscript>

You will notice that "this.page.url = PAGE_URL;" has a comment saying that "Replace PAGE_URL with your page's canonical URL variable". Most systems have an inbuilt function to return the conanical url, but if not, just replace it's value with the normal post/page url, it should serve the same purpose.

Lastly replace the value of "this.page.identifier = PAGE_IDENTIFIER;" with the function that returns your post/page id, or post/page url and you are good to go. Actually that's all.

The image below shows how the commenting system looks on this blog.

















I hope you liked this one as much as I did. If you have any question, please do ask and I'll be more than glad to answer the.
By: | On: Tuesday, 10 November 2015 | At: 15:42 |
IN:

Share/Bookmark
« Previous Next »

Search this blog

Subscribe to this blog

Subscribe by Email