How to manually install Haloscan comments and trackbacks (for customized templates)

Haloscan provide an excellent commenting and trackback service for bloggers. While Blogger blogs are supported by this system, the installation wizard will not work for customized templates, even those which have a few lines of Javascript included!

Haloscan commenting and trackbacks do work in customized templates, but you will need to install the nescessary code manually. Unfortunately, Haloscan do not provide any support (yet) for manual installation of commenting and trackbacks in Blogger templates. So here is a tutorial of how you can manually install Haloscan's commenting and trackback features in your own Blogger templates.

Please note: this is a tutorial for installing both Haloscan commenting and trackback functions in your Blogger template. If you wish to only install Haloscan trackbacks (as I have done in this blog), please take a look at this post instead.

Here is a tried and tested method for installing Haloscan commenting and trackback features in your blog. Be sure to read each step thoroughly, and copy the lines of code exactly as they appear here in order to ensure this method will work for you!

This tutorial assumes you already have a Haloscan account. Ensure you have your Haloscan username to hand as you will need this during the manual installation process. Each section of Haloscan code you need to insert into your template should contain instances of your Haloscan username. In the codes provided, I have replaced this with "yourhaloscanusername" so be sure to edit this to include your actial username instead!

1. Firstly, you should make a backup of your existing template by going to Template>Edit HTML in your Blogger dashboard and clicking on the "Download full template" link near the top of the page. It is essential that you do this before making any modifications to your template, in case you make a mistake or decide to revert back to your original template at a later time.


2. Now, ensure you have checked the "expand widget templates" box, and search for the following lines of code:
   

   
   <b:if cond='data:blog.pageType != "item"'>
   
   <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>
   </b:if>
   </b:if>

   
   

   Replace the lines highlighted in red with the following lines of code (highlight all of the code and paste into your blog template):

   
   
   

   Be sure to replace all instances of "yourhaloscanusername" in this code with your own Haloscan user name!



3. Next, search for this section of code in your template:
   

   <b:includable id='comments' var='post'>
   <div class='comments' id='comments'>
   
   
   
   <a name='comments'/>
   <b:if cond='data:post.allowComments'>
   <h3 id='comments'><strong>
   <b:if cond='data:post.numComments == 1'>
   1 <data:commentLabel/>:
   <b:else/>
   <data:post.numComments/> <data:commentLabelPlural/>:
   </b:if>
   </strong>
   to “<span style='color: rgb(128, 128, 0); letter-spacing: 0px;'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>
   <b:else/>
   <b:if cond='data:post.url'>
   <a expr:href='data:post.url'><data:post.title/></a>
   <b:else/>
   <data:post.title/>
   </b:if>
   </b:if>
   </b:if>
   </span>”
   </h3>
   
   <ul class='commentlist'>
   <b:loop values='data:post.comments' var='comment'>
   <b:if cond='data:comment.author == data:post.author'>
   <li class='commentlist-author'>
   <b:if cond='data:post.dateHeader'>
   <div class='commentcount'/>
   </b:if>
   <cite>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   </cite>
   <br/>
   <a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
   <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
   <p><data:comment.body/></p>
   <div class='clear'/>
   </li>
   <b:else/>
   <li class='commentlist-general'>
   <b:if cond='data:post.dateHeader'>
   <div class='commentcount'/>
   </b:if>
   <cite>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   </cite>
   <br/>
   <a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
   <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
   <p><data:comment.body/></p>
   <div class='clear'/>
   </li>
   </b:if>
   </b:loop>
   </ul>
   <p class='comment-footer'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
   </p>
   </b:if>
   <div id='backlinks-container'>

   
   

   Replace this whole section of code with the lines in the frame below (highlight this whole section, copy and paste into your template):

   
   
   
   

   I know this can be a rather large section to fins in your Blogger template, so if you're having trouble, highlight all of the code between these lines, and paste the Haloscan code over the top of it:
   

   <b:includable id='comments' var='post'>
   <div class='comments' id='comments'>
   <a name='comments'/>
   <b:if cond='data:post.allowComments'>
   
   ..... paste Haloscan code over the content here ...
   
   </b:if>
   
   <div id='backlinks-container'>

   
   

   Be sure to replace all instances of "yourhaloscanusername" in this code with your own Haloscan user name!



4. Finally, find this section of code in your Blogger template:
   

   <b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
   </b:loop>
   </div>
   </b:includable>

   
   

   Now replace this red section with the following Haloscan code:

   
   
   

   Again, don't forget to replace all instances of "yourhaloscanusername" with your actual Haloscan username!



5. Preview your template now to ensure the commenting and trackback links are showing in your blog. You can check these link to Haloscan by hovering your cursor over the links, and should notice the link to Haloscan appearing in the bottom left of your browser.


6. If your template looks okay and the links point to Haloscan, you can save your template and enjoy your new Haloscan trackback and comments features! If the edits have not worked properly, you can clear all edits and begin the process again, taking extra care to copy and paste each section of code exactly as stated!

This is a rather difficult and tedious hack to implement, but unfortunately it is the only way I have found to successfully install Haloscan commenting and trackbacks into customized Blogger templates.

I have tried and tested this method on several different blog templates, and can assure you that this works, so if you're having difficulties, just clear your edits and try again, taking much care over the code you are pasting in.

I hope this tutorial helps you install Haloscan in your customized Blogger templates. Please leave any comments below.

Technorati Tags: haloscan | comments | trackbacks | install | customized+templates