Disqus Comments

Disqus Comments is a third-party commenting platform you can use to replace your default commenting system in a Website or a Blog Page.

Disqus has many integrations available which make installation easy. The most popular integrations also come with built-in importing and syncing tools so you can bring in your old comments as well. Before installing, make sure you have registered a Disqus shortname, and this will be used to reference all of your comments and settings.

  • WordPress
  • Blogger
  • Tumblr
  • Typepad
  • Movable Type
  • Drupal
  • More integrations

Steps to Create Disqus Comments

Create a Disqus account and add your website. Head over to Disqus.com and sign up with your email. When you register and log in, navigate to Add Disqus to Site. Choose a name for your site (it might be helpful if you pick the same name as your site), a subdomain (this will also be your “shortname”, explained in more detail below), and a category:

Follow these steps to create your Disqus shortname:

  1. Scroll down and click Get Started.
  2. Select I want to install Disqus on my site.
  3. Enter your Website Name, which will serve as your Disqus shortname, and select a Category from the drop-down menu.
  1. Click Create Site.
  2. Choose your platform i.e. WordPress, Blogger etc.

Easy Installation

Some platforms also provide simple steps for installation that do not require any javascript coding. These integrations can be found on Disqus installation page.

Installation Options

Install Disqus Comments Widget in Blogger

If You want to Install Disqus widget in your website/blog mannulaly then you have the option of manually installing the gadget on your Blogger site. This will require editing your Blogger template HTML, so it won’t work with Dynamic Views templates. Follow these steps:

1. Go to your Blogger “Layout” section and click Add a gadget in the sidebar
2. In the Add a Gadget popup, scroll down to find the HTML/Javascript gadget and click the + button
3. Enter Disqus as the title and the following code for the content:
<!– Disqus comments gadget –>
4. Click save and the window will close
5. Click Save arrangement in the Layout viewer

Add the Disqus code to your Blogger Template

1. Go to your blog’s Template section, click “Edit HTML”, and then click the “Edit template” button

2. Click inside the text area and search for the widget you just created in your HTML template by pressing Ctrl-F then typing Disqus. You should find the following line:

<b:widget id=’HTML1′ locked=’false’ title=’Disqus’ type=’HTML’>

3. Change that line to add mobile=’yes’ to load Disqus on your mobile template. It will look like this when you’re done:

<b:widget id=’HTML1′ locked=’false’ mobile=’yes’ title=’Disqus’ type=’HTML’>

4. Below that locate and DELETE the following code right before the closing tag. The section you’re deleting should look like this:

<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>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:includable>

5. Before the closing </b:widget> tag, add the following Disqus code (remember to replace “EXAMPLE” with your forum shortname and be sure to leave ‘&#39;’ in front of your shortname and ‘&#39;;’ after it.):

<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;;
</script>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=’text/css’>
#comments {display:none;}
</style>
<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;.disqus.com/blogger_item.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script>
</b:if>
<style type=’text/css’>
.post-comment-link { visibility: hidden; }
</style>
<script type=’text/javascript’>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script>
</b:includable>

6. Click Save template. Assuming there are no errors, Disqus should properly show up on your site now.
7. (Optional) Verify that the meta tags in your Blogger Template do not force Internet Explorer to load using IE7 standards.

Embed code

This is the JavaScript embed code which loads and displays Disqus on your site, typically on the individual article or post pages. The disqus_thread ID is where the postbox is loaded, so make sure to include it above the embed script as shown below.

Note: Don’t forget to change EXAMPLE to your forum’s shortname.

<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() {  // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
        var d = document, s = d.createElement('script');
        
        s.src = '//EXAMPLE.disqus.com/embed.js';  // IMPORTANT: Replace EXAMPLE with your forum shortname!
        
        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" rel="nofollow">comments powered by Disqus.</a></noscript>