How To Manually Install Disqus Comment System On Blogspot Blog

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 <!-- Disqus comments gadget --> as the gadget content and save your gadget.

 

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 </b:widget>,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 = 'EXAMPLE';

                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('script');

                        bloggerjs.type = 'text/javascript';

                        bloggerjs.async = true;

                        bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_item.js';

                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[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('script');

                    bloggerjs.type = 'text/javascript';

                    bloggerjs.async = true;

                    bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_index.js';

                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[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