In this post I want to explain Facebook like Collapsed Comments, while clicking View all Comments link it displays all the existing comments. I made a demo with jquery, ajax and php. Take a look at this live demo
Download Script 
Live DemojQuery Cookbook (Animal Guide)
Database Design
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
CREATE TABLE comments(
com_id INT AUTO_INCREMENT PRIMARY KEY,
comments TEXT,
msg_id_fk INT,
FOREIGN KEY(msg_id_fk) REFERENCES messages(msg_id));
);
msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
CREATE TABLE comments(
com_id INT AUTO_INCREMENT PRIMARY KEY,
comments TEXT,
msg_id_fk INT,
FOREIGN KEY(msg_id_fk) REFERENCES messages(msg_id));
);
Javascript Code
Contains javascipt code. $('.view_comment').click(function(){} - view_comments is the class name of anchor 'View all Comment'. Using $(this).attr("id") calling main message msg_id field value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".view_comments").click(function()
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "viewajax.php",
data: "msg_id="+ ID,
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
</script>
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".view_comments").click(function()
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "viewajax.php",
data: "msg_id="+ ID,
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
</script>
view.php
Contains PHP code displaying two results form the Comments table
<ol>
<li class="egg">
<?php
include("db.php");
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>
<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php
}
else
{
$second_count=0;
}
?>
<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">
<?php
$small=mysql_query("select * from {$prefix}comments where msg_id_fk='$id' order by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($small))
{
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } ?>
</div>
</li>
</ol>
<li class="egg">
<?php
include("db.php");
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>
<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php
}
else
{
$second_count=0;
}
?>
<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">
<?php
$small=mysql_query("select * from {$prefix}comments where msg_id_fk='$id' order by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($small))
{
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } ?>
</div>
</li>
</ol>
viewajax.php
Contains PHP code displaying results form the Comments table.
<?php
include("db.php");
if(isSet($_POST['msg_id']))
{
$id=$_POST['msg_id'];
$id=mysql_real_escape_string($id);
$com=mysql_query("select * from comments where msg_id_fk='$id' order by com_id");
while($r=mysql_fetch_array($com))
{
$c_id=$r['com_id'];
$comment=$r['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } }?>
include("db.php");
if(isSet($_POST['msg_id']))
{
$id=$_POST['msg_id'];
$id=mysql_real_escape_string($id);
$com=mysql_query("select * from comments where msg_id_fk='$id' order by com_id");
while($r=mysql_fetch_array($com))
{
$c_id=$r['com_id'];
$comment=$r['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } }?>
Nice code, but you don't escape any of the post variables. Your code is vulnerable to SQL injection.
You should use something like mysql_real_escape_string() on every user input that is referenced in your database query.
nice toturial, can the next toturial be about the exapanding textbox that is used on facebook, i am trying to look for that, but i cnt seem to find it, the textbox expands automatically when set on focus or when you click on it, if you know what i mean
thanks brother its useful
@Anonymous - It's a tutorial. You may modify it anyway you want.
No logro que me funcione, lo he puesto aqui. ¿me podrias decir porque por favor?
like it
$comment=$rowsmall['comment'];
to
$comment=$rowsmall['comments'];
Almost 1,000,000 views, good look.
good work sir...........
thanks..........
Hey...how do you add this code to the existing Facebook_Wall_Script.php?
I have tried
and nothing!
Great code but how do you add this code to the exsisting facebook wallscript?
Very Good! greatings from mexico
gr8
this guy is absolute a great man! he comes up with tutos that are easy to handle thx
viewajax.php - line 16
$comment=$r['comment'];
to
$comment=$r['comments'];
This is unbelievable. Where on earth have i been all this while? Srinivas I must confess Im completely speechless.
Thanks a million times.
$prefix = ???
Done !
Thanks,
but in this tutorial it shows the comments of 1 message only. If we have 20 messages at the page, then how can we modify the sql query so to find the comments of each message without having to do 20 extra queries? (or should we do 21 queries? 1 for the messages and the other 20 for the comments of each message?)
whow thanks.. that's what's great....
like it! :)
Hi. Srinivas,
thanks for tutorial.
Great n nice :)
.
I'm try your tuts,
uhmm. Why my page showing all comments at 'view.php'.?
eg.
'view all 5 comments'
{the comment show all 5 comments..}
(not 3 comments like your Demo) , :(
..
And please explain {$prefix} . . *I dont know that mean. :(
..
Sorry about my English sir..
Indonesial.
Great n nice :)
.
I'm try your tuts,
uhmm. Why my page showing all comments at 'view.php'.?
eg.
'view all 5 comments'
{the comment show all 5 comments..}
(not 3 comments like your Demo) , :(
..
And please explain {$prefix} . . *I dont know that mean. :(
..
Sorry about my English sir..
Indonesia
Hi. Srinivas,
thanks for tutorial.
Great n nice :)
.
I'm try your tuts,
uhmm. Why my page showing all comments at 'view.php'.?
eg.
'view all 5 comments'
{the comment show all 5 comments..}
(not 3 comments like your Demo) , :(
..
And please explain {$prefix} . . *I dont know that mean. :(
..
Sorry about my English sir..
Indonesia
and how post a new comment?