Sunday, December 19, 2010

Switch to Intense Debate Comment Form

Everybody loves Intense Debate Comment Form because it looks better than the default comment form and it is easy to use.

However, there are instances when Intense Debate Comment Form doesn't work with our templates. An online friend, iCleverClogs, found herself in this dilemma and I got curious because I was planning to switch to Intense Debate soon. I used her template in my demo site and looked for solution myself. Before I enumerate the steps I took to install Intense Debate into her template, there are few things I need you to remember:
1. RULE OF THE THUMB: before doing anything else, back up your template.
2. This only works if you want Intense Debate comment forms in ALL your posts and not just new ones.
3. If you want a 'dofollow' comment form, activate the 'CommentLuv' plugin first.
4. Try this ONLY IF you can't seem to get the Intense Debate Comment Form to work in your template (trust me, it's way easier to install it using the steps outlined in Intense Debate Website.)


First, go to your Intense Debate Dashboard (My Account )> Manage Blogs/Sites>click "Site Key" below the site where you want to install the comment form then grab your "IntenseDebate site acct". Save it somewhere. You'll use it near the end of this tutorial.

Go to your Blogger Dashboard>Design>Edit HTML> click on "Expand Widget Templates".

To keep the number of comments updated, look for this code:
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

Change it to:
          <b:if cond='data:post.allowComments'>
   <!--Intense Debate-->
    <div expr:id='"IDCommentPostInfoTitle"+data:post.id' style='display:none'><data:post.title/></div>
<div style='display:none' expr:id='"IDCommentPostInfoTime"+data:post.id'><data:post.timestampISO8601/></div><div style='display:none' expr:id='"IDCommentPostInfoAuthor"+data:post.id'><data:post.author/></div><div style='display:none' expr:id='"IDCommentPostInfoCats"+data:post.id'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div> <a expr:href="data:post.url" expr:name="data:post.id" class="IDCommentsReplace">Comments</a>
   <b:else/>
<!--/Intense Debate-->
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
 <!--Intense Debate-->
</b:if>
<!--/Intense Debate-->

To change the comment form. Look for this code:
        <b:if cond='data:post.embedCommentForm'>
          <b:include data='post' name='comment-form'/>
 Change it to:
     <b:if cond='data:post.embedCommentForm'>      
   <!--Intense Debate--><div style='display:none' id='IDCommentInfoPostTitle'><data:post.title/></div><div style='display:none' id='IDCommentInfoPostTime'><data:post.timestampISO8601/></div><div style='display:none' id='IDCommentInfoPostAuthor'><data:post.author/></div><div style='display:none' id='IDCommentInfoPostCats'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div>  <script type='text/javascript'>var idcomments_acct='[INTENSEDEBATE SITE ACCT #]'; var idcomments_post_id='<data:post.id/>'; var idcomments_post_url='<data:post.url/>'; var idcomments_post_title=document.getElementById('IDCommentInfoPostTitle').innerHTML;var idcomments_post_author=document.getElementById('IDCommentInfoPostAuthor').innerHTML;var idcomments_post_time=document.getElementById('IDCommentInfoPostTime').innerHTML;var idcomments_post_cats=document.getElementById('IDCommentInfoPostCats').innerHTML;var commentScriptWrapper = document.createElement(&#39;SCRIPT&#39;);commentScriptWrapper.type = &#39;text/javascript&#39;;commentScriptWrapper.src = &#39;http://www.intensedebate.com/js/bloggerTemplateCommentWrapper2.php?acct=&#39;+idcomments_acct+&#39;&amp;postid=&#39;+idcomments_post_id+&#39;&amp;title=&#39;+encodeURIComponent(idcomments_post_title)+&#39;&amp;url=&#39;+idcomments_post_url+&#39;&amp;posttime=&#39;+encodeURIComponent(idcomments_post_time)+&#39;&amp;postauthor=&#39;+encodeURIComponent(idcomments_post_author)+&#39;&amp;postcats=&#39;+encodeURIComponent(idcomments_post_cats);document.getElementsByTagName(&#39;HEAD&#39;)[0].appendChild(commentScriptWrapper);</script>
<!--/Intense Debate-->
 <!--Intense Debate-PRE ID <b:include data='post' name='comments'/> -->
 <!--Intense Debate-->
<script src='http://www.intensedebate.com/js/bloggerTemplateLinkWrapper.php?acct=[INTENSEDEBATE SITE ACCT #]'></script>
<!--/Intense Debate-->

Change  [INTENSEDEBATE SITE ACCT #] to the number you copied from your Intense Debate Account

Click Save Template.

Intense Debate doesn't have pop-up comment form and since we inserted the code to the embedded one, you'll still be able to get Bloggers' default pop-up comment form if you decide to change your settings.

5 comments:

  1. Ang galing sis huh. Super techie ka na talaga. Hihi.

    ReplyDelete
  2. sis, i reinstall my theme ulit. I read on intense debate that it will not work on advance theme. siguro yun ang dahilan kumbakit di talaga gumawa. anyways, ang importante dofollow, pero mas maganda nga kung commentluv.

    OT: sis, are you from davao city?

    ReplyDelete
  3. ^yes sis. from davao...
    pero sis I don't think nasa theme yun because I used the same theme as yung ginamit mo and nagwork naman sa akin.

    ReplyDelete
  4. May ganito na din pala for blogger. =)

    ReplyDelete