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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

47 comments

Write comments
December 26, 2008 11:13 PM delete

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?

Reply
avatar
December 27, 2008 3:32 AM delete

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.

Reply
avatar
December 27, 2008 3:34 AM delete

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 !

Reply
avatar
December 27, 2008 3:37 AM delete

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 ?

Reply
avatar
December 27, 2008 7:01 AM delete

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

Reply
avatar
December 27, 2008 7:04 AM delete

oh no!

no such luck for me it looks like!

Reply
avatar
December 27, 2008 7:06 AM delete

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

thanks eureka, success, cloud 9

Reply
avatar
December 27, 2008 7:27 AM delete

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

Reply
avatar
January 14, 2009 2:17 PM delete

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

Reply
avatar
January 14, 2009 3:02 PM delete

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.

Reply
avatar
January 15, 2009 7:47 AM delete

it's not working in mine... what should i do ?

Reply
avatar
January 15, 2009 7:52 AM delete

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

Reply
avatar
January 15, 2009 8:37 AM delete

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

Reply
avatar
January 17, 2009 7:04 AM delete

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

regards,
aakar

Reply
avatar
Anonymous
January 20, 2009 1:46 PM delete

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

Reply
avatar
February 14, 2009 11:45 AM delete

Try to comment. Just follow your script.

Reply
avatar
February 15, 2009 9:39 AM delete

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

Reply
avatar
February 15, 2009 10:08 AM delete

ya i know that images do show up in comments page, but the purpose of this hack is to show them in the post page itself....which looks cool !

Reply
avatar
February 26, 2009 10:08 AM delete

your .js file is not avaiable :(

Reply
avatar
February 27, 2009 10:17 AM delete

Yes "download ur movies " is right Your .js file is not working. All I could see was a square with no image in it

Reply
avatar
February 27, 2009 11:03 AM delete

Well it's working here, so just show me the screenshots of how it appears on your blog !

Reply
avatar
February 27, 2009 1:58 PM delete

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.

Reply
avatar
February 27, 2009 2:52 PM delete

oh sorry, forgot link

it no longer works here:

spitonyourtaste.blogspot.com

Reply
avatar
February 28, 2009 12:07 AM delete

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

Reply
avatar
March 02, 2009 1:23 PM delete

Let's see if they gonne fix it again ...

Reply
avatar
March 24, 2009 3:07 AM delete

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 :D
(sr for my bad english ^_^)

email: ya76oo@ya76oo.com
thanks.

Reply
avatar
March 26, 2009 11:08 AM delete

i m unable get my profile image

http://riteshsnap4u.blogspot.com/

Reply
avatar
April 11, 2009 12:49 AM delete

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

Reply
avatar
April 12, 2009 11:34 PM delete

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

Reply
avatar
April 21, 2009 5:15 PM delete

:D Success.. I have funny avatar with js changed. ThanksssssSee..you
http://badru-zaman.blogspot.com/2008/06/pay-to-click-buxto-basic-tutorial.html

Reply
avatar
May 05, 2009 10:25 PM delete

SaiRamji Divya,

Thanks for the tip.

Please visit http://shirdisaibababhajan.blogspot.com

Sai Ki Deewani
Hetal Patil

Reply
avatar
May 05, 2009 10:52 PM delete

Sai Ramji Divya,

Common picture for all other commentors is visible. But for author's comment picture is not visible. Please visit this link http://shirdisaibababhajan.blogspot.com/2009/03/om-namo-sachchidanand-sainathay-sai.html

I presume probably there is some mistake in javasrcipt file. This is the link http://www.hotlinkfiles.com/files/2518693_zbujx/commentpicjsfile.js

Thanking you

Sai Ki Deewani
Hetal Patil

Reply
avatar
June 03, 2009 11:47 AM delete

I tried it but it is simpply showing a default image and no profile images.. Divya do something.. help me out...

Reply
avatar
June 03, 2009 12:15 PM delete

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

Reply
avatar
July 24, 2009 8:59 AM delete

.js(plug-in ) file not working can u provide any other link

Reply
avatar
July 24, 2009 9:38 AM delete

The file's fine, this hack isn't working cause blogger has changed certain settings.

Reply
avatar
Guest
August 13, 2009 4:52 PM delete

Your JS file on Googe Pages has limited bandwidth, so it won't take effect!

Reply
avatar
Sai
August 16, 2009 12:52 PM delete

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

Reply
avatar
March 07, 2011 7:11 AM delete

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 www.nagtechs.co.cc which is on progress not almost completed

Reply
avatar
March 07, 2011 1:18 PM delete

Hi there...first of all i'm a guy.

And I hope these posts will help you:
1. http://bloggerstop.net/2009/12/collapsible-multi-tabber-widget-for.html
2. http://bloggerstop.net/2009/12/part-2-collapsible-multi-tabbed-widget.html

Reply
avatar
September 27, 2011 2:40 AM delete

this is cool information.. well I don't have that much knowledge about blogs so it is so helping

SEO Company Montreal

Reply
avatar
February 11, 2013 4:05 AM delete

I dont know but its not working in my blog...will u help me out ??

http://itsmywalls.blogspot.in

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon