-
New Comment Photo Hack (Blogger)
- body
-
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:
- Go to 'Edit HTML' under Template and check the 'Expand Widget Templates' box.
- 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>
- 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> - 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>
- 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.
© 2006-2008 Stephen Paul Weber. Some Rights Reserved.
Singpolyma
On July 6, 2008
- favourited video
@ 2008-07-06 07:03
You can trackback from you own site.
22 Comments
Testing..
Testing…
Hello…thx for the awesome new comment photo hack!!
I am *** love this hack..brother..
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 ?
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
@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.
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!!
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"
If you try many times and it doesn't work, email me your template
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?
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/
@Ali — sounds like a case of not doing step #3 properly…
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
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
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
@Amanda — my PHP can be found at http://svn.devjavu.com/singpolyma/trunk/blogger/avatar.php
@Others — since others are installing this just fine it sounds like you may just have a messy template or are missing something small in the instructions. Blogger's error are, unfortunately, never helpful.
comment testing again…
I think this time is gonna to be worked again..
if succeed, delete this SPAM thx ..stephen :p
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"?
@jenming Looks like you did not accomplish step 2 properly
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>
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.
1 Trackbacks
[...] a script based on my new comment author photos could be built to inject the image for the post author (multi-author blogs), I thought it might [...]
Post a Comment