Category: Disqus

Disqus Comment System Node.js Integration

Tags: Comments Disqus Disqus Shortname Integration Node.js

Disqus Comment System Node.js Integration

Disqus (pronounced "discuss") is a free comment service for websites. Disqus hosts the comments for participating websites on their servers. Disqus commenting can be enabled at the page level. It is done by embedding a JavaScript widget on a page which will expose the commenting UI as well as retrieve comments from the Disqus servers.

Why the Disqus Comment System was Chosen

Disqus provided a free and easy-to-use comment system implementation that met Xiao Blog's requirements:

  • Easy-to integrate into plain HTML, JavaScript web application templates.
  • Threaded comments and replies.
  • Notifications and reply by email.
  • Social integration: forum login and comment sharing via social networks (Twitter, Facebook, and Google+).
  • An easy to use Moderation (Admin) Panel for forum management
    • Comments: Approve, Delete, Edit, Mark as spam.
    • Discussions: Edit threads, import/export with systems like Wordpress, Blogger, and Tumblr.
    • Analytics: Graphics to track over time the number of comments, number of votes, and top comments
    • Settings: configure appearance (background color, typeface), sorting (best, newest, oldest), rules like enabling attachments or links in comments.
  • Spam filtering, blacklists and whitelists.

Spam control is one of the strengths of Disqus. It provides several ways to block unwanted comments and keep ones from trusted sources. It uses its own custom software to automatically reject spam comments. The anti-spam algorithm is helped when comments are manually marked as spam from the Moderation panel. Administrators can also select to "pre-moderate" comments by manually approving all comments before allowing them to be posted by Disqus.

How Xiao Blog Uses Disqus

The Xiao Blog engine embeds the Disqus widget code on every page except the contact one. This is easier that it sounds, since the widget can be embedded in view templates and subsequent pages created from the template can inherit the widget and its settings. For example, the post view template contains the widget code below the content markup. Every post page will automatically have a Discus thread without requiring manual editing.

How to Enable Disqus on Xiao Blog

Enabling Disqus comments on Xiao Blog is an easy process:

  1. Sign up for a Disqus account. Here you'll complete basic account reqistration for username, email, and password.
  2. Create your website profile. This is the second step in account registration. The key part of this step is the selection of a site "shortname" that is used to identify your website to Disqus.
  3. Edit the Xiao Blog post view template Disqus markup to replace the dummy shortname with your website's shortname. See the code excerpt below.
  // Code from app/views/post.html
  <div id="disqus_thread"></div>
  <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
  var disqus_shortname = 'DUMMY_DISQUS_SHORTNAME'; // Replace dummy name with your forum shortname

  /* * * DON'T EDIT BELOW THIS LINE * * */
  (function() {
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
   })();
  </script>
  <noscript>
    Please enable JavaScript to view the 
      <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
  </noscript>

Welcome

Welcome to the Xiao Blog engine website. Take a look around to find out how Xiao Blog can help you quickly get your blog up and running. Check out the code and use the Feature posts to walk through your own Node JS Express tutorial.

Connect with Us
Feature Posts
Xiao Blog Engine Markdown Editor

Category: Feature

Node.js MVC Example Implementation with Xiao Blog Engine

Category: Feature

The Markdown Editor: Markdown-to-HTML for Blog Posts

Category: Feature

Bootstrap Web App Design for Xiao Blog Engine

Category: Feature

Disqus Comment System Node.js Integration