FaceBook Like comment post with Jquery

25 comments
This tutorial shows how to create a facebook like comment post script with Jquery. I have used tables as HTML markup because I think that tables are much more easier to handle than divs.
But you can use divs as well. The tutorial shows the basic Jquery code to post and delete the comments. For simplicity I have excluded the PHP back-end because it is easy to write and users can easily create the PHP script for entering the values in database.
Please write to me of you have you have any suggestions or any questions. Feel free to ask anything....

------------------------------------Live Demo------------------------------------


------------------------------------Download Script------------------------------------



The Code lies here :

1. index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Webspeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body
{
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size:12px;
}
.main{
width:450px;
padding:3px;
border:1px solid #ececec;
}
.status{
background-color:#D2F2EE;
width:440px;
}

.comment{
padding:5px; vertical-align:top; margin-top:2px;
}
.comment_but{
text-align:right;
padding:3px;
margin-right:16px;
}
.comment_but a{
text-decoration:none;
color:#6F88DF;
font-size:10px;
}
.comment_but a:hover{
text-decoration:underline;
}
.new_comment_table
{
clear:left;
float:none;
overflow:hidden;
padding:5px 0 4px 5px;
width:380px;
font-size:11px;
margin:1px 0 0 25px;
}
.new_comment_row
{
background-color:#ECEFF5;
}
.new_comment_img
{
width:50px;
margin-top:2px;
vertical-align:top
}
.new_comment_text
{
width:300px;
margin-top:2px;
vertical-align:top;
}
#comm_row{
display:none;
background-color:#ECEFF5;
border-bottom:1px solid #E5EAF1;
width:350px;
margin:2px 0 0 40px;
}
.comm_input{
overflow:hidden;
height:29px;
margin:5px 5px 0 0;
min-height:29px;
width:298px;
border:1px solid #BDC7D8;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
padding:3px;
}
.post_but{
background:#EEEEEE;
border-color:#999999 #999999 #888888;
border-style:solid;
border-width:1px;
color:#333333;
cursor:pointer;
display:inline-block;
font-size:11px;
font-weight:bold;
line-height:normal !important;
padding:2px 6px;
text-align:center;
text-decoration:none;
vertical-align:middle;
white-space:nowrap;
float:right;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 var counter=1;
 /*Show input box*/
 $('#comment_but').click(function()
 {
  $('#comm_row').slideDown();
 });
 
 /*Delete the comment*/
 $('.comment_del_but').live("click",function() 
 {
  var ID = $(this).attr("id");
  if(confirm("Are you sure to delete this Comment?"))
  {
   $("#new_comment_table"+ID).slideUp();
   /*
    Write AJAX logic for deletion here
   */
  }
 });
 
 /* Post your comment */
 $('#post_but').click(function()
 {
  var comm = $('#comm_input').val();
  if(comm.length != 0)
  {
   /*Disables the input box*/
      $('#comm_input').attr({'disabled':'true'});
   /*Disables the post button*/
      $('#post_but').attr({'disabled':'true'});

   /*Send ajax request*/
   $.ajax({
     'url':'post.php','data':'comment='+comm,
     'type':'POST',
     'success':function(data)
     {
      if(data.length)
      {
       /*Create new table for new post*/
       var htm = '<table class="new_comment_table" id="new_comment_table'+counter+'" align="center">';
        htm += '<tr class="new_comment_row" id="'+counter+'">';
     htm += '<td class="new_comment_img" id="new_comment_img"><img src="web.PNG" height="50" width="50"></td>';
     htm += '<td class="new_comment_text" id="new_comment_text"><b>Arvind : </b>'+ data;
     htm += '<br /><div class="comment_del_but" id="'+counter+'" align="right""><a href="#">Delete</a></div>';
     htm += '</td>';
     htm += '</tr>';
     htm += '</table>';

       /*Append new table in predefined area*/
       $('#new_comment_here').append(htm);
          $('#comm_input').removeAttr('disabled');
          $('#post_but').removeAttr('disabled');
       counter++;
    }
   }
   });
  }

 });
});
</script>
</head>

<body>

<div>
<a href="http://www.webspeaks.in">Webspeaks.in</a>
<a href="http://arvind-bh.blogspot.com">
 <img src="http://www.logomaker.com/logo-images/ba3c91fee33721fb.gif"/ width="200" height="120" title="Web Speaks">
</a>
</div>

<table border="0" cellpadding="0" cellspacing="0" class="main">
 <tr class="status">
  <td>
   <table>
   <tr>
    <td class="comment" ><img src="web.PNG" height="50" width="50"></td>
    <td class="comment"><b>Arvind : </b>Facebook like comment post with jquery. This Tutorial shows how to post facebook like comments with jquery & PHP.</td>
   </tr>
   <tr>
    <td colspan="2" class="comment_but">
     <a href="#" id="comment_but">Comment</a>
    </td>
   </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td colspan="2" id="new_comment_here">
  
  </td>
 </tr>
 <tr class="comm_row" id="comm_row" align="center">
  <td colspan="2" align="center">
  <textarea class="comm_input" id="comm_input"></textarea><br/>
  <button class="post_but" id="post_but">Comment!</button>
  </td>
 </tr>
</table>
</body>
</html>

2. post.php

<?php
$comment=$_POST['comment'];
if($comment!="")
{
// mysql_query("insert into comments (`comm`) values ('$comment')");
 echo "$comment";
}
?>

25 comments

Ah cool. Thanks for the detailed description. Hope I can manage to do that... :)

Thanks!
You can write to me if u need some help....

I have a question. My questions is I am trying to attach multiple comment box on multiple headings.Example:

news news news news
comment
news news news news
comment
news news news news
comment

When I click the third comment nothing happens but when I click the first comment the comment box slides down. What I want is when I click the third comment the comment box slides down underneath... I am not sure how to make that work. Any help will be appreciated

Hi anonymous!
I guess your code is stuck due to improper IDs of the comment boxes. Please review your IDs and the functions bind to them!
Please paste your code for further clarification.

My HTML code is not being accepted. I keep on getting error messages that tags are not allowed so I am unable to post my code. I basically query the news from my database then I append the comment link to the news. When I click the first comment link,the text box slides down but when I click on the other ones nothing happen. I use the same exact code you provided above.

Please e-mail me your complete code at bhardwajsonheight@gmail.com so that i can debug it to find the problem. Its hard to guess the problem u know...:)

Thanks for sharing the code

GetNewFans helps you get more Twitter followers, Facebook Fans. Buy Twitter followers & Facebook fans. Top social media marketers to reach for greater traffic and revenue

Elite India escorts service is available 24/7. Call +91 98704 32125 for bookings,Mumbai Escorts,mumbai escorts.

http://www.elitemumbaiescorts.org/mumbai.html

The information is really helpful! I never knew this site before, but I found it good enough for me. Really helpful!

Great post! Thanks This really is just remarkable,i appreciate your blog site and bookmarked it.

nice post,i like it very much,but i think u can think it in another way then,cause it will be interesting

I wanted to thank you for this great guide! This is a very informative post, it help me more. and i will share my website..

Very good script.Thanks

http://nasweb.sk

We would love to hear from you...

back to top