Adding Comments to Tumblr
Someone asked me about this so here it is. I realized that adding comments to your Tumblr is not as straightforward as it may seem. Here is how you want to do it.:
- Sign up for a Haloscan account
- Go to the Install tab and choose Other/Manual to get the javascript code to paste on your site
- Switch your Tumblr to a custom layout so that you can edit the code
- Paste the first Haloscan snippet somewhere in the head
- Edit and paste the second snippet in your post blocks
The last point is the confusing one to some. Let me explain. Tumblr uses special tags to define blocks of code that do something different. For example take the following block:
{block:Regular}
<div class="regular">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
{Body}
</div>
{/block:Regular}It tells Tumblr how to display a single post (here we are looking at a regular text post). Note that all the stuff in braces is treated as special Tumblr tag. For example {Permalink} will expand to the full permalink URL of this given post, and {Title} will expand to it’s title.
Haloscan requires that you somehow create a unique identifier for each of the pages for which you want comments and pass it into their javascript calls. There are different ways to do it, but we can exploit Tumblr’s dynamic tags to automatically get a unique post ID for Haloscan. I simply chose to use the {Permalink} tag for this purpose.
My edited regular block looks like this:
{block:Regular}
<div class="regular">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
{Body}
</div>
<!-- HELOSCAN COMMENT CODE-->
<a href="javascript:HaloScan('{Permalink}');" target="_self">
<script type="text/javascript">postCount('{Permalink}');
</script></a> |
<a href="javascript:HaloScanTB('{Permalink}');" target="_self">
<script type="text/javascript">postCountTB('{Permalink}');
</script></a>
<!-- END OF HELOSCAN COMMENT CODE-->
{/block:Regular}Note how I’m plugging the {Permalink} in all the places where Haloscan requires you to put the unique post ID. At runtime it will expand to the full URL which will be unique for each post. You can actually just copy and paste this snippet to your Tumblr - it does not include any account specific info. Repeat this for every block that you want to enable comments for. Tumblr defines different blocks for regular posts, links, conversations, videos, images and etc..
Anyway, this is all there is to it. I hope you find this helpful. 
Related Posts:
September 5th, 2007 at 9:21 am (6057) [Quote]
very useful, works a treat - thanks a lot!
Posted usingSeptember 5th, 2007 at 10:21 am (6058) [Quote]
Glad I could help.
Posted usingSeptember 8th, 2007 at 4:26 pm (6120) [Quote]
Thank you for this. The solution worked perfectly.
Posted usingSeptember 14th, 2007 at 3:35 am (6191) [Quote]
Just what I’ve been looking for. Thanks!
Posted usingNovember 1st, 2007 at 11:12 pm (6801) [Quote]
I’ve been going mad trying to sort comments out this morning, before finding this advice. Thank you so much.
cheers
Posted usingNovember 5th, 2007 at 4:45 pm (6845) [Quote]
Thanks! Much appreciated!
Posted usingNovember 28th, 2007 at 2:28 pm (7164) [Quote]
Very nice, pretty usefull. Going to try that out right now.
Posted usingDecember 4th, 2007 at 6:15 am (7240) [Quote]
appreciated!!!
Posted usingDecember 18th, 2007 at 11:52 am (7396) [Quote]
hi there - i’m trying to install haloscan code into tumblr; i can’t find anywhere in tumblr that gives me the option to switch it to “custom,” or a place to enter code manually. do you know anything else about this?
Posted usingDecember 18th, 2007 at 12:38 pm (7400) [Quote]
@gijyun - from the Dashboard pull down the Account menu and go to Themes. You can choose the Custom HTML option in the right pane.
Since the HTML textbox is so small I recommend copying it into a text editor, adding the haloscan code and then pasting it back in.
Posted usingFebruary 3rd, 2008 at 1:03 am (7957) [Quote]
This post saved my ass…thank you Luke!
Posted usingFebruary 12th, 2008 at 12:47 pm (8092) [Quote]
How do I get comments and rating stars on one line?
Posted usingApril 14th, 2008 at 1:27 am (8764) [Quote]
Can’t thank you enough.
Posted usingApril 15th, 2008 at 5:49 pm (8778) [Quote]
I just can’t figure this out, I’ve tried it so many ways. I don’t know the first thing about code so it’s kind of blowing my mind.
Am I missing a step between copying the code from Heloscan to posting it in between the {block:regular} part?
Posted usingMay 26th, 2008 at 7:46 pm (9134) [Quote]
Thanks for the help!
Posted usingAugust 28th, 2008 at 5:52 am (9981) [Quote]
hi luke maciak,
this definitely looks like a good tool. how does it compare with disqus?
thanks…
Posted usingAugust 28th, 2008 at 9:20 am (9982) [Quote]
IN_RILIEVO said:
Disqus is better. I have since switched to it and I’m very happy with it. I’d recommend Disqus over Haloscan.
Posted usingOctober 26th, 2008 at 5:46 pm (10507) [Quote]
It works … however, it doesn’t update the comment post count — mine remains at “0″ comments even though I already have comments on there.
Posted usingOctober 26th, 2008 at 6:03 pm (10508) [Quote]
@Mae: Yeah, it is a flaw that I noticed too.
I have switched over to Disqus which is all in all a better system. I recommend you doing the same.
Posted using