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)
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:
- 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).
- Check a post page on your blog which has some comments to see if any comment avatars appear.
- 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!
- 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):
Depending on your particular template, you may discover this is<dl id='comments-block'>
<div id='comments-block'> instead.3. Replace this line of code with the following:
Note: if your template included<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
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):
Immediately before this line, paste the following section of code:<a expr:name='data:comment.anchorName'/>
If you use an "author comment highlighting" hack in your template, you will need to search for a second instance of
<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>
<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:
It is also possible to style these images by adding declarations to the<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
<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.
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.




90 Comments:
great work for blogger team :)
Hi Amanda,
I have sent you an email, and to show u how i get this working on my blog, just chek it : LeBlogger
I try it with three Templates.
Nice job Amanda! :D
The DisQus system is also a great alternative if you don't want to really hack into your code.
Thanks for the update Amanda! I'm using the embedded below post again and is working again on my blogs.
Thanks for the head's-up! Any chance these lovely avatars might be integrated in your "recent comments" gadget?
Very good post!
Thanks Soufiane, I'm updating the post now =)
Thanks Amanda!
Thank you Amanda for the Links, you are very nice thank you.
My blog template not using anchorName attribute. How the solution?
Hello
I tried that and found the first sets of codes in my template but I was unable to find these sets of codes:
<a expr:name='data:comment.anchorName'/>
is there any other similar sets of code ???
thanks !
Instead of data:comment.anchorName'/>, I had to insert the rest of the code before this:
a expr:href='data:comment.authorUrl' rel='nofollow'
data:comment.author
To get this comment to post, I had to remove some of the html code, but look for something like the above.
very nice.......
They could have enabled Gravatars too.
wow.. long live Blogger.com !!
If you found <dl id='comments-block'> and not <a expr:name='data:comment.anchorName'/> you have just to add the last code anywhere within the comment loop (also below the first dt tag), just be careful not placing it between a b:if condition.
Example,
just after <dl id='comments-block'> there's a line of code that looks like this: <b:loop values='data:post.....> You can add the last code just after it.
Finally it would be something like that:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post..........'>
<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>
Thanks blacklin
and Soufiane LeBlogger!!
Both the codes worked perfectly in my Template, without effecting my existing settings of "highlighted Author Comment"
Thank you !!
To replace the blank space for Anonyous comments with a 35x35 image, i added these lines of CSS (for example, just before ]]></b:skin> ):
/* Avatar */
.avatar-image-container img {
background:url(http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/LeBlogger.jpg);
width:35px;
height:35px;
}
(This will resize the small favicon (from 16x16 to 35x35) displayed for OpenID, Wordpress, LiveJournal, Typepad, AIM, the OpenID...)
I've just followed the update step by step and it's still not working :/ If anyone could help me figure out what I'm doing wrong it would be very much appreciated!
My blog works perfectly now!!
Awesome job Soufiane and Amanda!!
too late...
A new comment form with Name/Email/Website and Gravatar support would have been better!
Thanks a lot,It's very helpful to me.
Verry nice Amanda.. I Have a Question, How to make "New Windows" if somebody click on link Avatar..? Thanks
Thanks for posting this! I was wondering why it wasn't working on my blog but now it does. Thanks!
@Trixi - I agree with you on that!
Thanks for the thorough post. I implemented the feature immediately. It's great but something has to be done to get profile pictures AND email addresses coming through from Open ID accounts. Most of my commenters these days are not on Blogger so my avatars look pretty lonely!
Great! Worked on my blog. Thank you Amanda.
This is a great idea, many great blogs have had this feature for some time using Gravatar.
The improves the quality of Blogger a great deal.
Thanks for the heads up on this.
Thank you Amanda.
And thank you Soufiane LeBlogger for explaining it for us who has customized templates and not that exact code. I do appreciate it.
Hi Amanda! Another first-time granddad present for me! It's up and running and it's just awesome! Thank you to you and to the blogger team! The only adjustment I made was to change -2 to -1 to bring the avatar up a fraction.
thanks for share
I was surprisd when my non-blogger template was showing Avatars. Gr8 work.
Amanda, looking fwd to ur customizations too.
This is cool, I have this feature in my blog already. I hope Blogger also enables threaded comments.
BUt it does'nt show images when you comment with your name/url, you need to comment with your google account. but it's nice anyway
Hi All, there is Atutorial about customizing blogger avatart at AllBlogTools.com And max mentioned amanda and leblogger in the post
Just click On my name.
thanks a lot amanda, this is exactly what i'm looking for :D
.
just tasting it. it works or not??
Amanda, I've try both of them (with bloger default template and customized one) like mine and nothing happened.. Also with Soufiane way, it doesn't work with my blog.. I'm sorry
It worked great! Thank you for the tutorial.
i am still not impressing with this feature :(
Could you post about "add comment avatars for classic template"?
it worked for me kind of thanks to the custom template fix but it only works for those who have a blogger account.
there is no option to upload a photo or anything after I edited the template with this fix. any suggestions?
Great post.
It's a fantastic feature.
I'm glad to know that this feature has been enabled in Blogger. While Gravatar has already made it possible to view your profile from a comment, Blogger had been lagging behind in terms of this feature.
Thank you, Amanda.
It works like a charm!
Angie's Recipes
there's no data:comment.anchorName in my template :(
Awesome! I loved it!
i love you full INDONESIA!!!!
by fuckeeh soft.
Thank you dude.
I am going to make use of this feature
But i have a doubt with numbered page navigation it does not work in my blog
Thanks for this, appreciate it.
I've tried implementing it - with the slight twists that Le Blogger noted due to the lack of Anchor. However, no pictures are coming through. I'm wondering if it's due to the base template (Isolation from OurBlogtemplates.com) that I'm using does funky stuff with the comments.
Is there a sample of what a customized comments section (in whole) should look like? Or direct tips on how to fix mine would be awesome too. Thanks! :)
On Internet Explorer only, I'm seeing blue rectangles with curved corners behind the avatars (and blocking the name of the comment-writer). On all other browsers, it looks fine. Is this something I can change in the code?
One example:
http://collectededitions.blogspot.com/2009/09/review-batman-whatever-happened-to.html
Any suggestions?
there's a trick to add avatar for "Anonymous". add below css code
.avatar-image-container {background: url(http://putyouravatarimagelinkhere) no-repeat;}
Comments was the most important reason I moved to wordpress
thanks 4 tutorial, I like this...
but if u can display enable the "Anonymous" and "Name/URL" when commenting, I so very happy.
thanks..so nice...
Doesn't work for me I followed Soufiane LeBlogger's advice for templates using the comment loop function and it didn't work. I'm wondering if its because of the theme I'm using. I use the Zinmag Remedy template but it doesn't show the user's avatars:
http://www.falconhive.com/2009/02/zinmag-remedy-20.html
Great post! Thanks!
I've noticed that if you changed your user name or avatar at some point, it shows the old avatar in some of the comments...
Lille Skvat
http://lilleskvat.blogspot.com/
nice job, thanks
this is smashing. I'm incorporating it into my blog right away
It have been 7 days now my Avatar is not displayed on my blog and any where I comment.....
Blogger Team:
Some profile images are failing to display on embedded comment forms with many comments. We're looking into this and will reply with and update shortly.
Thanks for your patience.
Hi! There appears to be a problem with this as the avatars for most of your commentators are showing the anom avatar. The error coming up is:
'undefined' is null or not an object
4222249892-widgets.js
Code:0
URI: http://www.blogger.com/static/v1/widgets/4222249892-widget.js
I'm using internet explorer on vista, does this error appear on other browers?
Take Care,
Peter
This actually works . Thanks for the hack.
For Demo Visit : http://alanwarez.blogspot.com/2009/07/wanna-post-for-alanwareztk-become.html?showComment=1255974667574
Thanks for bringing this to us, however I couldn't get this hack to work on the "Planet play template". I would be grateful if you could find a solution. Thanks in advance.
do you know why blogger only shows the first 5 comments avatars?
I hope you understand... my english is bad.
i tried it
but nt succeded
it doesnt displays option like "upload a photo"
i tried it in
wwww.nanoguns9.blogspot.com
this code not available on my template plz help me!!
a expr:name='data:comment.anchorName'
www.onlinekhaskhas.blogspot.com
i try to MINIMA template, but the second line to find doesn´t exist.
gread .. i will try it
thanks amanda, this is very nice info
Hi,
My question is not about customizing comments, it's about customizing posts.
How can I reach to have the author's name of the post at the beginning of the post but not at the end?
Here's our blog: http://ent-house.blogspot.com/
I think the best one is to have the name just under the title, but I'm interreseted in anything else :) (name above date, or name between date and title, etc.).
There is an option in Layout -> Editing modules to move the author's name under the title, but it didn't work... :(
Thank you for answering!
I tried it but it only shows avatars in the firt few comments. Is there a way to fix it?
Good...
Hopefully this works! Noipe, tried the preview comment thingy to add my avatar but that image upload option did not appear :(
thank you very much my friends, I will try on my blog
I got the avatars to appear, but the solution for "Anonymous" avatar images that Soufiane LeBlogger offered didn't do anything.
Hi Amanda,
Its not updating. Iam using arthimenia theme
in my blogger page (www.marketcalls.in) How do
I know that Profile Avathars supports my theme.
If so how to implement it?
great tutorial... I have implemented it on my blog :)
Is there a way where a default avatar be shown for comments without avatar? Please reply on our Facebook page http://bit.ly/untiybond-facebook
Thanks! our blog is http://unitybond.blogspot.com/ and we did use some resources on your blog and we do provide link back :)
Comments in Blogger is developed too .
دانلود و اینترنت و نرم افزار و سخت افزار و برنامه موبایل و آیفون و آموزشی و بازی و سرگرمی و فیلم و کارتون و موسیقی و کتاب الکترونیک و دایرکتوری سایتها و انجمنهای گفتگو و فروشگاه اینترنتی و ارس پورتال و arasportal
www.rasportal.com
works great!! Thanks friend ...cheer...
Thanks Amanda.. and Soufiane too of course..
nice artikel
i should try this
sory poor english
Thanks!
Is there any chance that a user may upload pictures in his comment for a particular post. E.g. the topic is about sharing their photos. I dont like to add administrators on it and would love if commentators can easily upload pictures to every post category I have.
Thank you and hoping for your response.
Thanx, appreciate that theme.
great post n thx...:)
Thank you! I have been looking all over for a fix for this!
THANK YOU SO MUCH. I'm successful in doing it
Post a Comment