When I dug around, I found the Facebook logo actually has the “on” and “off” image in one file and uses a CSS and “hover” trick to create the little home icon next to the logo. Neat.

Has anyone else experienced the mystery of the disappearing Facebook logo? Other Opera users maybe?

$comments = get_comments($STORY_ID);
foreach($comment as $key => $value) { //$value is an array of each comment's data
	// $myhtml is a previously defined string created from the HTML output template
	foreach($value as $k=>$v) {
		$mykey = '{' . $k . '}';
		$html = str_replace($mykey, $value, $myhtml);
	}
	echo $html;
}

This is a pretty standard way, I think, for retreiving comments from a database and displaying them in a template. It’s fairly cut and dry – the names of the colums in the database (or the name given after the “as” in the SQL statement) serves as a placeholder in the template such as {title}. It’s dynamically replaced for each comment, which means the templates contain no PHP whatsoever.

Threading adds some complication, because you can’t loop through all of your comments anymore. If you do that, you’ll echo out the replies the same way. So this is the implementation I used on firsttube.com, which is based on the same idea as threading on OSNews. First off, we add a column in the comments table called “parent.” The parent is the parent comment’s primary key.

$comments = get_comments($STORY_ID);
foreach($comments as $key => $value) {
	if($value['parent']) {
		$K = $value['parent'];
		$C[$K][] = $value;
	} else {
		$C[0][] = $value;
	}
}

What we’ve done here is created a new array called $C. $C is a multidimensional array that holds /all/ comments. As you can see, all comments that are replies are stored as $C[PARENT_C0MMENT_ID] and all non-replies, or “original records,” are stored in $C[0]. The zero could just as easily be “parent” or “x” or any other string or integer; anything except an existing comment ID. 0 is a good choice because it’s unlikely you’ll have a comment ID of 0.

Now, like above, instead of looping through $comments, we loop through $C[0].

foreach($C[0] as $key => $value) {
	foreach($value as $k=>$v) {
		$mykey = '{' . $k . '}';
		$html = str_replace($mykey, $value, $myhtml);
	}
	echo $html;
}

Now we’ve echo’ed out all of the original records, but no replies. In my case, I added a second template, called reply.tmpl, and it been imploded into a string called $rhtml. So at the end of the above foreach() loop, we’ll add this:

if(is_array($C[$v['commentid']])) {
	foreach($C[$v['commentid']] as $ke => $va) {
		//echo reply
	}
}

That gets us all replies to the original comment. But it doesn’t get us replies to the replies. So we have created single reply threading. But what if we want deeper replies? This is the first, most elementary soltuion is pretty basic, but doesn’t solve the entire problem. It looks like this:

if(is_array($C[$v['commentid']])) {
	foreach($C[$v['commentid']] as $ke => $va) {
		//echo reply
		if($C[$va['commentid']]) {
			foreach($C[$va['commentid']] as $key => $val) {
				//echo reply to reply
			}
		}
	}
}

Of course, this is inefficient, and again, only gets us one additional layer. As you can see, threading will only go as deeper as you write this code, which is inelegant and tough to look at. We have to turn to a function.

So let’s define one:

function mkThread($array,$depth) {
	global $rhtml,$C; //this is the string of the reply text and the comments array
	foreach($array as $k=>$v) {
		$mykey = '{' . $k . '}';
		$html = str_replace($mykey, $value, $myhtml);
	}
	if(is_array($C[$array['commentid']])) {
		$newdepth = $depth++;
		mkThread($C[$array['commentid']],$newdepth);
	}
}

Okay, let break this down. So the mkThread function pretty much does what we were doing before – it takes the array of data and does some replacement in a string of HTML which gets echo’ed out. Pretty simple. But then, it looks for replies. What’s the $depth variable? That’s how we control out display. In the template is some CSS that controls margins, and this depth is multiplied times your indention – say 35px – and then pushed into your template into two varibles: myindent (which is which is $depth*pixels), and mywidth (which is, in my case, 640-$myindent). Of course, if you start with a comment box wider than 640, your milage may vary. My CSS in the template looks like this:

<div style="width:640px;margin-right:auto;margin-left:auto;">
	<div class="reply" style="width:{mywidth}px;margin-left:{myindent}px;">
	[...]</div></div>

That’s it. That’s how threading works. It’s not so intimidating once you see how easy it is insert the comments dynamically. On top of that, the entire comments section only takes one single database query. In fact, since we’re not using tables, it renders pretty quickly. Tables, in some browsers, only render to the screen after the entire table is downloaded by the client, whereas divs typically render as they are received. The only drawback to this is that you may want to add some code to limit depth, because after awhile, the comments might get so small they become silly looking. Other than that, it’s pretty easy for a custom blogging app to support comment threading.

Now – as of right now, you can only reply once, like digg, but it supports two deep. This is only because I haven’t found a more elegant way to allow deeper threading in the code. As soon as I do, I will be allowing deeper threading, probably 3 or 4 comments deep for aesthetic reasons.

The entire thing is done in CSS, unlike OSNews which is hard coded to the pixel with very complex code that really makes me uncomfortable when I see it. This is much nicer. It’s all done via templates, and there are only two – one for comments and one for threads, and this will probably change to one soon too.

according to css expert eric meyer, large scale tables used for page layout are okay. so stop the presses everyone – tables are okay today. i’m really getting sick of all these “made without tables” buttons on pages. it’s very cool to be able to be good enough with css to be able to layout a page without tables, but it’s definitely not worth much more than cool points. tables are not evil – they just shouldn’t be endlessly nested to control prescise layout.

i’ll phase the new pane in shortly, once it has content.

Update: She flies. Ingest the new ftblog.