How to Install Disqus Comment Box on Blogger

Table of Contents

Adding Disqus comment box to your blog on blogger is really easy and can be helpful for your visitors to comment on your site.

Install Disqus on Blogger

We all know that blogger platform does provide a built-in comment box for bloggers, to let the visitors comment on their posts. But I think you have probably noticed that it doesn’t allow to leave a comment using your social media account, nor it looks beautiful or professional.

But, luckily Disqus comment box provides more features than blogger for free to customize your comment box and you can also let your visitors comment on your blog using their social networking accounts.

So here in this tutorial, I will show you how to integrate Disqus comment box with your blog on blogger.

Why use Disqus comment box on Blogger?

The reasons for using Disqus is quite many. Unlike other comments system, Disqus not only allows to comment anonymously or using social media accounts and data will be saved in Disqus portfolio but not in blogger. Here are some of its features:
  • It allows commenting on Disqus with Social Networking Sites
  • Easily subscribe to any blog posts or topics
  • It looks very professional and attractive
  • It allows Rich media commenting, such as adding images and videos in the comment
  • It automatically adapts your site’s design and you can also set it to your own desire.
  • Disqus supports all devices from desktop to mobile, including Google AMP pages and supports 70 languages and counting.
  • It automatically detects and removes spam comments before it lands on your site.
The best part about Disqus is its free and can be used on any blogging platform. The integration process is very faster and can be applied to your blog in the next 5 minutes.

Before I begin this tutorial, I want to let you know that there 2 ways you can install Disqus on your blog.

  1. Using the Disqus widget.
  2. By adding Disqus codes manually to your template.

So, I will show you both the methods one by one to help you select the easiest method for you.

Adding Disqus Comment box to Blogger

1. Go to the official Disqus website and click on ‘GET STARTED’ to register a new account.

Add Disqus to Blogger

2. Now you will get 4 options to open a new account. Either you can use social networking accounts or you can use your Gmail address. It will better if you use your Gmail account instead. Enter your NAME, EMAIL ADDRESS, PASSWORD and click ‘SIGN UP’.

Adding Disqus to Blogspot

3. After signed up, you will be asked to choose whether you comment on other websites or you want to add it to your blog. So, click on ‘I WANT TO INSTALL DISQUS ON MY SITE’.

Adding Disqus to Blogger platform

4. Enter your website name and select your blog category (your niche) and hit ‘CREATE SITE’.

Adding Disqus comment to Blogger

5. Now you will be redirected to the pricing page, select the basic free plan and hit ‘SUBSCRIBE NOW’.

Adding Disqus comments to Blogspot

6. Now you need to select your blogging platform, Choose ‘BLOGGER’ as your platform.

Inserting Disqus to Blogger

7. You are being redirected to the installing process. Hit on ‘CONFIGURE’ button.

Adding Disqus system to Blogger

8. Now select ‘APPEARANCE’, enter your blog URL, write DESCRIPTION and click ‘COMPLETE SETUP’.

Adding Disqus comment Blogger

Congratulations, you finished installing Disqus! Now click ‘Dismiss Setup’ and you will be redirected to the Admin area.

Disqus installed on blogger platform

Installing Disqus Through HTML Codes

If the above first method didn’t work out for you, then you can try out the second method by adding HTML codes manually to your template. The HTML process is classified into 2 categories. First, you need to add a gadget manually and then you need to override your theme codes.

For your comfort, I’ve arranged the method in 2 simple ways.

Adding Disqus Gadget to Blogger
First of all, you need to create a Disqus widget using the HTML gadget. Here’s the guide:

1. Go to your Blogger Layout page and hit Add a gadget in the sidebar.

Adding Disqus Gadget Blogger

2. In the Add, a Gadget popup, scroll down and click the HTML/Javascript gadget.

Adding Disqus Gadget to Blogspot

3. Enter Disqus as the title name and the below codes in the content and click save the widget.

<<!-- Disqus comments gadget -->>
Add Disqus Gadget to Blogger

The next step will be to add the Disqus code to your template.

Adding Disqus Code to Your Blogger Template
1. On your Blogger dashboard, go to Theme section, backup your blog template and hit Edit HTML.

Adding Disqus to Blog Template

2. Click on the text area, and enter (ctrl+F) on open the search box and then search for the below term.

<b:widget id='HTML2' locked='false' title='Disqus' type='HTML'>
3. Change that line to add mobile=’yes’ to make Disqus mobile-friendly. It will look like this when you’re done:
<b:widget id='HTML2' locked='false' mobile='yes' title='Disqus' type='HTML'>
4. Below that find and DELETE the following code right before the closing tag. The section you’re deleting should look like this:

Adding Disqus to Blogger theme
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:include name='quickedit'/>
5. Once it deleted the next part will be to insert a new code in replacement of the previous one. Just before the closing of </b:widget-settings> tag, add the following codes:

inserting Disqus to Blogger Template
<b:includable id='main'>
<script type='text/javascript'>
var disqus_shortname = &#39;EXAMPLE&#39;;
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;

if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;

var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#comments {display:none;}

<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);

<style type='text/css'>
.post-comment-link { visibility: hidden; }

<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);

Just make sure to replace “EXAMPLE” with your forum short name and be sure to leave ‘&#39;’ in front of your short name and ‘&#39;;’ after it.

After applying all the codes, click on save the template.

Importing old blogger comments to Disqus

1. Login to Disqus and go to Admin section.

2. Click on Community and hit Import.

Importing  comments to Disqus

3. Now select Blogger and click on one-time import and then Sync new comments.

Importing blog comment to Disqus

4. Now you will be asked to sign in with your blogger associated Gmail address, and then a new window will appear to let you select the blog you’d like to keep synchronized with Disqus. Click on your blog.

Import blogger comments to Disqus

Congratulations! You have successfully imported your blogger comment to Disqus.

Comments imported to disqus


After adding Disqus to your blog, you can easily customize comments theme color, moderation, etc. from Admin area. If the first process doesn’t work on your blog then you can try the second rule.

Getting errors while adding Disqus Comment system to your blog? Let me know in the comment box below.

Leave a Comment

Your email address will not be published. Required fields are marked *