How To Manually Install Disqus Comment System On Blogspot Blog

Tech & Gadget Blog Awards 2017

Previously,we disscussed about adding the Disqus comment system to a blogger blog the automated way.Now i will take you through the process of installing the same  Disqus on a blogger blog manually.

If the automated instalation is not working for you for technical reasons,then installing the gadget on your blog manually is the best and surest option.To do this,you have to edit you blog HTML code. Always back up your blogger template before attempting to edit your template HTML

Here is how it is done

==> Navigate to your blogger layout section, click add a gadget on the side bar.

==> In the add a gadget section, click to add HTML/JAVASCRIPT.

==> Enter as the gadget content and save your gadget.

disqus

To Add the Disqus code to your template

==> To add the disqus code to your blogger template, navigate to your template editor, click on edit HTML.

==> Click Expand Widget Templates box.

==> From your template editor search for Disqus using the control F  function.A search for  Disqus should give you something similar to <b:widget id=’HTML1′ locked=’false’ title=’Disqus’ type=’HTML’>. .

==> To ensure the disqus load on mobile,add  mobile=’yes’  to the code above,so the final code looks like this <b:widget id=’HTML1′ locked=’false’ mobile=’yes’ title=’Disqus’ type=’HTML’>

==> Below the above code locate and delete the following line of code

 

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

 

==> Just before the closing tag ,add the following code. Do remember to change the word EXAMPLE   as highlighted in the code below to your disqus short name.

<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;http://&#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>      

Click to preview your template,assuming there are no errors,Save your template ,view your blog to see the changes made.

Do you have any question,problem or observation?Lets us know using the comment session below.

Enter your email address:

Delivered by FeedBurner

Spread the love

4 Replies to “How To Manually Install Disqus Comment System On Blogspot Blog”

  1. Tasha W

    Hi there, thanks for the informative post. I am having issues with the Disqus comment count showing up. All I see is my Post a comment like, but there are comments there. I would like to display the number beside the date in my blog title, for some reason I see them when I’m in preview mode in blogger but not on the published page itself. Would be greatly appreciative if you could help me find out why this is happening! I’ve been searching everywhere and nothing I have tried is working 🙁

Leave a Reply

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