55 Profile Avatars for Blogger Comments - Updated Friday, September 18, 2009 /

Displaying avatars beside comments in our blogs has been a long anticipated feature. Today, the Blogger Team announced that this feature is now enabled for Blogger blogs, allowing us to see the profile image or avatar of those leaving comments on our posts:

Today we have extended embedded comments to display profile images next to the comments that your visitors write. Though profile images have been available with the other commenting options, we are happy to bring them to embedded comments as part of the Blogger Birthday feature series (via Blogger Buzz)

However, this feature currently seems available only to those using Blogger's default templates.

Update:  Soufiane of LeBlogger.com has kindly emailed me with a quick and simple solution for us to add the required code to customized Blogger templates! Details below.

For those of you using a standard Blogger template, you should easily be able to add comment avatars to your comment section with just a few clicks.

Here is what you should do:

1. Go to Settings>Comments in your Blogger dashboard, and ensure the "Show profile images on comments" setting is set to "Yes" (this appears near the bottom of this page).
2. Check a post page on your blog which has some comments to see if any comment avatars appear.
3. If no comment avatars are visible in your layout, go to Layout>Edit HTML in your Blogger Dashboard and click the "Revert widget templates to default" link near the bottom of the page. Warning - only do this if using a standard, uncustomized Blogger template!
4. After completing these necessary steps, comment avatars should now display to the left of comments on your posts.
   

How to add comment avatars to customized/non-standard Blogger templates

Soufiane of Le Blogger kindly emailed me details of the code we can add to customized Blogger templates in order to make comment avatars appear beside our posts (take a look at this post for the original details, in French).

It seems the method for us to use is far simpler than my initial impressions - we need only add two small sections of code to our templates in order for the comment avatars to function.

Here's what to do:

1. Go to Layout>Edit HTML in your Blogger dashboard, and ensure you check the "Expand widget templates" box.

2. Using your browser's search function, locate the following line of code (or similar):

<dl id='comments-block'>

Depending on your particular template, you may discover this is <div id='comments-block'> instead.

3. Replace this line of code with the following:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Note: if your template included div instead of dl, leave this intact and replace all other elements of the line instead.

4. Now, locate this line of code (usually a few lines further down, depending on your particular template):

<a expr:name='data:comment.anchorName'/>

Immediately before this line, paste the following section of code:

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

If you use an "author comment highlighting" hack in your template, you will need to search for a second instance of <a expr:name='data:comment.anchorName'/> and paste the code a second time.





5. Finally, save your template.





Now when you view a post page for which comments are enabled, you should see avatars beside the names of respective commenters!

How to upload an image for your commenting profile

If you choose to comment using your Blogger profile and do not currently have a profile photo uploaded, you can quickly add a photo while posting a comment.





To do this, write your comment as normal and click the "Preview" button. In this preview section, you will be able to upload a profile image which will be displayed instead of the default Blogger favicon:

To edit an existing profile image, go to your Blogger dashboard and click the "Edit Photo" link beside your current profile image. This is the image which will be displayed beside comments posted on Blogger blogs for which this feature has been enabled.

Notes on Blogger's Comment Avatars so far...

Here's a few observations about the new comment avatar function, which may offer some insight into how this currently works:

Whose avatars will be displayed?

At present, comment avatars are only enabled for those using their Blogger/Google profile for their identity. Those who use the "Anonymous", "Name/URL" or other options when commenting cannot yet have a profile image displayed.





When using OpenID, Wordpress, LiveJournal, Typepad or AIM, the OpenID favicon will be displayed instead. Those commenting anonymously or using the "Name/URL" option will have no image displayed.





Of course, there is every possibility that the Blogger Team may soon, enabling those using other methods of identifying themselves when commenting to upload a profile image for display.

Can these profile images be styled differently?

It is certainly possible to style the way comment avatars appear in our blogs. Style may appear inline, as can be seen in the default implementation of this upgrade:

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>

It is also possible to style these images by adding declarations to the <b:skin> section of our templates using the following classes:

• .avatar-image-container - the overall container in which the profile images are housed
• .avatar-image-container img - to style the actual image, using borders, padding, background-color, etc.
  
  

I'll experiment with this in more detail over the weekend, particularly with reference to comment identities for whom avatars cannot be displayed (yet), and will post full details as soon as possible.

Avatars load after other content on the page

The script used to display the avatars on post pages is set to load after other content on the page. This may mean a few seconds' delay between the initial page load, and the avatars appearing beside comments.

What do you think of this new feature?

I am very happy that we are now able to display avatars beside our comments, but still feel there is room for improvement, particularly as those who do not have a Google account are unable to display their profile photo. I hope that in the future, the ability for anyone to upload their photo will become possible (or that at least a generic image could be displayed instead).



After I'd mentioned this on Twitter, I discovered some rather mixed reactions to the news - many complained that this feature should have been implemented far sooner, or expressed their preference for using Disqus comments instead.



So what's your opinion? Will you use this new function in your own Blogger blog(s)?



Please feel free to tell us your thoughts by leaving your comments below.