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.

Data provided by Pastebin.com - Download Raw - See Original

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.

Templates: Is comment author blog admin? An easy test

If you make Blogger templates or template based hacks, this info might interest you. In the comments section, usually in <b:includable id='comments' var='post'>, if one needs to check if the comment author is blog admin, often seen solutions include:

<b:if cond='data:comment.author == &quot;PUT_USERNAME_HERE&quot;'>

and

<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/01234CHANGETHIS56789&quot;'>

But the easiest way, and least error prone, is:

<b:if cond='data:comment.authorClass == &quot;blog-author&quot;'>

After realising this, I updated my How to Hightlight author comments in Blogger hack to use this easier method.

Short URLs for Blogspot posts, and update to urltinyfy

Recently I made a Google App Engine application in Python, that provides javascript JSONP APIs for different URL shortening services. Read more about URLtinyfy, and the API, in this blog article.

I expanded the application to support more URL shortening services. Currently it supports: tinyurl.com (provides same interface as json-tinyurl), goo.gl (provides same interface as ggl-shortener), safe.mn, is.gd, v.gd, mcaf.ee, linkee.com, cli.gs, (std.li*), tinyurl.ms, and "hidden" support for bit.ly (and j.mp, which is same as bit.ly). I added also a sample URL shortener in javascript for the (non-hidden) services, for example: Sample linkee.com URL shortener.

*) std.li API does not work anymore in June 2012, removed from the list

And here's another example of usage, a hack to add...

Short URLs for blog's posts

This requires template editing. Edit also Widget templates. Find (partial line):

post-footer-line-3'

and about 8 lines later:

</span> </div>

Add this code after that </span> </div> line:

Data provided by Pastebin.com - Download Raw - See Original

The above code includes tinyurl, googl and safemn services. It is easy to add, remove or change the services displayed. Hack is installed on this blog, for demostration there are five different services offered here, but in practise I think it is better to limit the shortening services to two or three.

Tip: Anonymous avatar for new Blogger threaded comments

Update Feb 2nd 2012: Blogger has updated the threaded comments, and it now includes an avatar for anonymous commenters by default. So this is now obsolete.

---

Previously I've told how to use anonymous "mystery man" avatar in the "old" commenting system, article here. But if you start using Blogger's new threaded commenting system, that old CSS won't display the mystery man anymore.

To make anonymous avatar work for the new commenting system, I had to use CSS3. Most browsers luckily support it now. Here's a simple CSS3 definition, that puts the mystery man back into his place. Add this to your template's CSS section (you can use Template Designer|Advanced|Add CSS):

.avatar-image-container img[src$="blogblog.com/img/blank.gif"] { width:36px;height:36px;
background:url(http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=36) no-repeat center center;
}

(double click code to select for copying) This tip works for non-dynamic views. You can use a custom avatar instead of the Gravatar's mystery man, uploaded to your Picasa web albums, for example.

How to enable Blogger threaded commenting (on customized template)

Blogger announced threaded commenting today, as I wrote earlier. If you have customized your template, there is a chance that this threaded commenting does not work.

There is of course the possibility to reset the template, but then you loose all customizations. So here's how I could enable Blogger threaded commenting on blogs where it did not work, due to previous customizations.

First you should check, that you have embedded comment form enabled, and also full blog feeds. Without those settings the threaded commenting won't show. If they are ok, and still no threaded comments, you should edit the template.

Open template html for editing, and click "Expand Widget Templates". Find this code, it is either twice or four times in the template:

          <b:include data='post' name='comments'/>

Change every instance you find to this:

          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>

Save the template and test. If the previous changes were not enough, then you should see if this block of code is found, where threading javascript is included, and insert/modify it if necessary (search for <div id='comment-holder'>):

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

How to disable Blogger's new threaded commenting

As I wrote earlier today, Blogger has now threaded commenting. There are three ways (that I know) to disable Blogger's new threaded commenting, if you don't want it:

- Don't use embedded comment form,
- Disable per-post comment feeds in your blog, or
- Edit template html.

The easiest way is to change embedded comment form to popup or full page, or disable per-post comment feeds in your blog settings. But if you want embedded comment form and post comment feeds enabled, then you need to edit template. Note: these instructions do not apply to dynamic views.

For the template editing option, this has worked for me:

Open template for editing, and click "Expand Widget Templates". Find this block of code, which is there twice (for mobile and normal viewing), you can search for <b:if cond='data:post.showThreadedComments'>:

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Change both the blocks to this:

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!--      <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/> -->
            <b:include data='post' name='comments'/>
<!--      </b:if> -->
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--      <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/> -->
            <b:include data='post' name='comments'/>
<!--      </b:if> -->
        </b:if>

I.e. comment out the if-elses where "threaded_comments" are included, and include only "comments". Remember to do this twice, for both blocks of same code. To avoid extra javascript loading, search this line:

        <b:include data='post' name='threaded_comment_js'/>

and change to:

<!--    <b:include data='post' name='threaded_comment_js'/> -->

Save template. Now you should have the "good old" comments back with embedded comment form, and any modifications and hacks that were made to comments system.

Blogger has now threaded commenting

At least some sort of... Here's the announcement: Engage with your readers through threaded commenting. And this is how it looks like (in dynamic views – in non-dynamic view it is similar):


It has only two levels, and it could look a bit better, I think. But it is ok. It is activated if you have embedded comment form and full blog feeds enabled. When activated, other comment hacks, like my threaded commenting, don't work.

If you want my threaded commenting back on your blog, you can switch comment form to "full page" or "popup", instead of "embedded", in blog settings.

I will write some posts about how to enable this new feature on modded templates, how to disable it by editing the template (so you can switch back to embedded form without Blogger threading), etc. I'll get back after little more investigating. Stay tuned.