How To Add Disqus Comment System Manually In Blogger blog?

Table of Contents

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.
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Heeren Tanna

Heeren Tanna

Heeren Tanna, a Digital Marketing Consultant, Trainer and Speaker on a mission to help 10,000 people in starting a business online and making a full time income form it.

Related Posts

7 thoughts on “How To Add Disqus Comment System Manually In Blogger blog?”

    1. Avatar

      bro try new code it will going to work now , there is some issue with the coding after migrating from blogger to wordpress, now on this post i had updated post, it will work perfectly. Be sure that you first create disqus account and than follow each instruction carefully.. all the best ^-^

  1. Avatar

    How do you manually install Livefyre comments on a customized blogger blog? I tried hiding my comments in settings as well as going into my template and embedding their code above the HTML line to no avail.

    1. Avatar

      Hi R.J

      IF you really wants to use Livefyre on your blogger blog than simply first deactivate comment from setting which you allready done..

      Now you have to add Livefyre comment code just below following code. Find it in your HTML editor.

      <data:post.body/>

      You find multiple code than use try and error message.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.