Pages

Friday, October 7, 2011

22

Threaded commenting with Blogger native comments

Update January 18th 2012: A newer and easier to install version 2 here, you should consider using it.

Threaded commenting is a much wanted feature in Blogger. There are 3rd party commenting solutions with threading. Wordpress has threaded commenting built in. But what about threading in native Blogger comments?

When googling Blogger comments hacks, for completely other reasons, I came across this Threaded Comments in Blogger article. However the hack looked a bit complicated, template needed big changes, and I did not want that. And, according to some comments, installation to new templates was not straightforward. I thought, maybe it could be done with fewer changes and code that was easier to maintain. I felt like my mind could not rest before I figured out how to do it. :) So I had to find a solution, and finally I did, here it is. Thanks to Sham for the idea.


This hack works for the (current) layout templates (October 2011). Don't know about classic templates. Does not work with dynamic templates, because they display comments completely differently, getting their data dynamically from comments feed.

How to install Threaded comments

Update January 18th 2012: A newer and easier to install version 2 here, you should consider using it.

You must install my Highlight author comments and Reply to comments hacks first. After installing those, edit template html, and paste this just before </body>:

Data provided by Pastebin.com - Download Raw

In the script there are two values, 300 and 20, that you can change to control the maximum indent amount (300 in my code) and the indent of one "step" (20 in my code). Defaults should be quite good. You can also change these values afterwards.

Save template and enjoy. It is almost like magic :)

Code "threads" the comments either by parsing link <a href="#link to comment"... or by parsing @username from message field. A reply containing "@username" is positioned after latest username's comment (which timestamp in earlier than in reply) or for immediate previous comment, if it is from username, on the list before reply.

If you just want to test how the threaded comments work, please don't do it in this post, I will delete totally irrelevant comments. But you can do the testing here: Playground for Blogger threaded comments. Thank you.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

22 comments:

Lauren @ Hobo Mama said... [reply]

The threading isn't working for me at www.hobomama.com — do you want to take a look? (Sample post with reply-to comments: http://www.hobomama.com/2011/10/we-said-goodbye-to-preschool.html#comments) I'm wondering if I need to replace my previous hacks with yours first.

Lauren @ Hobo Mama said... [reply]

Just as an update, I tried replacing my Reply to Comments hack with yours, and that's working fine, but it's still not threading. You can email me through my profile if you'd like to help — thanks so much!

Lauren @ Hobo Mama said... [reply]

If I talk to myself long enough, I'll figure it out. ;) Thank you — I uninstalled all my hacks & installed yours in their place, and now it's good. You can delete these comments if you'd like!

MS-potilas said... [reply]

@Lauren @ Hobo Mama
I was asleep while you were hacking your blog (it was about 1 AM here in Finland). But really great you got it working on your own! Looks great on your blog, too. I'll leave your comments here, they are on-topic :)

Beben Koben said... [reply]

i'm interest about it...
first i have try threade comments in blogger
too much script :P
then i found it
threade comments in blogger II
and i found you, litle script, but so much unique ID for change...heheheh
i learn first ;)
good good

Flora Moreno de Thompson said... [reply]

Contemplating whether to try your hacks or to install IntenseDebate. I really love threaded comments.

Thanks for the ideas.

Wilderness Calling said... [reply]

Thank you so much for this info. I installed all three hacks into my blog and it works great. The only thing not working as expected is the highlighting of the comments when hovering. My replies show up with a different color background, but don't change color when hovering. I can live with it!!

MS-potilas said... [reply]

@Wilderness Calling
Hi, for the hover part, look at the CSS changes in this hack: Collapse and expand individual Blogger comments hack. Those do the hover thing. Change the colors to suit your blog. And if you like the collapse/expand functionality, you can install the whole hack. :)

Sara said... [reply]

Before I hurt my brain by trying to install these hacks, can you tell me whether they work with the mobile version of blogger? Or.. wait.. I will test in on my phone..

MS-potilas said... [reply]

@Sara
Hi Sara,
I'm not familiar with the mobile version of Blogger, and I don't have such mobile devices to test it. I think mobile version has its own template(s), and the hack should be installed on the mobile template for it to run. If the script is not run (for any reason), then the comments are shown like normal Blogger comments.

Sara said... [reply]

Thanks, I had a nightmare with comments people left on my site via mobile, not showing on the web version because disqus was not itegrated with the mobile thing... (mmm.. not up with the terminology sorry). Now I'm having major disqus probs and tomorrow will uninstall it and try your way. I'll test it on my test blog first...

Kutha Ardana said... [reply]

I'm using your hacks on threaded comments on my blogger http://blog.kuthaardana.com since a few weeks ago and running well. But today, it suddenly changed as before, even with tight spacings. I've checked all previous three sets of the code through Edit HTML, and no changes. What's wrong? Thank you for your many wonderful tips.

MS-potilas said... [reply]

@Kutha Ardana
Hi,
it is because Blogger finally introduced their own threaded commenting today, and you are seeing it: http://buzz.blogger.com/2012/01/engage-with-your-readers-through.html. It is activated, if you have embedded comment form and full feeds enabled. Unfortunately it does not "thread" old conversations.

If you want to continue using my threaded commenting, you should switch comment form placement to "popup" or "full page". (I'm using "full page" setting on my blogs). Or, go to settings, feed, Advanced mode and set "per post feeds" to "none". Either change disables Blogger's threading.

This Blogger's threading is still so new, that I haven't investigated, if it can be disabled some other way. And it does not work on all my old blogs... maybe there is some kind of transition period. We'll see.

Kutha Ardana said... [reply]

@MS-potilas
Thank you, I continue using your threaded commenting.

Sandy said... [reply]

Hello,

This hack works very well, thank-you for sharing. I am currently testing it out before I apply it to my live blog and I notice that the whole comment doesn't fit, part of it gets cut off on the right. Could you tell me what I need to do to fix this?

Here is the link to my blog if you want to see : http://sandystester.blogspot.com/2011/12/blog-post.html#comment-form

MS-potilas said... [reply]

@Sandy
Hi,

you could try the new version instead, it has a bit different layout, similar to Blogger threaded comments.

Or if you want to use this older version, you could try adding CSS styles for "dt.comment-author" and "dd.comment-body" and add them margin-right: 8px;, something like this:

dt.comment-author, dd.comment-body  { margin-right: 8px; }

Sandy said... [reply]

@MS-potilas

Oh I didn't notice the newer version, thanks I'll give it a try.

Sarah said... [reply]

I installed all three hacks that you said and none of them worked...mind helpin' a sista out? My blog is at zacharyandsarahaverett.blogspot.com.
Thank you!

-Sarah

MS-potilas said... [reply]

@Sarah Hi, you have some customized template, they often require more work. I think you should try the new version of the threaded comment hack, it includes the two other hacks so you only need to install one. Link to the new version is at the beginning of this article.

Mr Admin said... [reply]

hi admin i ask if you can do a tutorial to replace popup reply with mobile comment form it means to make comment-form moves under comment item while pressing reply button and with this tutorial
thanks@MS-potilas

MS-potilas said... [reply]

@Mr Admin If you mean the embedded comment form, then that cannot be done with this hack. Blogger's own two-level threaded commenting can move the embedded comment form. Problem is that javascript cannot "communicate" with the form (put text there), so this hack (and the newer version of it) can only use either Popup commenting or Full page commenting. I suggest you try the Full page commenting (and possibly with the newer version of the hack), if that would work ok in mobile devices.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: