Pages

Wednesday, January 18, 2012

46

Blogger threaded commenting hack v2

Blogger announced its own threaded commenting on January 12th. I thought that soon my good old threaded comments hack would not be needed anymore.

But Blogger's implementation of threaded comments has its limitations, and bugs, too. So I decided to give my threaded commenting hack a new round, and made version 2. It is now installed on this blog, you can see it and test it for example in the threaded commenting playground.

Features include:
  • (relatively) easy install, just one piece of code copied to template
  • contains Reply links to comments hack
  • contains highlight author comments hack
  • expand/collapse individual comments
  • style is similar to Blogger threaded comments
  • max threading levels can be specified
  • if you have used Blogger's threading, can read that threading information
  • works with major browsers, tested on Internet Explorer, Firefox, Opera, Chrome
  • I must have forgotten something. Did I mention that it is great? :)

To install this, just edit your blog's template, copy the following code (use the "Download Raw" link) and paste it just before </body> in the template. If you have jQuery loaded previously in the template, you can delete the first line that loads jQuery. If you had my previous threaded commenting hack installed, remove that code (the javascript part). You don't need to install any hacks beforehand, like in the previous version: this hack includes them, if they are not installed.


This works at least on Simple template. If your template is heavily modded, then this hack might not work without modifications. And this hack does not work on dynamic views, and does not work if Blogger's threaded commenting is active. If you need to disable Blogger's threaded commenting, see this article.

Update August 31th 2012: If you have this installed, and threading stopped, please install this update.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

46 comments:

Marco Giannini said... [reply]

Thanks for your hack, the new threaded comments do not work for my custom template, now with your work i can have it :)

Beben Koben said... [reply]

Excellent master, this is rock \m/

Beben Koben said... [reply]

@Beben Koben Test Reply...
Yeah its one good hack for commnet blogger

Unknown said... [reply]

I followed your instructions but am not getting the correct results. I get a little REPLY under the first comment but no where else. See this post as an example: http://www.hybridrastamama.com/2012/01/160-uses-for-coconut-oil.html

Any thoughts??? Thank you!

MS-potilas said... [reply]

@Hybrid Rasta Mama
Hi, seems to work now when I looked the post, maybe you got it fixed already. If you still have some trouble, please tell what browser you are using. I tested the page on Chrome and Firefox.

Unknown said... [reply]

Internet Explorer seems to be the issue. I do see that it works fine in Firefox. However, most of my readers use IE and apparently comments were getting disappearing yesterday. So I'll see what modifications I can make to fix it. Thanks for a great hack though!!!!

MS-potilas said... [reply]

@Hybrid Rasta Mama
Hi, thank you for the info, I got the bug pinned. I was using "textContent" on a fairly unimporant place, and IEs below 9 does not recognize it. It worked on my blog, because I have "EmulateIE9" setting (EmulateIE7 is the default on many templates).

I modified the script: replaced the textContent with nodeValue, which works also on Internet Explorers below version 9. The changes are on lines 104, 106 and 107.

Sorry about the bug, teaches me (once again) that always should test more on Internet Explorer than just a simple "smoke test"... But now it is fine :)

Unknown said... [reply]

Oh wow! That is great! I will go in and replace the code and let you know what happens. Seriously - you are genius!

Unknown said... [reply]

I created a new custom template and this hack no longer works. You mentioned making some modification to custom templates. Any idea what those might be?

MS-potilas said... [reply]

@Hybrid Rasta Mama
Hi, that depends on the custom template :) First of all you have to make sure, that Blogger threaded comments don't overrun this, disable Blogger's threaded comments. Then you should check for any javascript errors, etc. The document object model (DOM) of the comment section should be similar to, for example, Simple template (same class names etc), or the script needs modifications.

I once installed this before </head> and wondered for a while why it did not work...

I looked at your site, which looks great. You might want to consider anonymous icons for non-registered commenters to go with the threaded commenting.

Hope you get this working on your new template, too. I can try to help you further if you have some additional info.

Anonymous said... [reply]

شكراااااااا@Hybrid Rasta Mama

Unknown said... [reply]

@MS-potilas Got it working! Yay! Looks great! Thanks again.

La Cuisine d'Helene said... [reply]

I have a custom made template made by Rainy Day. My comments are set to pop up. body is an the end of the template. I did add version 2 codes before body. Saved template and did not work. I am using Safari and Chrome. I really wish it was working. Any tips? Thanks for everything.

MS-potilas said... [reply]

@Helene Hi, try this: put the first line, the one with jquery-latest.js, just before </head>. Then put rest of the script before </body> Hope that helps :)

Sarah said... [reply]

I'm in the exact same boat as Helene and for some reason it's being stubborn for me and doesn't want to work. I want my comments to be a pop out, but I don't even have the option to reply to comments, let alone thread them. If you have anymore suggestions I would greatly appreciate them! Thank you for your time and help!

MS-potilas said... [reply]

@Sarah Hi, I looked at the source code of your blog page, and there are errors with the threaded comment hack installation. First, all lines are after each other, without line breaks, and it won't work that way. Secondly, there are also the line numbers in the code, and they should not be. Use the "Download Raw" link and copy the code from that window that pops out. Remove the old code from template and replace it with that. Hope you get it working :)

Sarah said... [reply]

@MS-potilas Haha gosh, I feel sheepish. I know nothing about HTMLs whatsoever. I did what you told me to and it still didn't work though :( Maybe it's just my template, I don't know. Thanks anyway for your help though! I'll see if I can figure it out somehow.

Sarah said... [reply]

@MS-potilas Just kidding, it DID work!! You are a computer genius! Thank you for your help :) Do you know if the reply comment gets sent to their e-mail? Or do they have to check back to my blog to see it?

MS-potilas said... [reply]

@Sarah Hi, great that you got it working! There used to be a checkbox when writing a comment for following the comments of a topic, but it has disappeared when the comment page style changed. So users can either check back to your blog, or they can subscribe to the comment feed, for example in Google Reader. I've got one hack to let users subscribe new article's comments to email, see at the bottom of this page. But that of course requires some html editing again :)

Anonymous said... [reply]

Thanks a lot for this! This was one thing I really missed on blogger.

Ismail Sosse Alaoui said... [reply]

hi admin, thanks for this pro tutorial,
i found problem to install it
i had nested on my template, i want you to visit my blog to show what to do to install it correctly,
http://bestertem.blogspot.com/
thanks to answer

MS-potilas said... [reply]

@Mr Admin Hi,

you currently seem to have installed this threaded commenting hack: http://miscah.blogspot.com/2011/12/threaded-comments-untuk-komentar.html That seems pretty good, too. Nice idea to hide the "@someone" links, one could do that with my hack with a little editing, too.

If you want to use this threaded commenting, then you should have no other threaded commenting active. You could make a test blog and try my hack there, and if you like it, then reset the comments widget on your other blog to default (remove the previous hack), and install mine.

Ismail Sosse Alaoui said... [reply]

so how to desable other threaded comments system?
you mean just remove after you threaded comment system it will work correctly..
@MS-potilas

MS-potilas said... [reply]

@Mr Admin For my threaded comments to work, the comments section must have same/similar DOM (document object model) structure as the basic Blogger templates, like Simple. The hack traverses comment's DOM and makes the threading. So if DOM is different (different class names, etc.) then the hack can not work.

So the other threaded commenting should be removed and replaced with the basic commenting. The template looks pretty much customized, so it might not be easy.

Easier way to test this threaded commenting would be to make a test blog with Simple template, and install it there. I'm not familiar with the threaded commenting your template uses, so I don't know if my hack offers anything more than that. Well, my hack can be easier to customize, because javascript is not obfuscated.

Αέναη Σκέψη said... [reply]

amazing hack :)
but i have a problem on comments time :(

MS-potilas said... [reply]

@Διελκυστίνδα Hi, I checked your blog. The comment timestamps (date+time) seem to be missing from your comments section. This threaded comments hack rearranges elements already on the screen, including the timestamp, so if timestamps are missing, they still are missing after threaded comments is run.

So there is some customization in the comments section of your blog template that has removed the date. Maybe it is the comment numbering hack. There should be a block of code looking like this in the template (widgets expanded):

            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>

(it may differ a bit)

Hope you get the timestamps back :)

Αέναη Σκέψη said... [reply]

@MS-potilas

thanks a lot :D
i add this code and appears at the top and not on each comment
. I can' find the right location...

MS-potilas said... [reply]

@Διελκυστίνδα It may be too hard for me to try to position that code in your template. I suggest you create a new test blog, with the "simple" template. Then examine that new blog's template and that way try to find the right place for the missing timestamp code in the other template. Good luck!

Αέναη Σκέψη said... [reply]

@MS-potilas
My friend, I solved the problem.
I removed the code above, and added this code here. http://yabtb.blogspot.com/2011/10/reply-to-blogger-comments-hack.html ;)

Greetings from Greece :)

MS-potilas said... [reply]

@Διελκυστίνδα That was a very well invented solution, as that hack is compatible with this. Great you got it working.

Greetings from (still snowy) Finland, and all the best :)

Unknown said... [reply]

Wow.
Its so awesome
thanks :)

Unknown said... [reply]

Me again! So last week your hack just stopped working for no apparent reason. I have not changed anything on my blog. Thoughts?

MS-potilas said... [reply]

@Hybrid Rasta Mama
Hi,
your article pages give a javascript error about "CommentsCounter" variable. The variable is defined in an odd place (in CSS definitions), and the <span class="numberingcomments", where CommentsCounter is displayed, has some html errors, too. I saved one article page from your blog, removed the CommentsCounter-codes from page html, and then the threaded commenting worked again (you probably don't want to remove the numbering of comments, but correct the errors).

Unknown said... [reply]

@MS-potilas I am not very literate when it comes to HTML. The CommentsCounter code that I want to edit is from your hack code right? Do I want to remove that code or edit it somehow? Sorry...still learning all this!

MS-potilas said... [reply]

@Hybrid Rasta Mama
Hi, the CommentsCounter code is from somewhere else, not from my hack. It might be this: http://www.bloggerplugins.org/2009/08/numbering-your-blogger-comments.html. It might be best to first try to remove the comment numbering hack and then reinstall it.

Unknown said... [reply]

It's great... I love this TC style...

Kathie Austin said... [reply]

I just created a blog in blogspot and when people are posting comments, it doesn't automatically expand them. It only says "1 comment" below the post. How can I make the comments automatically show in expanded format? Thanks!

http://kathieaustinphotography.blogspot.com/

MS-potilas said... [reply]

@Kathie Austin
Hi,

that is the normal way Blogger blogs display comments: on the main page only the articles and comment counts are shown, and when an article is opened, its comments are shown below it. To show comments on the main page would require modifications to the template.

Danial Abdul Rahim said... [reply]

Thanks a lot for this GREAT work ^_^

Kang Ismet said... [reply]

Hello MS-Potilas..
Verry clever for blogger threaded commenting.
I wanna ask about threaded commenting from blogger, not this hack. How to get Commenter link opened in new tab?
Thanks before.

Post a Comment

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