How To Add Disqus Comment System Manually In Blogger blog?

From last few month you might have face trouble in adding widget directly to the blogger layout within click with the help of add to blogger widget buttons. The same problem had  also facing in my own blogger Widget Generators If its a simplest HTML contain field than no need to worried you can copy entire code and paste it to Blogger Dashboard > Layout > Add to Widget > HTML / JavaScript navigation. But while adding Disqus comment system, its required little bit efforts.

How To Add Disqus Comment In blogger Manually ?


Install Disqus Manually To Blogger


Step 1: Go to Blogger Dashboard > Layout > Add to Widget > HTML / JavaScript Navigation.
Step 2: Add Title As “Disqus comments”.
Step 3: Paste following code in contain field.

 

<!– Disqus Widget –>

 

Step 4: Save widget.
Step 5: Now Navigate Template > Edit HTML > Proceed > Tick on Expand Widget Templates.
Step 6: Now Find “Disqus comments” (By Pressing Ctrl+F ). You  will find something code look like:

 

<b:widget id=’HTML18′ locked=’false’ title=’Disqus comments’ type=’HTML’>
<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>
</b:widget>

 

Step 7: Replace green highlighted text following code.

<b:includable id=’main’>
<script type=’text/javascript’>
var disqus_shortname = &#39;Your_Own_Short_Name&#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>

 

Replace “Your_Own_Short_Name” with your short name that you created for your Disqus comment system.Step 8: Save Template, That set.

Alternative Code

As a alternative of above code  listed in step 7, Go to Disqus website Log In > Admin > Settings > Install > Blogger Button you will find “Edit Template” field code generated through Disqus official website, Copy that code and use it in with  respect to alternative of Step 7

see below image for demonstration.


Disqus Tips Via Blogging


Feed Back

Its very difficult to maintain blog while exams are going on, now finally exams are over, Share your opinion, views , suggestions, comments with us with the help of below comment box , we love it a lot.

7 Comments

Leave a Reply to Umesh Tarsariya Cancel reply

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