Blogger does not provide a template tag for displaying the profile pictures of commentors in your blog template. Johan Sundström had created a way around this using an IFrame, but I found that solution to be somewhat buggy, even on his own blog. I have modified some of his code and added some of my own to create what I feel is a cleaner hack. I have bundled the majority of the JavaScript into a JScripts entry and it also uses a script I wrote to scrape Blogger profiles to JSON(P) [example]. The code to include the hack into your template is surprisingly simple:
<script type="text/javascript">
//<![CDATA[
addLoadEvent(function(){showCommentPhotos(‘class of elements to put photos in‘,’class of elements where links to authors can be found‘,number of <a> tags before the link to the author (0 if none));});
//]]>
</script>
You will need to add a <div> or other tag (with the class you pass in first) to the comment section, and style it so that the images show up the way you want. The second class you pass is the element containing the link to the comment author, you must add a class to this element if one does not exist. The third parameter is the number of <a> elements in this element before the link to the author. The script runs after page load and should thus have no adverse affects on initial load times.
36 Responses
So, do you have it running here? I’ll see if a picture shows up for me…
Ooooh! Now that’s a most excellent hack; I love it! 😀 It will be great dropping the old crummy hack I tossed up for ecmanaut.
I think the JSONP specs don’t append any trailing semicolon (not that it probably should matter much in practice, though I suppose it theoretically might in some LISP dialect? ;-), by the way.
I don’t quite follow the reasoning behind putting all people in a separate array rather than in member arrays of the applicable blogs objects either, but OTOH that’s not really the data I’m most interested in doing something with in my own scripts either, so I don’t really mind. 🙂
A suggestion, though — the photo property is now a string. I think it would be more useful as a {“url”:”…”, “width”:w, “height”:h} (or src or href, if you so prefer) object, as that makes for better layouting possibilities right when the JSON data comes, rather than having to create the image objects and wait for the image payload to get those same values, and write very awkward code not all unlike the ugliness that is my present hack. 🙂
Does the semicolon matter that much? I can change it if there’s an actual standard, and had noticed other services not putting the semicolon… my RAW objects have no semicolon, but I just figured that since when using it as JSONP it’s technically running as a JavaScript and proper form would be to end each statement with a semicolon… anyway, that was my thinking but if standard is otherwise I can change it 🙂
As far as the people being listed separately… that’s because of how my scraper works. I don’t currently actually parse the HTML table out for structure (since that’s a tad messy) but only grab the URLs and determine whether they point to a blog or a profile. I suppose if I can figure out how to parse the tables, though, that it would be more useful to have them in with the blogs.
I was using a static width for the photos, but you’re right passing out the width and height as determined by blogger makes sense. I have updated the script to generate JSON(P) in the format you suggested and upgraded the comment photo hack to use this new format 🙂
I have now got the members in with their blogs instead of a separate list as well, I figured out how to do it without having to go through all the table tags 🙂
I can’t say that I know of any place where the semicolon would matter — indeed the only reason I mention it is because it was not mentioned as part of the JSONP standard specification, which is reason enough for me not to use it (as it IMO waters out the standard, making feeds less standardized and format reliable).
Regarding the other changes: thanks! (I’d have put the width/height figures as numbers rather than strings, if only to save space and not give away false impressions of the possibility of encountering non-numeric random data there, but hey, anything that works. 🙂
Really neat comment faces, by the way. 🙂
Interesting that the comment faces are not rendered when the GM script fails, by the way; I had previously assumed that script errors in those different contexts would not affect one another.
I think that is because the GM script somehow causes the coComment JS include to fail — resulting in a failure in the page’s JS flow and thus none of my onload events fire properly, not my comment photos or my coComment sidebar or my FreshTags
Oh, and RE the trailing semicolon — thanks for the feedback, I’ll take it out 🙂
An interesting side effect possibility made possible by this hack, by the way, is that (for instance) the Some Assembly Required template could now be made to format author links specially, without any custom constants in the template itself.
As a comment author who is a member of the blog is noted as such in the Blogger profile (unless choosing to be anonymous on that blog, which is another feature, rather than a bug, with the scheme), it is just a matter of traversing the blogs array and see if any entry’s url value equals <$BlogURL$> or not. A realization which in itself probably merits a full article, nailing both comment faces and blog owner reply customization in one.
If you do the writeup for it, I’d suggest going for an even more down to earth description than the above; our typical readership, from Freshblog et c, does not manage to parse the bits in red in this article and piece together a result that works, so describing all measures necessary and exemplifying with actual templates and what to do where is probably needed.
Then you get lots of continuous traffic. 🙂
I’ve thought some of that too — part of the reason I went with a JSON-based approach is that it does allow for further customisability. I must admit I’ve never been very good with explaining things for the less-geeky market, which is something I should probably work on. It’s true that most users wouldn’t have the foggiest clue what the classes on their elements or the number of links before the profile link were… but that also changes on a template-by-template basis.
There seems to be lacking error condition handling in your php script when trying to use a JSONP callback query argument — I just got a “<br />
<b>Warning</b>: PHP Startup: failed to open stream: HTTP request failed! in <b>/singpolymaplay/getBloggerProfile.php</b> on line <b>5</b><br />
x({})” reply from http://singpolymaplay.ning.com/bloggerProfile.php?url=http://www.blogger.com/profile/10992009&callback=x
It strikes me that the Blogger profile URL ought to be present in the JSON data, by the way, to make it easy to identify which reply was tied wo which identity, without using closures.
I have updated the script to degrade gracefully on errors, thanks for the heads-up 🙂 Now if there is an error the JSON object will have an ‘error’ property with two attributes ‘number’ and ‘message’, describing the error. The URL of the requested blogger profile is also now included in the JSON object 🙂
Oh, thank you. 🙂 Isn’t John’s profile a bit short on data, by the way? I miss at least the photo and the blog array.
It seems this application is stuck in mid-loading now; was it a bad idea I added it to my ecmanaut template, scalability wise? (Bandwidth constraints, or something like that?) If not already implemented, I think caching parsed results (on blogger profile ID) for, say, 24 hours, would be a good idea.
(I e storing the data with a time stamp, and only prodding the net to refetch and parse a new copy after a minimum grace period has passed since the last fetch.)
John’s profile had an XML-error (an & entered without escaping, :O) but I have added some code to clean that up now. XML-parse errors will now add their message to the ‘error’ property just like other errors. His profile’s ‘about me’ still isn’t coming through properly, but the rest of the data seems to be there ok 🙂
as per the load times, it’s hosted on Ning, so bandwith shouldn’t be a huge problem… if you add xn_auth=no to the JSON-call-URL it will speed things up considerable (I keep forgetting that, should update my own code). Cacheing is something I may look into 🙂
I have rewritten some of the script-include (no change to hack impl required) that dramatically speeds up its functioning. I noticed too the hanging mid-load, but it seems to be fixed with this change 🙂
Ah, thanks for the hint; I’ll try adding that speedup, too. My reasoning around bandwidth was a bit off the mark, by the way — a front-end cache like that would of course “only” improve latency, but that might be useful, too. John’s profile stays a bit oddish, but now the oddities are his contacts, and filtering out those that have both text and href properties isn’t particularly difficult. 🙂
…DWIM-parsing is difficult. 😉
Interesting that I have received your “author background” treatment above. 🙂
Very nice hack. If I only had a photo in my profile. 😀
Good stuff indeed.
stephen, i have a little request. i’m sending you a mail with the same so you get how needy i am at the moment! 😛
there are many commentors out there who don’t have profile pics, and hence it breaks the uniformity of the comments display. could you make your script include a ‘pic not available’ kind of image for the ones which don’t have a profile picture?
thanks a ton!
Have done — there’s now a ‘no image’ image — comment highlighting is now built into the hack… i need to do a new post detailing that 🙂
This is cool but it doens’t work on my end.
What, exactly, is the problem you’re having?
mbvmnb
Awesome hacks ^^
good job, man!!
thx~~ I love it!
after hacks … ccc
http://chenkaie.blogspot.com/2006/11/blog-peek-boo-view-of-posts-in.html
Dear Singpolyma:
I’ve used this hacks on my blog!!
I can’t remember how many days ago, my site still works well with this hacks,.. but now it fails with Firefox, but IE still works well…I can’t figure out where the problem is…
do u have any idea about this problem?
Dear Singpolyma:
I’ve figured the problem out, but still got confused!!
Original buggy code:
<script src=”CommentPhoto.js” type=’text/javascript’/>
Works well code:
<script src=”CommentPhoto.js” type=’text/javascript’> </script>
I still get confused about this…
the above two are both correct, aren’t they?
but the 1st doesn’t work, the 2nd works well..
@Chen – the first is technically not allowed in most browsers. It is not what is said in the post either though…
Dear Singpolyma:
hum..but it is strange that if I import other external javascript, it works well in both IE and Fx (both 2 kinds of code are OK), once if importing “CommentPhoto.js” by 1st way, it fails…
this is what I really confused…
Hey, just wanted to say thanks. This is really cool! I wrote a little how-to for using this with Blogger beta here
Hello
I have a problem with this hack…
Dumb Q: Does this hack allow comment author profile photos to be seen in the comments section of the post page?
Well, if the answer to that is “yes”, then it is not working on my blog.
In fact, i can’t see it working on your blog, either!
Do you suppose it is something to do with my browser? I’m using Mac OSX, Firefox v1.0. Also tried it in Safari v1.25.
I can normally see profile pics on a blog’s comments-posting page, so i’m not sure what the problem is!
Any help would be greatly appreciated.
Best wishes
@iMuslim – found the bug and fixed it 🙂
Hi
No work for my blog
Help
Please see this post for updates on potential problems here : http://singpolyma.net/2007/03/ning-problems/