Monday, November 2, 2009

Add Profile Images to Blogger Comments

Today I will show you how easy it is to have Blogger (Blogspot) display profile images in the embedded comments section of your blog even if you are using a custom template.

About a month ago Blogger announced that it was enabling profile images (profile avatars) in the embedded comments section on Blogger (Blogspot) as part of its 10th birthday feature series. The new profile image feature which has been available on other commenting options has now been extended to the embedded comments option. This is good news if you are using a default template as you will now see a small avatar next to your visitors comments and your own avatar if you have uploaded a profile image.



Default Blogger Templates - Enabling Profile Images
Profile images work on default Blogger templates and have been automatically enabled by Blogger. If you are using a default Blogger template with embedded comments enabled and have recent comments on a post you will see a profile image to the left of visitor comments (provided they have uploaded one that is). Your profile avatar will also display when you respond to visitor comments again provided you have uploaded one. (To upload your profile photo click on Add Photo at the Dashboard). If profile images are not displayed enable them by going to Settings > Comments and checking the Yes radio button at the bottom of the page which says Profile Images Enabled.

Custom Blogger Templates - Enabling Profile Images
If you are using a custom template you may still be able to see profile images in your embedded comments section. Check out Settings > Comments to make sure Profile Images are enabled. If you can't see profile images you can still add this feature by tweaking your Blogger template. Follow the instructions below to have Blogger display profile images in the embedded comments section of your custom Blogger template.

Add Profile Images to Comments Section of a Custom Blogger Template
If you are using a custom Blogger template you can use the following method to add profile images to the embedded comments section of your Blogger template.

  1. Login to Blogger if not already logged in

  2. Go to Design > Edit HTML

  3. Back up your Blogger template as a precaution by downloading the full template to your computer

  4. Expand Widget Templates by checking the box on the right hand side

  5. Find the following line in your Blogger template by using CTRL + F:

    <dl id='comments-block'>

  6. Change the above line to the following:

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

  7. Scroll down a few lines and find the following line in your Blogger template:

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

  8. Directly before the above line paste the following code block:

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

  9. Click Save Template

  10. Click View Blog and navigate to a page with commenting to see avatars next to comments in the embedded comments area


Tips and Troubleshooting
  • If you have added the author commenting highlight hack to your Blogger template there will be 2 instances of the code at Step 7 to change

  • If your template does not have the code mentioned in Step 5 and Step 6 check that dl has not be replaced by div. In this case leave the div as is and replace the rest of the code in the line.

  • Blogger has only enabled profile images for Blogger and Google profiles so if your visitors comment using identities such as "Anonymous" or "Name/URL" their image profile will not be displayed. If OpenID, AIM or other identities are used these favicons will be displayed instead.

  • Profile avatars load last so they will not prevent visitors viewing your content if you have a lot of comments on some pages


In today's Blogger tutorial (Blogspot tutorial) you have learned how to enable profile images in the embedded comments section in Blogger. If you are using a default Blogger template this can be achieved by enabling profile avatars in your Blogger template. If you are using a third party custom template I have shown you a Blogger hack that will display profile images next to comments on your blog. As always I am interested in how you get on with this tweak. Good luck!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add Missing Embedded Comments Section to a Blogger Template
Embed Comments Form in a Blogger Template
How to Get More Comments on a Blogger Blog



Subscribe to Blog Know How by Email

13 comments:

Rafay Baloch said...

hey wizz i need ur help,urgent
I dnt knw if i changed something
there is too much space b/w the heading words

aDmin said...

hmm Nice and easy. Thanks

The Wizz said...

Hi Rafay. Sounds like you have letter spacing in your CSS styling for your blog title or post titles wasn't sure which heading words you mean. Look for something like:

letter-spacing: .1em;

in the CSS code block in your template around these titles

The Wizz said...

Thanks aDmin for your visit.

Rafay Baloch said...

I cant find these words,since i have compressed my css with cleancss.com
please help

The Wizz said...

Rafay take a look at your h2 and h3 headings in the CSS post section of your template. If there is a letter spacing line this is the most likely problem. If the line is set to something like this:

letter-spacing:0.2em;

the result would be extra wide spacing

west palm beach locksmith said...

nice post keep writing good

The Wizz said...

Thanks for dropping in west palm beach locksmith.

./clutch said...

thanks for this tip..i have it working on my blog..

please take a look..

http://www.melardenio.com/2009/12/kalkal-pulley-explained-make-your-cvt.html

Mursalin said...

Thanks for this tutorial. I've implemented it on my blog, and it worked

BrainShakers Interactive said...

Hi,
Thanks for sharing such a wonderful tutorial.I have implemented it on my blog..

keep posting.
:)
Thanks And Regards
Quality link building

TriForce said...

Hey this is the great post. This seems really easy to implement. And image can create good impression over our profile. Thanks for sharing and keep blogging... :)

cruz said...

hi friends..........
seo services

Post a Comment