Son of the better recent comments gadget

Here is the newest version of my recent comments gadget (here is the previous version). Previous version still works, so if you have it installed, you don't have to update if you don't want to.

What is new?

Earlier this month Blogger added comment authors' avatar (profile image) urls to comment feed. This new version uses those urls to get the avatars, instead of using my google appengine application to get avatars from profile pages, as the previous version does.

As an added bonus in this new "Son" version, avatar size can be adjusted easier using a configuration variable, and I give you two additional CSS styles for the gadget.

Features of my recent comments gadget

You can configure:

• number of recent comments displayed
• max number of comments per post (so one post's comments don't "flood" recent comments)
• length of comment excerpt
• translation or own version of gadget's texts
• customize what is displayed.

Also:

• blog author's comments can be styled differently (CSS)
• display comment author's site favicon, comment author's Blogger profile image, or mystery man icon (configurable) for non-registered commenters
• does not have the bugs the recent comment gadget that Blogger offers has.

The newest version, "Son of the better recent comments gadget", adds the following new features:

• loads Blogger avatars (profile images) using the new avatar urls in comments feed
• avatar icon size can be more easily configured
• three CSS examples for different size avatars.

The Script

Add a HTML/Javascript gadget to your blog, and paste the following code into it. If you had previous version installed, replace it with this, and make the same configuration changes you made to the previous version. I'm sorry that there is no automated upgrade, but this is no rocket science, I'm sure you can do it. :) Know your way around.

Data provided by Pastebin.com - Download Raw

Script configuration

There are some CSS definitions at first, which can be changed to your liking. After that there comes javascript code and configurable variables. Here is a list of the variables and a short explanation.

numRecentComments: how many comments you want displayed
numPerPost: how many comments per post max is the goal (will fallback when necessary)
maxCommentChars: how many chars max in excerpt of comment
maxPostTitleChars: how long post title can be, or 0 (=don't cut title)
txtWrote: header text, links to comment
txtMore: footer text, links to comment
txtToolTip: text to be shown when mouse hovers over comment
txtAnonymous: "Anonymous" username localized, or empty if English text "Anonymous" is to be used
getTitles: if true, fetch titles from post feed; if false, titles are generated from url
trueAvatars: if true, uses Blogger avatars (Blogger profile images) from comment feed, not just the blogger favico [B]
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image
urlMyProfile: if you don't have a profile gadget on page, put your profile url here!
urlAnoAvatar: anonymous avatar, you can change from mystery man to a custom one, if you want, possibly this
maxResultsPosts: can be empty or &max-results=### where ### is number of posts to get from posts feed to get titles
maxResultsComments: empty or &max-results=### where ### is number of comments to get from comments feed

New configurable variables in "Son"

cropAvatar: crop avatar to square (true) or stretch (false) to square
sizeAvatar: size of avatar in x and y direction, pixels
urlNoAvatar: comment feed offers the icon (Blogger logo) for those Bloggers who have not set their profile image. You can override the icon with this setting (default: ).

txtWrote, txtMore and txtTooltip

These can be just normal text. If txtWrote is normal text, it is preceded by commenter name. So if txtWrote is "wrote..." the result would be Jason wrote..., if Jason was commenting.

All texts can also have simple variables, which are: [title], [user], [date], [time], [datetime] and [date format]. [title] is substituted by Post title, where comment belongs. [user] is substituted by commenter name. [date] displays date in current (user's computer's) locale, [time] displays time and [datetime] date and time in user's locale.

format in [date format]

In format some character combinations are substituted:

yyyy=long year, yy=short year, MM=month(01-12), dd=monthday,
hh=hour, mm=min, ss=sec (time/hours in 24-hour clock)

but format can contain also other text/characters (which are displayed as is).

"Written [date MM/dd/yyyy hh:mm]" could become "Written 11/03/2011 08:30".

Again, the script has good configuration defaults, so if all this was too complicated for you, you don't have to care about it. If you don't have a profile gadget on your page, put your profile url in the code I provided, and you're ready to go. If you have a profile gadget, then you don't have to change anything, just copy and paste.

Styles for different avatar sizes

Default size for avatar is 16 pixels. If you change, the CSS might need some adjusting. In the picture in the beginning of this post there are three examples, first the default (16 pixels), then 20 pixel avatars, and then 24 pixel avatars.

Styles for 20 pixel avatars:

...

var sizeAvatar = 20;

Styles for 24 (and larger) avatars:

...

var sizeAvatar = 24;

This gadget is installed on this blog with 16 pixel avatars. My MS-potilas blog has this gadget with 20 pixel avatars.

If you set the urlNoAvatar, you might want to change the icon also in the comments block, where the actual comments are (below the post). I have a hack for that, too, see: Use new blank Blogger profile picture in comments.



Problems in Internet Explorer?

By default many Blogger templates have set Internet Explorer to use EmulateIE7. IE7 emulation has some bug with blog feeds in foreign languages that can make the gadget not show properly. You can fix this by editing the template, find line:

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

(or something similar with text "EmulateIE7"), and change it to:

<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 124 is modified and line 131 is new.

June 6th 2012: Optional hack: If you don't want to show your own comments in recent comments, check this hack.

August 1st 2017: To fix avatars, please change lines 157 and 158 (article code is updated).