Use new blank Blogger profile picture in comments

Blogger profile pages used to be like this (sample from Blogger documentation):

Profile pages changed to something like this a month or two ago:

If user hasn't set a profile image, then the "avatar blue" image is shown instead, like in the picture above. But in blogs' comments section, these users' avatars display the icon, not "avatar blue". With this little hack you can change these users' avatar icons in your blog's comments.

Blogger icon → avatar blue
First I suggest you install avatar for anonymous commenters, so you will have the avatar size right, and also mystery man for unregistered commenters.

Open your blog template html, edit widget templates. Find the widget block that begins with the following line:

<b:includable id='comments' var='post'>

Then find this line that ends the comments includable block:

</b:includable>

If you want the jQuery solution, insert this before </b:includable>:

<script type='text/javascript'>
//<![CDATA[
$("#comments-block img[src$='http://img2.blogblog.com/img/b16-rounded.gif'][width$='16']").attr("src", "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s37/avatar_blue_m_96.png");
//]]>
</script>

(Double click to select for copying.) If you use jQuery, you need to have jQuery loaded somewhere in your blog's template page. Or if you want the non-jQuery solution, insert this before </b:includable>:

<script type='text/javascript'>
//<![CDATA[
if(document.getElementById("comments-block")) document.getElementById("comments-block").innerHTML = document.getElementById("comments-block").innerHTML.replace(/http:\/\/img2\.blogblog\.com\/img\/b16-rounded\.gif/g, "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s37/avatar_blue_m_96.png");
//]]>
</script>

(Double click to select for copying.) Choose either, don't use both. "Avatar blue" image is uploaded to my Picasa web album, so different sizes can be fetched easily. This hack goes nicely with my recent comments hack, which is also able to substitute the icon with the "avatar blue".

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).

Christmassy Concentration Memory Game

If your blog's readers celebrate christmas, why don't you publish them a nice memory game to play on holidays? I tidied one javascript game a bit, made it work on Blogger and also on dynamic views, worked even in a Feedburner feed. With christmassy pictures it looks like this:

Free JavaScripts provided by The JavaScript Source

If you do it under 1:30, that's quite good.

Here is the source for the game. This can be put in a blog post (use html editing mode), a blog page, or some other html page. Probably works in a html/javascript gadget, too. If you wish, upload another set of pictures, and change the image path in the source to use those pictures. Have fun.

Data provided by Pastebin.com - Download Raw

Comment feed has now Blogger avatars

I added avatars to my recent comment gadget using a helper application coded in Python. Blogger has updated its feed format now in December 2011, and comment feeds now include also author avatars (author images) for Blogger users. The update is of course because of the dynamic views – I think everything dynamic views can display comes from feeds (unlike in the "traditional" blogger views).

This is great, and at the same time, will render my avatar fetching application pretty much obsolete. Although it will still work.

I found out about this feed update reading Aratina Cage's Last Comments blog. There's some impressive work, I recommend to check it out: very versatile recent comments gadget, and the new InComm, which looks great.

I will later modify my recent comments gadget to use these new author images from feed, instead of the Python app, and will then post the new version. Stay tuned.

Shuffle and limit popular post gadget post count

First look at these two previous articles about customizing popular posts gadget:

Shuffle Blogger popular posts and
Excluding specific popular posts in Blogger.

If you exclude posts from popular posts gadget, then you don't have exact count of popular posts – the count depends on how many excluded posts were in the list.

With this hack you can shuffle and then limit the count of popular posts. If you already have installed the shuffle hack, replace it with this code. You can put this code in a HTML/Javascript gadget, or in html template before </body>.

Data provided by Pastebin.com - Download Raw

This hack is installed on this blog, I use 10 popular posts, from which I exclude the current post user is viewing, and some others. Then the list is shuffled and limited to 8 entries. Modify the popcount variable in the script to get a different amount of posts. In my MS-potilas blog I use five popular posts, picked from ten posts minus some possible excluded posts.

Lazy load YouTube videos

Update Feb 26th 2012: new version here.

YouTube videos are easy to embed, and they may enrichen your blog. You may want to give user a wide selection of videos from which to pick the interesting ones.

But the more you have videos on your page, the slower it loads. Every video is hosted in an iframe, in which a flash from youtube is loaded, and flash loads the default picture for the video. For one video, it does not take too long, but for 20... Also, this consumes browser and flash plugin memory quite a lot.

I found this article about Lazy Loading Video To Speed Up Your Web Page. Using these ideas as a start and wanting to simplify the process (taking screenshots - too laborious), I developed my own "lazy loader" for single YouTube videos, to be used in my MS-potilas-blog. And the pages load now much faster, especially the labels which contain videos. This solution is not limited to Blogspot blogs, but can be used anywhere. Here is a jsfiddle based on this code for testing.

Nowadays the new YouTube embed code looks like this:

<iframe width="420" height="315" src="http://www.youtube.com/embed/eS67OxC_UN0?rel=0" frameborder="0" allowfullscreen></iframe>

Resulting this (normal YouTube embed):



Using lazy loading

So let's speed up our page load time. Once the lazy loading script is installed, to use lazy loading, use this kind of code for a video instead of the iframe code:

<a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=3u8sEaohHMk">Jean Sibelius: 3rd Symphony, 1. Allegro Moderato</a>

Result (lazy loading):

Jean Sibelius: 3rd Symphony, 1. Allegro Moderato

or if you wish other size than default 560 x 315, do like this:

<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>

Resulting this (lazy loading):

Mozart Fantasy in C minor played by me

If you are lazy, too, and converting a lot of old youtube iframes to lazy loading links, you can also use the "youtube embed url" directly in the href, you don't have to convert it to "youtube watch url".

Default width is 560 pixels and default height is 315 pixels. You don't have to use style parameter, if you use the default size. Width and height can be copied from the embed iframe code to style parameter.

Use a descriptive text inside the link (artist, song name plus maybe (m:ss) length of the video), whatever you like. You can use a text in your own language to describe the video. If you use line break in the link text, start consecutive lines with &nbsp; to get consistent indenting.

If lazy loading code does not run for some reason (javascript disabled) or there is some error (script not installed?), then links to the youtube videos are shown as a fallback. Also in dynamic views only the link is shown. When script is run, link background is set to default image of the video, and a play button div is dynamically created over the link element. Script uses two external semi-transparent images, play button and an active (hover) play button.

When user clicks the link with the video image, the link is replaced by the iframe code, flash is loaded, and then video starts to play.

Here's another demo page (besides this post) with many videos: 11. joulukuuta.

Installing the lazy loader

Edit page/template html. Check, if you have jquery loaded (try searching for "jquery"). Find </body>, and paste this code just before it (leave out line 1, if you already had jquery loaded):

Update Feb 26th 2012: new version of the script here, you should consider using it.

Data provided by Pastebin.com - Download Raw

Embed parameters

If you want to have parameters in the embed code, just put them into href, like this:

Bach Contrapunctus I from the Art of Fugue, played by me<br />
<a class="youtube-lazy-link" style="width:560px;height:410px;" href="http://www.youtube.com/watch?v=bETMzZhunDI&rel=0&color=white&theme=light&showinfo=0">Bach Contrapunctus I from the Art of Fugue, played by me</a>

Resulting (lazy loading):
Bach Contrapunctus I from the Art of Fugue, played by me
Bach Contrapunctus I from the Art of Fugue, played by me

If you use showinfo=0, the script hides the link text. It is still good to use the link text, in case the script does not run for some reason, and for dynamic views, maybe for feeds, too.

Reference: YouTube embedded player parameters.

Feedback?

I'm very satisfied how the script works and how it speeded up my main blog, but could it be made simpler or somehow better? If you know jQuery, CSS, DOM, and have ideas for this lazy loading script, please leave a comment. Or if you have artistic skills, the transparent play png images don't look exactly the same as in YouTube... although images I use are quite good, they have smoother edges than YouTube's, even better than in YouTube? Share your thoughts.

I tested this with Internet Explorer, Firefox, Chrome, and Opera. Should work on other jQuery compatible browsers, too. CSS parameter background-size is not supported by all browsers, but the result looks also good on those browsers that don't.

Excluding specific popular posts in Blogger

Popular posts gadget is great. But sometimes it might display entries, that you don't want to advertise (anymore). For example, some post made for testing may be popular, but there is no need to show that to users. Or you might have an old and a new version of some article in the popular posts, and you don't wish to display the old one.

When editing your blog template, you should know you way around to not to break your blog.

To exclude posts, first write down the urls of the posts you want to exclude from popular posts. Then edit template html, expand widget templates, and find:

<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>

Just after those lines add one line per post to be excluded, a line like this:

<b:if cond='data:post.href != &quot;http://yabtb.blogspot.com/2011/09/dummy-post-8th-post.html&quot;'>

Then find (in the same popular posts code block):

      </li>
      </b:loop>

Between those two lines, put one:

</b:if>

for each excluded posts, so if you exclude 3 posts, put 3 </b:if>s, like this:

      </li>
</b:if>
</b:if>
</b:if>
      </b:loop>

I have omitted the indentation of the added lines in purpose, so they "stand out" better and can easily be spotted and edited.

Excluding the post that user is currently viewing

Find:

<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>

After that add:

<b:if cond='data:post.href != data:blog.url'>

And add one </b:if> after the </li> line, like in the previous chapter.

You may want to shuffle the popular posts, too. Or maybe shuffle and limit the post count to certain number (like a random set of five posts from the ten most popular minus currently viewed post) – maybe more about that later.