Blogger added comment authors' avatar (profile image) urls to comment feed in earlier December. 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:
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.
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 [dateformat]. [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:
Styles for 24 (and larger) avatars:
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.
- 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.
- 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.
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 [dateformat]. [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:
1
2
3
4
5
6
7
8
9
10
11
12
| <style type="text/css">.recent-comment { margin-bottom:10px; padding-left: 28px; }.recent-comment-admin { background-color: #F4F4F4; }.recent-comment-ico { margin-left:-24px;margin-top:4px;margin-right:3px;float:left;}.recent-comment-header {}.recent-comment-body { padding-right: 4px; font-size: 95%;}.recent-comment-footer { font-size: 85%; }</style>...var sizeAvatar = 20; |
Styles for 24 (and larger) avatars:
1
2
3
4
5
6
7
8
9
10
11
12
| <style type="text/css">.recent-comment { margin-bottom:10px; }.recent-comment-admin { background-color: #F8F1DF; }.recent-comment-ico { margin-left:3px;margin-top:3px;margin-right:3px;float:left;}.recent-comment-header {}.recent-comment-body { padding-right: 4px; font-size: 95%;}.recent-comment-footer { font-size: 85%; }</style>...var sizeAvatar = 24; |
May be this doesn't works with IE7 ,one of my friend said.
No comments:
Post a Comment