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.