FaceBook Like comment post with Jquery

27

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";
}
?>

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

27 thoughts on “FaceBook Like comment post with Jquery”

  5. 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

  6. 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.

  7. 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.

  11. 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

  26. I was suggested this blog by means of my cousin. I am no longer sure whether this publish is written through
    him as no one else realize such special about my difficulty.

    You're amazing! Thank you!

Comments are closed.