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

  1. Sign up for a Haloscan account
  2. Go to the Install tab and choose Other/Manual to get the javascript code to paste on your site
  3. Switch your Tumblr to a custom layout so that you can edit the code
  4. Paste the first Haloscan snippet somewhere in the head
  5. 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. :)

This entry was posted in technology and tagged . Bookmark the permalink.



25 Responses to Adding Comments to Tumblr

  1. dave UNITED KINGDOM Flock Mac OS says:

    very useful, works a treat – thanks a lot!

    Reply  |  Quote
  2. Luke Maciak UNITED STATES Mozilla Firefox Ubuntu Linux says:

    Glad I could help. :)

    Reply  |  Quote
  3. Thank you for this. The solution worked perfectly.

    Reply  |  Quote
  4. Tal Shafik GERMANY Mozilla Firefox Windows says:

    Just what I’ve been looking for. Thanks!

    Reply  |  Quote
  5. dry MALAYSIA Mozilla Firefox Windows says:

    I’ve been going mad trying to sort comments out this morning, before finding this advice. Thank you so much.

    cheers

    Reply  |  Quote
  6. Freddie CANADA Mozilla Firefox Windows says:

    Thanks! Much appreciated!

    Reply  |  Quote
  7. Norman GERMANY Mozilla Firefox Windows says:

    Very nice, pretty usefull. Going to try that out right now.

    Reply  |  Quote
  8. kim REPUBLIC OF KOREA Safari Mac OS says:

    appreciated!!!

    Reply  |  Quote
  9. gijyun UNITED STATES Mozilla Firefox Windows says:

    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?

    Reply  |  Quote
  10. Luke Maciak UNITED STATES Mozilla Firefox Ubuntu Linux Terminalist says:

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

    :mrgreen:

    Reply  |  Quote
  11. Todd UNITED STATES Mozilla Firefox Mac OS says:

    This post saved my ass…thank you Luke!

    Reply  |  Quote
  12. Jeff UNITED STATES Mozilla Firefox Windows says:

    How do I get comments and rating stars on one line?

    Reply  |  Quote
  13. lhyfae CANADA Mozilla Firefox Windows says:

    Can’t thank you enough.

    Reply  |  Quote
  14. Tendrillar UNITED STATES Mozilla Firefox Mac OS says:

    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?

    Reply  |  Quote
  15. barstool1 UNITED STATES Mozilla Firefox Windows says:

    Thanks for the help!

    Reply  |  Quote
  16. IN_RILIEVO UNITED STATES Flock Windows says:

    hi luke maciak,

    this definitely looks like a good tool. how does it compare with disqus?

    thanks…

    Reply  |  Quote
  17. Luke Maciak UNITED STATES Mozilla Firefox Ubuntu Linux Terminalist says:

    [quote comment="9981"]how does it compare with disqus?[/quote]

    Disqus is better. I have since switched to it and I’m very happy with it. I’d recommend Disqus over Haloscan.

    Reply  |  Quote
  18. Mae UNITED STATES Mozilla Firefox Mac OS says:

    It works … however, it doesn’t update the comment post count — mine remains at “0″ comments even though I already have comments on there.

    Reply  |  Quote
  19. Luke Maciak UNITED STATES Mozilla Firefox Windows Terminalist says:

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

    Reply  |  Quote
  20. dalia CANADA Mozilla Firefox Windows says:

    thank you for that… i totally pimped my tumblg with comments. w00t.

    Reply  |  Quote
  21. maggie UNITED KINGDOM Safari Mac OS says:

    hey Luke,
    I’m new to all of this and i’ve tried to us disqus, but the comments link takes me to a search engine with links to “permalinks”. how do i fix this problem?
    thanks for the help!

    maggs

    Reply  |  Quote
  22. Pingback: Twitted by _biscrok FRANCE PHP

  23. Jackie UNITED STATES Mozilla Firefox Windows says:

    hi, can you give us instructions on how to do this with disqus?

    Reply  |  Quote
  24. Mario VIET NAM Mozilla Firefox Windows says:

    how to Sign up for a Haloscan account?
    I don’t see “Sign Up”.
    Please help me!

    Reply  |  Quote
  25. Luke Maciak UNITED STATES Mozilla Firefox Linux Terminalist says:

    @ Mario:

    Hey, as mentioned earlier you should rather use Disqus rather than HaloScan.

    Reply  |  Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>