Thursday, May 4, 2006

Blogger Inline Comments with HaloScan

BlogTipsBasilI've received questions regarding how to display HaloScan comments inline on a Blogger site. If you recall, we've covered how to display HaloScan TrackBacks inline on Blogger, but now there's a desire to show comments inline. And we've been asked to help. So, here goes.

Why?

Someone's going to bring this up, I'm certain, but Blogger has the capability of displaying comments inline already. We covered that in an Alliance Blog Tip back in December 2005.

So, if the desire is showing comments inline on Blogger, that post covers it.

If, however, the desire is for HaloScan comments inline, then we're going to show how to do it.

Why HaloScan Comments over Blogger Comments?

Another topic I expect someone to bring up is questioning the decision to use HaloScan comments instead of Blogger comments.

They will probably point out that both HaloScan and Blogger allow moderation of comments. Blogger offers extra features, such as requiring registration or word verification to help reduce spam.

Also, if there are plans to move the blog from Blogger to another platform at some time in the future, Blogger comments can be exported easily along with the posts, while an extensive manual process must be done to transfer HaloScan comments.

So, Why HaloScan Comments?

The reason to use HaloScan can be summed up simply: you want to.

Now, personally, I don't want to. I prefer Blogger's comment system to HaloScan's. But that's fine for my blog. If you prefer HaloScan's comment system to Blogger's then that's fine for your blog.

Remember, it's your blog. It should reflect you and what you want to do.

Get To It Already

Here's what you need:
  • A Blogger account.
  • A HaloScan account.
  • Lots of free time.
  • The patience of Job.
Now, doesn't that sound like fun? Let's dig in!

Item One: Blogger Account

First, this is specific for Blogger accounts. So, if your blog isn't a Blogger blog, well, this won't do you much good at all. Unless you just want something to read.

Item Two: HaloScan Account

Next, you should be using HaloScan for Comments. If not, go do that first.

No, I won't go into how to set up HaloScan Comments on your Blogger blog. HaloScan has that information on their site. Heck, they even have a wizard that will do it for you, if you're using a standard Blogger Template.

Item Three: Free Time

Next, you need to allow some time for this. Don't rush. Remember, we're messing with your Templates, and we need to be careful. If you're rushed, let's do this later.

Item Four: Patience

Remember, things don't always go right the first time. Plus, even if you get it right, it still might not be right. You'll see what I'm talking about in a little bit.

Backup

First, back up your Template. If you don't know how, you ought to read this.

Add A Comment Count Function

Open the Template. From the Dashboard, that's "Change Settings" then the "Template" tab.

Scroll down until you find the following line:
<script type="text/javascript"
src="http://www.haloscan.com/load/YourID/"></script>
Now, it won't say "YourID." It will have your HaloScan ID.

If you have HaloScan properly installed, you have that line. Or something real close to that.

Right after that line, add these lines:
<script type="text/javascript">
<!--
function CommentCount(id){
var hs_search = new RegExp('\\W','gi');
var hs_id = id.replace(hs_search,"_");
id = hs_id;
var rtrnVal=0;
if (hs[id]) {
var rtrnVal=hs[id];
}
return rtrnVal;
}
// -->
</script>
Just so you know, we're leveraging HaloScan code. In fact, this is simply a modification of HaloScan code that counts the number of comments and returns that value. You'll see why we need this in a moment.

Show The Comments

Now, scroll down until you find the line that reads:
<p class="post-footer">
It will be right before a line that reads:
posted by <$BlogItemAuthorNickname$>
Between those lines, insert the following:
<script type="text/javascript">
<!--
id="<$BlogItemNumber$>";
var CommentNum=CommentCount(id);
if (CommentNum) {
var frameH=250+100*CommentNum;
var maxH=1000;
if (frameH > maxH) frameH=maxH;
document.write("<iframe ");
document.write("src='http://www.haloscan.com/comments/");
document.write("YourID/"+id+"/' width='420' ");
document.write("height='"+frameH+"'></");
document.write("iframe>");
}
// -->
</script>
Actually, you can use just one 'document.write' line, but for display purposes only, I've broken it down into multiple lines. If you are comfortable editing it, do so. If not, the way I'm showing it here will work.

Remember, replace 'YourID' with your HaloScan ID.

Save and publish. And that's it.

What About That Patience Part?

Depending on what HaloScan template you are using, you may need to modify the line that reads:
var frameH=250+100*CommentNum;
You see, depending on the HaloScan Template you have chosen, you may need to adjust these numbers.

The first number (250) is how big the box will be not counting the comment information.

The second number (100) is how much larger the box will be for each comment.

For instance, if there is one comment, the box will be 350 high (250 + 100).

If there are two comments, the box will be 450 high (250 + 200)

If there are eight comments, the box will be 1025 high. Or it would be, if we allowed boxes to be that high.

The line that reads:
var maxH=1000;
can be changed to reflect any size you want. You don't have to have a maximum size, but if you get 100 comments, you'll have a really long list. Too long, some will say.

Anyway, if things don't look right, those are the numbers you can play with until you find a combination that works for you.

Once you've done that, saved and republished, you're set.

So, That's It?

Even if you get all those numbers correct to work properly with your HaloScan Template, it still might not be enough.

You see, different browsers can show your comment boxes in different ways. So, just because everything fits perfectly in Internet Explorer, it might not look just right in Firefox. And, once you get the numbers right for Firefox, it may be that it doesn't look right in IE.

Sometimes you just can't win. But, find the combination that looks best. Keep in mind that most of your users are likely using IE, although it's not my browser of choice. But that's another discussion, altogether.

What If No One Has Commented?

Oh, yeah. If no one has submitted a comment, nothing shows.

See the lines:
var CommentNum=CommentCount(id);
if (CommentNum) {
Those use that code we put in the <HEAD> section that counts the number of comments for your post. If there are none, nothing displays. No box. No nothing. If there are comments, the box shows with the comments inside.

Can I See? Can I See?

You want to see it in action? Of course you do!

http://commentdemo3.blogspot.com/

One thing to keep in mind: The first comment may not show for a few minutes. The code that counts the comments gets its data from HaloScan, and there is sometimes a delay in the count showing correctly. It usually clears up after a minute or two. Sometimes longer. Sometimes not as long. But it will resolve itself.

What can you do about it? Nothing.

Questions?

If you have a question for phin or me, drop us a line. My email address for Alliance Blog Tips is basil.thinks.he.is.so.smart@gmail.com

No comments:

Post a Comment

Please choose a Profile in "Comment as" or sign your name to Anonymous comments. Comment policy