Overview

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.

How does it work?

Disqus provides a snippet i.e., a block of javascript code which we will link to our html page for integrating a commenting system.

Table of Contents

• Create an account on disqus.
• Getting the snippet code
• Integrating the code with django

Creating an account on disqus:

Visit: https://disqus.com/profile/signup/intent/ and follow the following steps:

• Click on "I want to install Disqus on my site"
• 
• Fill your details and Click on "Create Site Button"
• 
• Now, they will ask you to subscribe for a plan, you can choose the free plan for now, BASIC one and click on subscribe now button.
• 
• Now, they will ask you what platform is your site on. At the bottom there is button "I dont see my platform listed,install manually with universal code", click on it
• 
• Now you will get your code, something like this.
• 
• Select and Copy the code.

Integrate the code snippet with django templates.

In django templates you can use it like this:

create a template named comments.html inside your templates directory and paste the code snippet you have copied:

<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://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>
                            

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>

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.

How to pass {{url}} in comments.html?

I will explain this with an example:

Suppose I have a model named Blog, something like this:

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.