---
Just few days ago I made a javascript gadget for Blogger that displays recent comments similarly to the Recent Comments in Gadget directory, but better. Also has some extra functionality, and bugs fixed, of course.
I did not stop there, I now present the newest "Return of the Better Recent Comments". Who would not like to have recent comments like these two examples? (right one is in Finnish, from my MS-potilas blog)
Features
- all options and features that my previous version had
+
- displays either anonymous (mystery man) icon, site favicon or blogger profile icon
- you can customize "header" and "footer" and tooltip text
- your (blog author) comments can be displayed differently (CSS styling)
- more options to make this suit also bigger blogs
- I think I forgot something...
To get the blogger avatars, I had to make a Python app with Google App Engine (here is the newer, current version), because it is not possible to get them by only javascript. Blogger avatars can be turned off to make gadget run faster, site favicons will then still be used (for example, B icon for Bloggers).
Here is the code. You can put this in HTML/Javascript gadget.
Configuration
There is some CSS at first, it can be changed to your liking. After that there comes javascript block and configurable variables. Here is a list of them 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: fetch titles from post feed; if false, titles are generated from url
trueAvatars: fetch blogger avatars from profile page, not just blogger favico
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image. A bit faster, if set.
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
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
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".
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 the 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.
As usual, the gadget is installed on this blog.
Note: If you install this on a very high traffic blog (thousands of hits per day), I suggest you to make your own Google App Engine application to get Blogger avatars (see this article), as I'm using the free version and it might get slow on heavy load. I don't know if it will, we'll see. Or if it gets slow, just turn Blogger avatars off (trueAvatars = false), or use the newer version, which does not use the App Engine application.
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 Dec 29th 2011. Newer version here: Son of the better recent comments gadget.
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 121 is modified and line 128 is new.
Post Comments (Atom)
Click on a single comment to hide/show its text
18 comments:
Dear MS-Politas, I've just installed this gadget for my blog, and it works very fine in FireFox, but doesn't appear in Internet Explorer. However, in your blog it appears also in IE. So I think the problem is with the template file of my blog. I'm not an expert in it, so I would like to ask you to look at the source code, perhaps you can find easily the problem.
Additional note: Default template configuration of blogger templates is set to "EmulateIE7" mode, as in your blog, too. When I change it to "EmulateIE8" or "EmulateIE9", however, the gadget appears.
Thank you, greetings from Hungary. ;)
@El Mexicano
Hi, thank you for your message. I just replied to you on the Blogger forums. Your problem is really strange, as the gadget works on my blogs with IE9 (in IE7 mode, others also). I think that maybe the feed contains something that IE9 in IE7 mode chokes, my feeds does not.
If you want to keep the gadget, I suggest you change in your template html the EmulateIE7 to EmulateIE8, as IE8 mode seems to work fine on your blog.
I think Finnish and Hungarian are language relatives. :)
One update while testing on IE (IE does not construct date objects correctly from ISO 8601 dates). Changed line:
var cmtDate = new Date(entry.published.$t);
to:
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
Without this change IE will show NaN where it should show date or time.
(I've updated the source code in the article)
@MS-potilas
Thank you very much, then I'll do it as you recommended.
And yes, you are right, Hungarian is related to Finnish, though we don't understand each other's language, because there are some thousands of years between their separation. :) Unfortunately, a large number of Hungarian people deny the Finnish–Hungarian language relationship (they want to believe that we are descendents of an Ancient Turkic language, the Hunnish, because it sounds better for them), but these people are not linguists neither scientists, just activists who think of themselves to know all the truth of the world (of course these people cannot be taken seriously, as linguists have proved that Hungarian belongs to the Finno-Ugric branch of Uralic family).
@El Mexicano
Done, and it works super. By the way, just one more question about some fine-tunning... I configured the date format for the Hungarian standard, "2011. 11. 6.", but is it possible to display the day in a two-digit format, like "2011. 11. 06."? I think our standard requires a "0" digit before, if the day or month number is just one digit. Thanks!
@El Mexicano
To have the always 2 digit day numbers, just find line:
txtDate = txtDate.replace("dd", date.getDate());
and replace with:
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
If you want the hours to have a preceding zero when needed, too, find:
txtDate = txtDate.replace("hh", date.getHours());
and replace with:
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
One possibility could be also to use [datetime], which formats the date according to browser's locale settings.
Your feedback has been valuable. The date feature in the gadget was a quick and late addition, and while implementing it I just thought of scandinavian and English representations of the date (with numbers). Now after reconsideration, I think the two digit forms are better by default, and I changed the source code accordingly. User can still choose the 1-2 digit form instead of 2 digit form, if wanted, by uncommenting two lines.
@MS-potilas
Thank you very much, I'll try it at home.
@MS-potilas
Now it's almost perfect, just one other suggestion. Presently, if an anonymous user posts a comment, the gadget will put "Anonymous" in English, so I would suggest to add a translation variable, like "varAnonymous = '(translation)';" to the CONFIG block, what do you think about it?
@El Mexicano
Great suggestion! That really was missing from this gadget, how did I not think of it... glad you did, thanks!
And easy addition... find line:
var txtTooltip = ' ... (your translation here)
and after it, add line:
var txtAnonymous = 'Névtelen';
You can use the translation you want. Then find line:
avaimg = urlMyAvatar;
and after that add two lines:
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
I updated the code in the article, the new lines are lines number 23, 165 and 166, you may want to check there the right positions.
@MS-potilas
Great! Thank you very much, kiitos!
WOW...
your blog full stylish my friend :)
and interest article ;)
nice to meet you from Beben Koben si bloglang anu ganteng kalem tea \m/
I'll promote your blog, coz your explained tutor about blogger :)
I wanted to let you know that you can make the installation of this widget even more automated for people by using the Add Widget API. The details are here:
http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=53219
and a demo page using it by Blogger is here:
http://blogger-add-widget-demo.appspot.com/.
You can use <textarea> tags, too, instead of input tags like this: <textarea name='widget.content' style='display: none;'>Your widget code</textarea>
Just be sure to turn off auto-line breaking on the post or the page if you do use a textarea to store the code on the page or when they push the submit button for the form, every line will get a <br/> added to the end of it! Also, everything in the textarea must be HTML encoded (no less than or greater than symbols, etc.).
And good job on bringing it all together like this!
@Aratina Cage
Thanks, I've seen automatic installation in some sites and wondered how they do it. Thank you for providing this information and details.
If you want, and still work on your recent comments gadget, you can use my avatar fetching service in your gadget. Or if you want all the code to be yours, then you can copy the idea and write your own. My avatar fetching code is not perfect: if user has disabled profile page, then I don't know how to get profile photo in any easy way. One idea is to cache the profile photo from post/comment page, but quite complicated... Well, fortunately, not so many Bloggers disable their profile pages, those who do, get now the [B] icon.
Hey dude, thanks for the great gadget. It's much better than the default blogger one and is now implemented at my blog.
So I just thought I'd say, Kiitos!!
@MS-potilas
Thank you! I just might try incorporating it in my gadget someday then, with full attribution of course. I'll let you know if I do. Likewise, if you need anything from me, feel free to ask.
@Shaun Hotchkiss Thanks, great you like it :)
thank you very much...this is really great...it works on my blog... :D
great work on my web
www.androidsite.in
See the hack to make the 'Post a Comment' link bigger.
Post a Comment