Manually Add Disqus Comment Box to your Blog (Blogger and Wordpress)

Having a good and better comment box can contribute to your site SEO and page rank, having may people to comment on your blog can increase your site traffic, and add value to your SEO there maybe many keyword you forget to mention in your post which commentator help you to mention, getting lots of comments on a single post make a blogger or writer feel happy, because it knows that his/her blog was read but all these cant be achieve with the suck and confusing default comment box. (on Blogger).

Why Removing Default Comment Box
Right before i was using the default comment box, i feel ashamed of my blog because the default comment box doesn't encourage ME to comment on my own Blog so what did the readers do? many bloggers may keep wondering why people not commenting on their blog? there are many circumstances contribute to this but one of the major circumstances is  bad or uninteresting comment box.  The default comment box sucks and i dont see the reason why you have to keep on using it, not friendly user interface, not applicable to many social networks, no free commenting without you log in in, No SEO value, just sucks!

 diqus comment kulhead










Why Disqus

There are many comment box you may want to use, but i suggest you use Disqus, it is widely use by most blogger and its free, has SEO Values, you can also make money with your Comment box if you are using the new 2012but there are a lots of problems in getting started with Disqus, all these problems I personally encountered and i will go into detail and will take  you through  the short way where you can setup your Disqus within an hour, first of all forget about using the Disqus Gadget installer (if you are using blogger those on wordpress can use it) you will not get any good result out of it, and it will waste your time, i will introduce to you fully on how you can successfully and manually install Disqus comment box to your blog without  much ado.




Getting Started with Disqus

Register your site free at Disqus, fill in all the necessary info and take note of your site shortname as you will need it later.Click Continue when done, ignore the next step and go to your profile and do all the editing.

Login to your blogger account, click on Layout section, select "Add a gadget" in the sidebar
from the add a gadget popup, move down to locate the "HTML/Javascript gadget" and select the add (+) button. 

 Mannually Add Disqus Comment Box to Your Blog: Kulhead Blog

 Enter Disqus as the title and the following code as the content.

<!-- Disqus comments gadget -->

Click save and the window will close, Click save arrangement in the layout viewer.
Go to your Blog template section and click on Edit HTML button, click Proceed, select Expand Widget templates box and search for the Disqus widget you created press (Ctrl + F) and type Disqus, you should see the following codes:

<b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>
replace it with this code instead:

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'>
below that, right before the closing tag locate and delete the following 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>

before the closing:             </b:widget>                tag, add the following piece of codes, remember to change the EXAMPLE to your site shortname you chose when register to disqus.

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

 "Make sure you replace the "EXAMPLE" above with your site shortname"

save your template and view your post, if no error is taking note that the comment box will only show on your posts!, you can see it on  my blog it work pretty good, if you found out you have do as you are instructed and the comment box is giving you more problems or not showing on your blog post you can Visit their Troubleshooting Page and Search for any problems you might encountered, you can as well leave your comment here, i will be happy to offer any kind of assistance.

if you have any comment regarding this post i will be happy to hear them, you can leave all your comments here or add or follow me on Google +, Facebook and Twitter and dont forget also to click on the share buttons.


;

Subscribe Us

Get Free Email Daily Updates!

Follow us!