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.

Add post titles to Older and Newer Post links

Update June 27th 2012: new version here, I suggest you consider using it instead of this.

When you open a Blogger blog post, there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger.

Already done, but...

I started thinking, if I could make a hack to display those post titles also in Blogspot blogs. Some googling revealed that this had already been done. I think ETBlue was the first author of that hack, here's Blogger forum post about that. Later it was repackaged and republished by Bloggersentral and WEB.SILOG.. The hack is quite clever, it uses jQuery to load the previous and next posts and uses jQuery selectors to get the titles. Good for me, I thought, saves the me trouble of making a hack.

...it skews the stats! 1 --> 3

After having the mod installed for a couple of hours I noticed, that I had many three-hit visits in my blog. Then I realised, that loading two extra posts by jQuery results in two extra stats hits for an opened post! That may not worry everyone, but I did not like that at all. So to the drawing board, after all.

My first version

So blog posts cannot be read from browser without causing stat hits. I uninstalled the ETBlue/WEB.SILOG./Bloggersentral hack and started devicing my own. My first quick & dirty solution was to parse the url, and create a "pseudo title" from that, so for example:

Url http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html becomes "Return of better recent comments..." and http://yabtb.blogspot.com/2011/11/welcome-to-yabtb.html becomes "Welcome to yabtb". If url is so long, that it might be cut, it is cut once more (to make sure it is not full title) and ellipsis is added. See function urlToPseudoTitle in the hack source, if you need something like this.

This was quite nice solution and works especially on English blogs. And it is much faster than jQuerying two extra pages. I was satisfied for a couple of hours.

But then I noticed a glitch in my Finnish blog. In Finnish language there are letters ä and ö (a with dots, o with dots), which are converted to "a" and "o" in the post url. So if I have title "Monet kipulääkkeet lääkekannabista koukuttavampia", and its url is http://mspotilas.blogspot.com/2012/01/monet-kipulaakkeet-laakekannabista.html, the pseudo title becomes "Monet kipulaakkeet...". Pseudo title is still readable without the dotted letters, but is a bit funny. Once again, back to the drawing board...

The solution

Script cannot read blog posts without stats hits, but it can read blog feeds. Actually I did already something like this in my recent comments gadget: load the post feed and collect post url - post title pairs, to be later used to convert urls to post titles.

It is possible to read up to 500 entries at a time from the Blogger feeds. Most blogs aren't that big, so the limit of 500 entries will be most of the time sufficient. But one could easily add another line to the script to fetch entries from 501 to 1000. And as a fallback, if script did not get post title from feed, for reason or another, it creates a pseudo title from the post url (see previous chapter). Reading the feed entries might take some milliseconds, so the script is executed (0,5 seconds) after page is fully loaded, so it won't slow down page load.

Demo (this blog)

Installing the hack

This hack is quite easy to install, although it requires template editing. I use jQuery in this hack, mainly for simplicity (much easier to execute something at window load, select elements, etc.). So you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}

If you don't have Simple template, test and change styles if needed. Then find </body> and insert this code (just) before it:

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

Save the template, and the hack is installed!

Fine tuning Home link position

Home link is not centered on blog's front page, last page, newest post and oldest post. Add this CSS to center the link properly:

.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
#blog-pager {min-height:2em;}

Values work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works).


Hope you like this hack! It is installed for example in this blog.

Update June 8th 2012: Blogspot uses local domains (like "blogspot.fi") in next/prev links but not in feed. I added two lines to deal with this: lines 34 and 41 are new.
Update June 27th 2012: new version here.

URLtinyfy - a JSONP API for tinyurl.com, goo.gl, etc.

Shortened urls, of blog posts for example, maybe useful in some places (like Twitter). I started first making a hack for Blogger which would offer the reader shortened url(s) for the posts. I came across ggl-shortener and json-tinyurl, which could be used to make goo.gl and tinyurl.com short urls in client side (javascript). But these both Google App Engine applications suffer from overrunning quota, especially json-tinyurl, but sometimes also ggl-shortener.

I think they both simply forward every request to the url shortener services, which always results in url fetch call, and url fetches are quite limited per day in Google appengine. My hands were already itching to make a new appengine app and to excercise my new Python skills, and I thought I could do the url shorting a bit cleverer. And at least have (for my url shortener hack) a service that is not yet, hopefully ever, suffering from quota problems.

Presenting urltinyfy

So I created a new appspot app, urltinyfy, which offers more or less the same APIs as ggl-shortener and json-tinyurl, at least should be compatible. As a bonus there is also support for safe.mn, although they have their own jsonp API so it is a bit redundant. I also coded bit.ly support, but because it needs bitly API key, and they have own jsonp API, I left it out from the "production version". Safe.mn and bit.ly was mainly implemented because I wanted to see if and how it could be done.

My application uses memory cache, so if shortened url is already fetched, it is returned from the cache and no url fetch is needed. This should lessen the possibility to run out of free quota (of url fetches).

I have coded this entirely from a scratch, I have not used any code from ggl-shortener or json-tinyurl. I'm not sure if I'm going to publish the source code of this application, we'll see about that. :)

Parameters

url:  the url to shorten (best to be urlencoded). Only mandatory parameter.
callback or jsonp: the callback function, if jsonp is used
unify: if 1, json will include tinyurl and longurl fields for all services (easy to use, independent of the service), and will pass through title and callID parameters, if found

Usage

If you now use ggl-shortener or json-tinyurl, you should be able to switch to my app with minimal changes, by changing the urls in your javascript like this:

change http://ggl-shortener.appspot.com/?url=... to http://urltinyfy.appspot.com/googl?url=...
change http://json-tinyurl.appspot.com/?url=... to http://urltinyfy.appspot.com/tinyurl?url=...

As alternative "syntax", http://urltinyfy.appspot.com/googl?url=... is the same as http://urltinyfy.appspot.com/?service=googl&url=..., and accordingly with other services.

If you want javascript examples how to use this, do google searches for "ggl-shortener" and "json-tinyurl". I might use this in some url shortening hack later on.


Problems? Suggestions? Please leave a comment.

Thumbnail on main page, bigger image on full post

You may have seen those fancy templates, that display on the main page a snippet of the post's text along with a thumbnail of an image inside the post. Maybe you want something like that only from time to time, so installing a new template for that would be overkill and maybe constrains your other options. I will show you how you can do it with a little javascript or CSS for example in Simple template.

Trim Blogger popular post snippets right

I have done some "tweaks" for the popular posts gadget, and here's another cosmetic one. The gadget cuts the post snippet at a fixed character index, so it can cut words in half, which is quite stupid. It would be much better to cut the post text at a word break. This little hack I made does that, using jQuery.

Sometimes little things matter. :)

You can install this hack by adding an extra HTML/Javascript gadget in your sidebar, or paste the code to an existing gadget (the gadget must be after the popular posts gadget!). Or you can put this code in your template html, just before </body>. If you have my Shuffle or Shuffle and limit hack for popular posts installed, put this code in the same place, after that hack's code.

Data provided by Pastebin.com - Download Raw

You must have jQuery loaded in your page for the script to work. Script, installed also on this blog, won't cut the text smaller than 42 chars. Hope you like it.

Tip: By modifying the jQuery path '.popular-posts ul li .item-snippet' you can apply the same technique to other text-ill-cutting gadgets, too.