Disqus Commenting System With Django

Do you want to improve your blog commenting system? Looking to form a community with the commenting system? It’s time for you to look at DISQUS commenting system. Today, I will share the guide to implementing DISQUS comments on your Django blog.

To integrate Disqus Comments System, Disqus provides a code snippet i.e., a block of javascript code that is added to Django templates.

Let's begin installing Disqus

Create an account on Disqus.com:

To create an account on Disqus visit their official website and follow the following steps:

Step 1: Click on "I want to install Disqus on my site"

Step 2: Fill in your details and click on the "Create Site Button"

Step 3: Now, they will ask you to subscribe to a plan, you can choose the free plan, for now, the BASIC one, and click on subscribe now button.

Step 4: Now, they will ask you what platform is your site on. At the bottom, there is a button "I don't see my platform listed, install manually with universal code", click on it

Now you will get your code, something like this.

<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 = 'https://raturitest.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>

Select and Copy the code you get on the disqus website not the above one. We will use the copied code in just a while.

Integrate Disqus code snippet in Django templates

To use this Disqus code snippet inside Django, let's do a little bit of modification.

First, create a template named comments.html inside your templates directory and paste the code snippet you have copied. Now, modify your snippet like this:

<div id="disqus_thread"></div>
<script>

// Modify Start

// change yourdomain.in to your domain
var disqus_config = function () {
this.page.url = "https://yourdomain.in/blog/{{url}}/";
 this.page.identifier = "{{url}}";
 };

// Modify End

(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://test-cznbonimn3.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>

 <script>

</script>

Replace the value of this.page.url where it says yourdomain.in with your actual domain.

Key points to notice here which we will replace later:

this.page.url: this should be the complete URL of your article.
this.page.identifier: this should be the unique identifier such as id or slug.
{{url}}: this is the slug we will pass to this template.

Load Disqus comments - Final Step

As a general idea, Disqus will associate a unique thread with every page. Let's say we have 5 blog posts, so in this case, Disqus will make a thread that contains information like all the comments, likes, and metadata for each of the 5 URLs of blog posts. You can learn more on how Disqus works if you are curious. But it's optional, a general idea is enough to integrate it.

Integrate it with an example, suppose I have a model named Blog

class Blog(models.Model):
 title = models.CharField(max_length=255, unique=True)
 slug = models.SlugField(max_length=255)
 body = models.TextField()
 posted = models.DateField(db_index=True, auto_now_add=True)
 description = models.CharField(max_length=255,null=True)

 def __str__(self):
 return self.title

 def get_absolute_url(self):
 return reverse('blog:detail',kwargs={'slug':self.slug})

Create a URL for your blog

# urls.py

from django.urls import path
from .views import *
app_name = "blog"

urlpatterns = [
 path('blog/<slug:slug>/',blogview,name="detail"),
]

Now, create a view for your URL

# views.py

from django.shortcuts import render
from .models import Blog

def blogview(request,**kwargs):
 slug = kwargs.get('slug')
 context = {'object':Blog.objects.get(slug=slug)}
 return render(request,'blog_detail.html',context)

Now, create a template blog_detail.html inside your templates directory.

To access data of the blog, for which slug was passed to the Django view, we can access its data like this inside our template:

<!-- blog_detail.html -->

<h1>{{ object.headline }}</h1>
<p>{{ object.content }}</p>
<p>Reporter: {{ object.reporter }}</p>
<p>Published: {{ object.pub_date|date }}</p>
<p>Date: {{ now|date }}</p>

<!-- Pass URL to comments.html, we have created earlier like this -->

{% include 'comments.html' with url=object.slug %}

Now, visit your blog post URL, which should be something like this https://yourdomain.in/blog/<slug>/

You can see your Disqus commenting system loaded to your site.

Don't forget to check more [django tutorials](https://raturi.in/blog/category/django-tutorials/).