Singpolyma

Technical Blog

New Comment Photo Hack (Blogger)

Posted on

By demand, I have added a maxheight option to this hack as well, it works the same way as maxwidth 🙂

Some people have really liked my comment photos and highlighting hack. Many have hated it. Especially since the move to the new Blogger, the hack is just unstable and difficult to implement or understand. Even my own implementation (before the move) was doing odd things.

So I decided that a complete rewrite was in order. The old scripts are still intact, but this new hack uses none of the old code. This hack does only comment author photos (highlighting is better handled other ways in the new Blogger).

This hack is 100% compatible with the newest version of my asynchronous peek-a-boo comments.

Without further ado, the instructions:

  1. Go to ‘Edit HTML’ under Template and check the ‘Expand Widget Templates’ box.
  2. Find the following code:

    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>

    and insert the following code directly after it:

    <div style="clear:both">
    <dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'></dt>
    <script type="text/javascript">if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id 'url':'<data:comment.authorUrl/>'});</script>
  3. If you go down a very small ways from where you were in the previous step you will see a </dl>. Directly before it insert the code: </div>
  4. Directly before the </body> code in your template add this code:

    <script type='text/javascript'>
    //<![CDATA[
    function commentPhotoDo() {
    var tag;
    for(var i in commentPhotoIds) {
    tag = document.createElement('script');
    tag.type = 'text/javascript';
    tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
    document.body.appendChild(tag);
    }//end for var i in commentPhotoIds
    }//end function commentPhotoDo
    commentPhotoDo();
    //]]>
    </script>
  5. Save your template

My fellow hackers will not like the way I did the second-to-last step. I should be using window.onload. I am not simply because in the tests I did on a certain much-hacked template, this worked and the other didn’t. I am not prepared to say why the other didn’t, only that it didn’t and that disturbed me. So for this hack I’m doing it like this. It works.

This hack causes direct hits to my singpolyma.net hosting server every time a page loads. If your blog gets a significant amount of viewers (>300 subscribers or thereabouts) I would ask that you contact me before installing this hack so that we can work out whether it will be a bandwidth issue or not. Thank you for understanding.

37 Responses

Kaie •

Hello…thx for the awesome new comment photo hack!!
I am *** love this hack..brother..

Reaktori •

Hello!
I am trying to put this hack on my bloggrowds template but it allways says that your ending tag is missing alhought i have added as you guided?
What i should check out ?

LAi •

hi…

is there anything i miss? i’m confused if your hack are working on my blog or not..

can you help?

this is my blog

Stephen Paul Weber •

@LAI — the images seem to be showing up fine on your blog
@Reaktori — not sure what the problem is with yours. Try again and if it doesn’t work, email me with your template.

LAi •

weird…

the first time i check it after i implemented it on my blog it doesnt appear at all..but now i think it works great…thanks..

i’m waiting for more hacks from you…good job!!

Tatoon •

Hi, Stephen.
First af all, excuse me for my poor english. Sorry…
As Reaktori,
i am trying to put this hack on my blog but it allways says that your end-tag is missing.
This is teh error message: “The element type ‘div’ must be terminated by the matching end-tag”

Ali •

I made new template with two sidebars and two containers!
I tried to add this hack in blog but it insults me “The element type “div” must be terminated by the matching end-tag ”
what to do?

Ali •

I made new template with two sidebars and two containers!
I tried to add this hack in blog but it insults me “The element type “div” must be terminated by the matching end-tag ”
what to do? http://blogosmentary.blogspot.com/

Amanda •

Hello Stephen,

I would love to use this hack in my new template, but am anxious that I may overload your bandwidth. Would it be possible for me to host the script used for this hack on my own server? I am able to host and access php files, and would be very grateful of you were able to send me the script.

Thank you for your time, and especially for providing this great hack!

Amanda

Seth •

I got the same error message “The element type “div” must be terminated by the matching end-tag ”

Very frustrating, anyone know how to fix this? Thanks

Seth •

This is the error message I keep getting:

Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type “div” must be terminated by the matching end-tag ”
“.

Can someone please help, I’ve tried it 10 times. THanks

jenming •

Hi, I found errors when using IE 7, it display
document.getElementById(“undefined”).innerHTML balabala…..
and using the firefox with the firebug, still can saw the same errors in console..
Is possible that some errors in “avatar.php”?

Tsung-Kai Chen •

I met the same problem with jenming, but I still not figure out why my commentPhotoIds array will grow up to a value larger than the total comments, so I got document.getElementById(“undefined”).innerHTML balabala… too, therefore I forced the for loop to stop when it grows up to the total count, and the revision shows below

<script type=’text/javascript’>
//<![CDATA[
function commentPhotoDo() {
var tag;
for(var i in commentPhotoIds) {
tag = document.createElement(‘script’);
tag.type = ‘text/javascript’;
tag.src = ‘http://scrape.singpolyma.net/avatar.php?maxwidth=70&url=’+encodeURIComponent(commentPhotoIds[i].url)+’&id=’+encodeURIComponent(commentPhotoIds[i].id)+’&defaultimage=’+encodeURIComponent(‘http://img139.imageshack.us/img139/1011/defaultavatarad7.png’);

document.body.appendChild(tag);
if(i >= commentPhotoIds.length-1) break;
}//end for var i in commentPhotoIds
}//end function commentPhotoDo
commentPhotoDo();
//]]>
</script>

René Fischer •

It doesn’t work for me. I always got the “The element type “div” must be terminated by the matching end-tag” error. I’m going to send you my template and realy hope you find the error.

Stephen Paul Weber •

@denden It would come from the blogger profile if you used this hack. My blog is wordpress and thus uses Gravatar. This hack no longer works because my host forced me to discontinue the script because of abuse.

YouKe •

Hi Stephen,

I would like to host your avatar.php on my own host, could you please email this php file to me?

My email: 54youke@gmail.com

Thanks a lot

YouKe

Anonymous •

I would like to download the php “http://scrape.singpolyma.net/avatar.php” and hosted on my server because I see that does not work please send me to download … Thank you

Jack Slater •

Hi, I have installed this hack on my blog and it works randomly. Some times the visualized avatar is the default image, other times the avatar is ok.
I’m trying to understand why. I have uploaded the avatar.php script to an external hosting service ( 110mb(dot)com ). But this is the result: it works but randomly.

So i tried to upload the script to a directory in my wordpress hosting space. I set the file permission to 777 (also tried 755), but it doesn’t works (i mean completely not works, neither avatar images).

Can you help me to understand? What i can do?
Many thanks.

Jack

Stephen Paul Weber •

I’m really not sure. Is it perhaps timing out? The code is pretty basic: is just scrapes the avatar URL out if it can. Maybe there are some blogger profile pages different than others? Is it failing on the same people each time?

Jack Slater •

Thanks for reply Stephen

The script fails in the same page, with the same comments (same avatar).
If I load the page, for example at 11.59, it may load with avatars. If I load again the same page (with same comments) in another time it fails with all avatars. This cycle repeats itself randomly.

What do you mean with “timing out”?

I think that maybe there is a hosting problem.
I speaked with Kaie (see comment 2007-12-17), the boy that is using the same script on his blog.
He suggested me to upload the script on 110mb(dot)com like he does.
Well, I see that he also have the same problems in the same times. When my avatars doen’t work, also he have the same problem. When my avatars works, I see that also in his blog avatars work. I think it depends on 110mb(dot)com, maybe the server goes down randomly.
I hope you understand what i mean.

What can i do?
Can you suggest some place where upload the script?
I tried to upload the script on my own wordpress host, creating a directory called “script”, and setting the permission to 755. The script fails (why?)…

(Sorry for my bad English)

Mastan Oli •

Hi Stephen,
Thanks for superb article. its really good. but Stephen, it doesent working in my blog. :(( I dont know, even I follow all steps. its saved nicely. but but.. I dnt know why. pls check my site http://mastanoli.blogspot.com.

Thanks in Advance
Mastan Oli

Leave a Response