How to display or show comment-author’s profile image in Blogger/BlogSpot blogs

Here’s another useful tip for those bloggers, who are continuously trying to transform their free BlogSpot blogs into a pro-blog.
Through this hack, within 10 minutes you can start showing the images of commentators/comment-authors in your blog.

See the image below; how it will look after tweaking the HTML default code

To do so, first of all log in to Blogger
Now go to Layout, then click on Edit HTML tab.
Now Download the present template as a back up
Then click on “Expand widget templates

Now search (CTRL+F) this

</head>

Immediately BEFORE IT, paste this:

<!–COMMENT-AUTHOR-PICTURE-STARTS–><script src=’http://dsai.588.googlepages.com/blogger_comment_author_photos.js’ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos(‘commentphoto’,’comment-author’, 1);});
//]]>
</script><!–COMMENT-AUTHOR-PICTURE-STOPS–>

NOW see this code below:

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id='”comment-” + data:comment.id’>

<div class=’commentphoto’ style=’float:right;’/>

<a expr:name='”comment-” + data:comment.id’/>

<b:if cond=’data:comment.authorUrl’>

<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class=’comment-body’>
<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href='”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>

<div style=’clear:both;’/>
</b:loop>

</dl>

In the code above YOU HAVE TO INSERT code lines shown in BLUE and BOLDED
And the red ones, are those which you can use as markers, BEFORE whom you have to paste the blue code lines.

You can change the position of pictures or images from Right to Light, by changing it in the first blue line in the code above…
Now whenever, people use their gmail or openid account to comment, then their pictures will be displayed alongside the comments !<>

47 thoughts on “How to display or show comment-author’s profile image in Blogger/BlogSpot blogs

  1. Is this only for people with their own blogger domains? I think blogger already has this feature?

    I have one very basic question…if someone changes from their free blogger domain to a paid one do they lose their PR and other “identity” defining numbers?

  2. Yes..the feature is given already given by Blogger,
    in Settings -> Comments as “Show profile images on comments?

    But IT NEVER WORKS, even if you select “YES“, for that option, so this modification is necessary to show profile images.

  3. And yes the feature is for those, who have a Blogger Profile, as you can see when u replied with your Blogger/Google ID, your profile image is being displayed, but when I used OpenID, the image is not being displayed,

    Now again when I am using my Blogger/Google ID the image will be displayed for this comment !

  4. Regarding domain change (Custom Domain Feature in Blogger),
    You WILL NOT lose your PR, but as the domain changes you will DEFINITELY LOSE Alexa rank.

    I couldn’t get identity defining numbers, can you elaborate it ?

  5. Hi Matt..

    I suppose you mean xml temlpate, or are you using ftp with blogger and have uploaded any html template?

    anyways u have to try it out yourself if you are not on an xml template, and tell me if some problem occurs.

  6. Actually it does work even with the link to googlepages, as you can see another comment above by Venkata…..this hack initially takes some time to show the images

  7. Great tips! I'll try!

    As for:
    =================
    "Yes..the feature is given already given by Blogger,
    in Settings -> Comments as "Show profile images on comments?"

    But IT NEVER WORKS, even if you select "YES", for that option, so this modification is necessary to show profile images."
    =================
    It works if you have your comments open in Pop-up window

    Thank you very much!
    Svet

  8. hi, it has stopped working here too.

    blogger has been making a few changes in the last few weeks with the followers functionality linking to some new social networking feature that has been incorporated; I wonder if this relates to the problem, anyway the script no longer shows avatars but instead i get a grey box.

    This worked up until a few days ago.

  9. Hi Nigel,

    Yes it’s true that Blogger is making some changes these days, and so images from profiles are not visible, and that STRANGE BOX is nothing but a default image, you can change it and place any other image in the mean while, as I am using this image of an alien 🙂

  10. Hello all,
    While I surf blog , i found a all new trick in http://pic-memory.blogspot.com/

    Vistor can comment and EMBED VIDEO , IMAGE . EX :
    http://pic-memory.blogspot.com/2009/02/photos-women-latin-asian-pictu
    VIEW PAGE SOURCE – TAG COMMENT SCRIPT:
    var str=”hello, view source! /(.|.)”;var cote=document.getElementById(this.div); * ^_^ * …

    Written very smart!
    I wonder how they do it ? Anyone know about this , please tell me 😀
    (sr for my bad english ^_^)

    email: ya76oo@ya76oo.com
    thanks.

  11. Hello Divya,
    Can we use a common image for all comments, rather than individual bloggers profile image?
    In case if any blogger has kept his/her profile private, will the profile image be visible when they comment? when anonymous commentators comment, then also images are not shown. So i wish to have a common image for all commentators please help me in that.

    Thanks in advance

    Sai Ki Deewani
    Hetal Patil

  12. SaiRam Hetal,

    Presently Blogger is preventing us from showing the profile images, so in any case (a Blogger, any individual or an anonymous comment) now only a single image will be displayed….
    Like in this very blog, you’ll see an alien image for any of the comments….

    To change the image, you have to edit the .JS (javascript) file (http://dsai.588.googlepages.com/blogger_comment_author_photos.js‘), and upload it to either hotlinkfiles.com or sigmirror.com and then use the DIRECT LINK to the file in the first code….

    Regards
    Sai

  13. Well Sameer, if you really want to customize your comments section with profile images etc.
    then you may try any of these:
    kontactr.com
    intensedebate.com
    disqus.com

  14. Well, as I have already said, even if the link works, the problem is not in the host/file, Blogger is not allowing to link their images…

  15. hello mam
    i made a technolegy blog and i hv visited your techie blogger in which i like tabs section in your blog and i want also integratethis hack but automatically by feed or other source because i dont know any coading so kindly plz help me my website is http://www.nagtechs.co.cc which is on progress not almost completed

Leave a Reply

Your email address will not be published. Required fields are marked *