Sunday, May 2, 2010

FaceBook Like comment post with Jquery

5/02/2010

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 is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

25 comments :

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

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

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

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

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

    ReplyDelete
  6. 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...:)

    ReplyDelete
  7. Thanks for sharing the code

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

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

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

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

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

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

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

    ReplyDelete
  14. Very good script.Thanks

    http://nasweb.sk

    ReplyDelete

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism