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>:
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.
Post Comments (Atom)
Click on a single comment to hide/show its text
34 comments:
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.
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!
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!
@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
i'm interest about it...
first i have try threade comments in blogger
too much script
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
Contemplating whether to try your hacks or to install IntenseDebate. I really love threaded comments.
Thanks for the ideas.
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!!
@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.
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..
@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.
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...
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.
@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.
@MS-potilas
Thank you, I continue using your threaded commenting.
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
@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; }
@MS-potilas
Oh I didn't notice the newer version, thanks I'll give it a try.
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
@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.
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
@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.
thanks admin@MS-potilas
I have been searching for the best testing blogs to make me update in software testing domain. I found your blog, after I read, I am very much impressed in the way you have expresses your thoughts, thank you admin to make my time useful.
Regards:
Software testing training in chennai
Testing training in chennai
The article is so informative. This is more helpful. Thanks for sharing.
Best online software testing training course institute in chennai with placement
Best selenium testing online course training in chennai
Learn best software testing online certification course class in chennai with placement
This post is very impressive for me. I read your whole blog and I really enjoyed your article. Thank you...!
Pega Training in Chennai
Pega Course in Chennai
Excel Training in Chennai
Corporate Training in Chennai
Embedded System Course Chennai
Linux Training in Chennai
Spark Training in Chennai
Tableau Training in Chennai
Pega Training in Tambaram
Pega Training in Porur
Given article is useful and informative.The article shared more informations about web designing and development
for further reference refer
SEO training in coimbatore and Php Course training in coimbatore
Great work!!! This post is very helpful to gain my knowledge and thank you much more. And keep updating here.
thanks for your information really good and very nice web design company in velachery
Nice post DevOps Online Training
I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
sap fi training
sap fico tutorial
Wow What A Nice And Great Article, Thank You So Much for Giving Us Such a Nice & Helpful Information about Java, keep sending us such informative articles I visit your website on a regular basis.Please refer below if you are looking for best Training Center.
Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery
tHANKS FOR SHARING THIS INFORMATION.
RR technosoft offering DevOps training in hyderabad .DevOps Training in Hyderabad At RR Technosoft, we build students capabilities and leadership skills at every level and every opportunity. We do this to help build internal support, get to real issues, and reach practical recommendations. We bring out the capabilities of students to fully participate in the training and lead any project work. We are passionate about taking on immense challenges that matter to our students and often,to the world.
Get more inforamtion call us :7680001943
Thanks for this amazing blog.
Pega Training Fees In Chennai
Best Pega Online Training
This is Amazing Article. Helpful for me as I am pursuing full stack Java classes in Pune from Fullstack Guru.
amazing blog.
>CCNA course in Pune
>CCNA training in Pune
See the hack to make the 'Post a Comment' link bigger.
Post a Comment