Disqus - Post Demo

Disqus is undoubtedly one of the most popular commenting systems for blogs which offers the best add-on tools to increase website traffic. It helps publishers to discuss online with comments and earn revenue with native advertising. This online comment hosting platform offers numerous features such as social networking, social integration, user profiles, spam filter and moderation tools, analytics, email notifications and mobile commenting. It is easy to install, customize and use. Disqus was founded in 2007 by Jason Yan and Daniel Ha.

Install Disqus on Blogger

1. Sign up to DISQUS. It will ask you to provide a username, email address and password. It will then ask you your site name, your shortname (unique ID to identify your blog) and to choose a category that your blog fits into.
2. On the settings page in the Admin section it will ask you to choose your platform. You can choose WordPress, Squarespace, Tumblr and more. For this tutorial, we’ll choose Blogger. 
3. Click the “Add [name] to my site” which will open a new window with the add a gadget option. Select the blog you want to add it on and click Add Widget. You’ll be redirected to Bloggers Layout page where you’ll see the new gadget. I tend to move it under the blog gadget to keep things organised but that’s not necessary.
4. On DISQUS, choose your site and go to Settings. Here you can change the colour scheme, typeface, moderation rules, avatars and other settings for your comments.
5. If you have existing comments via Blogger, you may want to transfer them into DISQUS. On DISQUS, go to Discussion > Import. You can select the platform and import your comments. It can take up to 24 hours to import depending on how many comments you had.
6. If you’re switching blogging platform (from Blogger to WordPress for example) or have changed your domain you can migrate your comments. On DISQUS, go to Discussion > Tools > Start Domain Migration Wizard and follow the instructions.
7. If you’re using an old Blogger template, you’ll need to update a line of code. You can see those instructions here.
8. If you’re using Bloggers default mobile template, you’ll have to enable DISQUS for that separately. You can check this in the Template section under Mobile. To enable DISQUS for mobile templates go to Template > Edit HTML and search for disqus, you’ll find something similar to the following,
   

   id='HTML' locked='false' title='Disqus for' type='HTML'

   After locked='false' add mobile='yes' and save. If you aren’t using a mobile template and are showing the desktop version instead, then DISQUS will be automatically enabled.

Before you customize your theme, it is highly recommended to backup your blog to prevent unnecessary hazards if anything goes wrong.

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

Let's proceed.

1. Go to Blogger dashboard.
2. Before closing body tag i.e. </body>, paste the following.

<script type='text/javascript'>
  var disqus_config = function(){
    this.page.url = "<data:blog.canonicalUrl/>";
    if(!this.page.url.length){
      this.page.url = "<data:blog.url/>";
    }
  };
  // <![CDATA[
  (function(){
    var d = document, s = d.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://bloganalyzer.disqus.com/embed.js';
    s.setAttribute('data-timestamp',+new Date());
    (d.head || d.body).appendChild(s);
  })();
  // ]]>
</script>
<script async='async' id='dsq-count-scr' src='https://bloganalyzer.disqus.com/count.js'></script>

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.allowComments'>
  <div class='comments-cont' id='comments'>
    <a name='comments'/>
    <h3><i class='fa fa-comment-o'/> Share Your Thoughts</h3>
    <p><i class='fa fa-exclamation-circle'/> <data:blogCommentMessage/></p>

    <ul class='clearfix' id='comment-tabs'>
      <li class='comment-tab-active'><h5>Blogger <span><data:post.numComments/></span></h5></li>
      <li><h5>Disqus <span class='disqus-comment-count' expr:data-disqus-url='data:blog.canonicalUrl + "#disqus_thread"'/></h5></li>
    </ul>

    <div class='comments'>
      <div class='comment-tab-item' id='comment-tab-item-blogger'>
        <b:if cond='data:post.commentSource == 1'>
          <b:include data='post' name='iframe_comments'/>
          <b:elseif cond='data:post.showThreadedComments'/>
          <b:include data='post' name='threaded_comments'/>
          <b:else/>
          <b:include data='post' name='comments'/>
        </b:if>
      </div>

      <div class='comment-tab-item' id='comment-tab-item-disqus'>
        <div id='disqus_thread'/>
      </div>
    </div>

    <div id='backlinks-container'>
      <div expr:id='data:widget.instanceId + "_backlinks-container"'>
        <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
      </div>
    </div>

  </div> <!-- comments-cont -->
</b:if>
</b:includable>

3. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Layout' form the drop-down menu list.
   
4. Click 'Add a Gadget' link as shown in the fig below. A new window will appear that contains list of all available gadgets.
   
5. Scroll down and click on 'Popular Posts' gadget or the '+' icon close to 'Popular Posts' gadget.

Configure Popular posts widget
6. Click 'Save'.
7. Go to 'Template' and click 'Edit HTML'.
   
8. Make sure whether jQuery library is already included in your blog. If not, search for (Ctrl+F) <head> and write down the following line just below <head>.

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

9. Search for (Ctrl+F) </head> and paste the following code before </head>.

<script type="text/javascript">
----------------------------------
</script>

10. Search for (Ctrl+F) </b:skin> and paste the following code before </b:skin>.

I tried my best to keep things as simple as possible. Any type of question related to this will be welcomed.
Happy Blogging.

Necessery Image links.

or