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

How to display or show comment-authors 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

How to display or show comment-authors profile image in Blogger/BlogSpot blogs

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

Leave a Reply

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

Notify of
avatar
Sort by:   newest | oldest | most voted
L. Venkata Subramaniam
Guest

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?

View Comment
bloggerstop.net
Guest

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.

View Comment
Divya Sai
Guest

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 !

View Comment
bikes
Guest

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 ?

View Comment
L. Venkata Subramaniam
Guest

hey man i actually did this…now let me wait and see if the pics show up!!

other nos = alexa, and other such numbers.

thanks for answering my query patiently

View Comment
L. Venkata Subramaniam
Guest

oh no!

no such luck for me it looks like!

View Comment
L. Venkata Subramaniam
Guest

maybe my sezwho plugin interfering?

View Comment
L. Venkata Subramaniam
Guest

oh patience patience….it showed up…hey you might want to delete some of my dialog above

thanks eureka, success, cloud 9

View Comment
Divya Sai
Guest

Hmmm…..it’s actually good for me and others, that due to you, confusion regarding sezwho will not be there now…

thanks…for sharing all your experience 🙂

View Comment
Matt Peloquin
Guest

Does this work for those of us using our own html templates?

View Comment
Divya Sai
Guest

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.

View Comment
आकार
Guest

it’s not working in mine… what should i do ?

View Comment
आकार
Guest

thanks …. now it’s working….
‘ve changed host…that googlepage to somwhere… thank you very much…

View Comment
Divya Sai
Guest

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

View Comment
आकार
Guest

yeah, thanks !
takes some time to display the image…

regards,
aakar

View Comment
Anonymous
Guest

This feature is awesome. Thanks for the tip!!!

View Comment
bebasngobrol
Guest

Thank u very much..:)

View Comment
Divya Sai
Guest

welcome dude !
🙂

View Comment
Seta Basri
Guest

Try to comment. Just follow your script.

View Comment
Kyle and Svet Keeton
Guest

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

View Comment
wpDiscuz