Sep 9, 2016

How To Manually Add Disqus Comments Gadget to Blogger

data:blog.title
Now we have migrated to disqus commenting system from default commenting system of blogger. Actually we are facing many issues with default commenting system. We are not saying blogger's default commenting system is bad but if you want to get more control on commenting section of your blogger blog then you must have to migrate it to any choice of yours like Disqus, IntenseDebate, LiveFyre and also there are many others available.

Disqus Comments, Manually Add, Blogger with Disqus

There are two ways to add disqus commenting system in blogger blog first is automatically and second is manually but we personally face problem with adding it automatically and then go with second one and add it to our blogger blog.

Must Read - How To Index Your New Blog Post within Few Minutes On Google Search Result?

When we have posted about automatically adding disqus commenting system to blogger then it is working properly but don't know why we are facing this problem now. So when we face this problem and after fixing it we are here to guide you how to manually add disqus commenting system to blogger blog when you are not able to add automatically. So lets get started.

Don't Ignore - Warning! Blogging Is Not For You If You Don't Have These Qualities.

 Note :  In this method you are going to edit your template so we highly recommend you to download a backup copy of your blogger template.

How To Manually Add Disqus Comment Gadget to Blogger?


STEP 1] Go to blogger.com >> Select your blog >> Click On Layout.

STEP 2] Now select HTML/JavaScript from the list.

manually adding disqus, add disqus to blogger

STEP 3] Now Enter Disqus Gadget in title bar and following line in the content and save it.

Disqus Gadget, Blogspot, manually add disqus

STEP 4] Now Click On Template and after that Click on Edit HTML button.

STEP 5] Now simply click anywhere inside code area and using CTRL+F search for Disqus Gadget which is something like this -

<b:widget id='HTML1' locked='false' title='Disqus Gadget' type='HTML'>

STEP 6] Now you have to add mobile='yes' in above line. You can see example below-

<b:widget mobile='yes' id='HTML1' locked='false' title='Disqus Gadget' type='HTML'>
STEP 7] Now you have to delete the following code. This is appear on just below of above line and just before of closing widget tag.

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

STEP 8] Now paste below line at that place from where you have deleted above lines.

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

STEP 9] Now Change REPLACETHIS to your forum shortname, for example MyBloggerGuides.

That's it. Now open your any blog post and check it is working or not.

Recommended - Top 7 Writing Tips For Beginners To Write Like Professionals.

Conclusion:

So above guide is about, "How To Manually Add Disqus Comment Gadget to Blogger Blog?" We tried our best to make tutorial easy as much as possible but if anyhow problem persist the don't feel shy to ask us via using our new disqus comment box. ;) Don't forget to share and subscribe us.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.