Reloaded: Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax.

Facebook style wall posting and commenting system. Try a new reloaded version of demo which is almost similar to facebook style.
My previous facebook style posting system was not so much like original facebook posting style and also there is no commenting system So I created this tutorial again to complete the commenting system and I tried my best to give my dear users a complete posting script with comments system. Facebook is now a days top social networking site. So I have created some tutorials similar to facebook. Youtube style rating is also very popular tutorial on this blog. Hope you like it.
Waiting for your feed back to make it more good.
Database Structure
CREATE TABLE `facebook_posts` ( `p_id` int(11) NOT NULL auto_increment, `f_name` varchar(50) NOT NULL, `post` varchar(255) NOT NULL, `f_image` varchar(50) NOT NULL, `date_created` int(11) NOT NULL, `userip` varchar(200) NOT NULL, PRIMARY KEY (`p_id`) ) CREATE TABLE `facebook_posts_comments` ( `c_id` int(11) NOT NULL auto_increment, `userip` varchar(200) NOT NULL, `comments` text NOT NULL, `date_created` int(11) NOT NULL, `post_id` int(11) NOT NULL, PRIMARY KEY (`c_id`) )
I have used ip check to make user restricted to there posts or comments. They can only there postings.
Two new function missed in source files. One for making links clickable and other for removing tags etc.
function clickable_link($text = '') { $text = preg_replace('#(script|about|applet|activex|chrome):#is', "\\1:", $text); $ret = ' ' . $text; $ret = preg_replace("#(^|[\n ])([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<a href="\" target="\"_blank\"">\\2</a>", $ret); $ret = preg_replace("#(^|[\n ])((www|ftp)\.[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<a href="\" target="\"_blank\"">\\2</a>", $ret); $ret = preg_replace("#(^|[\n ])([a-z0-9&\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i", "\\1<a href="\">\\2@\\3</a>", $ret); $ret = substr($ret, 1); return $ret; } function checkValues($value = '') { $value = trim($value); if (get_magic_quotes_gpc()) { $value = stripslashes($value); } $value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES))); $value = strip_tags($value); $value = mysql_real_escape_string($value); $value = htmlspecialchars($value); return $value; }
Here is the comment box focus code below. When we click on a comment box text area.
//onfocus $('.commentMark').livequery("focus", function(e){ var parent = $(this).parent(); $(".commentBox").children(".commentMark").css('width','337px'); $(".commentBox").children("a#SubmitComment").hide(); $(".commentBox").children(".CommentImg").hide(); var getID = parent.attr('id').replace('record-',''); $("#commentBox-"+getID).children("a#SubmitComment").show(); $('.commentMark').css('width','300px'); $("#commentBox-"+getID).children(".CommentImg").show(); });
Submit comment code.
// I used livejquery plugin to work my code effective for dynamic elements. $('a.comment').livequery("click", function(e){ var getpID = $(this).parent().attr('id').replace('commentBox-',''); var comment_text = $("#commentMark-"+getpID).val(); if(comment_text != "Write a comment...") { $.post("add_comment.php?comment_text="+comment_text+"&post_id="+getpID, { }, function(response){ $('#CommentPosted'+getpID).append($(response).fadeIn('slow')); $("#commentMark-"+getpID).val(); }); } });
Get more records code
// I used livejquery plugin to work my code effective for dynamic elements. $(‘a.more_records’).livequery(“click”, function(e){ var next = $(this).attr(‘id’).replace(‘more_’,”); $.post(“posts.php?show_more_post=”+next, { }, function(response){ $(‘#bottomMoreButton’).remove(); $(‘#posting’).append($(response).fadeIn(’slow’)); }); });
Delete comment code:
//deleteComment $('a.c_delete').livequery("click", function(e){ if(confirm('Are you sure you want to delete this comment?')==false) return false; e.preventDefault(); var parent = $(this).parent(); var c_id = $(this).attr('id').replace('CID-',''); $.ajax({ type: 'get', url: 'delete_comment.php?c_id='+ c_id, data: '', beforeSend: function(){ }, success: function(){ parent.fadeOut(200,function(){ parent.remove(); }); } }); });
add_comments.php File:
<div id="record-<?php echo $rows['c_id'];?>" class="commentPanel"> <img class="CommentImg" style="float: left;" src="small.png" alt="" width="40" /> <label class="postedComments"> </label> <span style="margin-left: 43px; color: #666666; font-size: 11px;"> 0) echo date('F d Y', $rows['date_created']); elseif($days2 == 0 && $hours == 0 && $minutes == 0) echo "few seconds ago"; elseif($days2 == 0 && $hours == 0) echo $minutes.' minutes ago'; else echo "few seconds ago"; ?> </span> <a id="CID-<?php echo $rows['c_id'];?>" class="c_delete" href="#">Delete</a></div>
post.php File:
<?php include('dbcon.php'); function checkValues($value) { // Use this function on all those values where you want to check for both sql injection and cross site scripting //Trim the value $value = trim($value); // Stripslashes if (get_magic_quotes_gpc()) { $value = stripslashes($value); } // Convert all <, > etc. to normal html and then strip these $value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES))); // Strip HTML Tags $value = strip_tags($value); // Quote the value $value = mysql_real_escape_string($value); $value = htmlspecialchars ($value); return $value; } function clickable_link($text = '') { $text = preg_replace('#(script|about|applet|activex|chrome):#is', "\\1:", $text); $ret = ' ' . $text; $ret = preg_replace("#(^|[\n ])([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<a href=\"\\2\" target=\"_blank\">\\2</a>", $ret); $ret = preg_replace("#(^|[\n ])((www|ftp)\.[\w\#$%&~/.\-;:=,?@\[\]+]*)#is", "\\1<a href=\"http://\\2\" target=\"_blank\">\\2</a>", $ret); $ret = preg_replace("#(^|[\n ])([a-z0-9&\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i", "\\1<a href=\"mailto:\\2@\\3\">\\2@\\3</a>", $ret); $ret = substr($ret, 1); return $ret; } $next_records = 10; $show_more_button = 0; if(checkValues($_REQUEST['value'])) { $userip = $_SERVER['REMOTE_ADDR']; echo "INSERT INTO facebook_posts (post,f_name,userip,date_created) VALUES('".checkValues($_REQUEST['value'])."','99Points','".$userip."','".strtotime(date("Y-m-d H:i:s"))."')"; mysql_query("INSERT INTO facebook_posts (post,f_name,userip,date_created) VALUES('".checkValues($_REQUEST['value'])."','99Points','".$userip."','".strtotime(date("Y-m-d H:i:s"))."')"); $result = mysql_query("SELECT *, UNIX_TIMESTAMP() - date_created AS TimeSpent FROM facebook_posts order by p_id desc limit 1"); } elseif($_REQUEST['show_more_post']) // more posting paging { $next_records = $_REQUEST['show_more_post'] + 10; $result = mysql_query("SELECT *, UNIX_TIMESTAMP() - date_created AS TimeSpent FROM facebook_posts order by p_id desc limit ".$_REQUEST['show_more_post'].", 10"); $check_res = mysql_query("SELECT * FROM facebook_posts order by p_id desc limit ".$next_records.", 10"); $show_more_button = 0; // button in the end $check_result = mysql_num_rows(@$check_res); if($check_result > 0) { $show_more_button = 1; } } else { $show_more_button = 1; $result = mysql_query("SELECT *, UNIX_TIMESTAMP() - date_created AS TimeSpent FROM facebook_posts order by p_id desc limit 0,10"); } while ($row = mysql_fetch_array($result)) { $comments = mysql_query("SELECT *, UNIX_TIMESTAMP() - date_created AS CommentTimeSpent FROM facebook_posts_comments where post_id = ".$row['p_id']." order by c_id asc"); ?> <div class="friends_area" id="record-<?php echo $row['p_id']?>"> <img src="99.jpeg" style="float:left;" alt="" /> <label style="float:left" class="name"> <b><?php echo $row['f_name'];?></b> <em><?php echo clickable_link($row['post']);?></em> <br clear="all" /> <span> <?php // echo strtotime($row['date_created'],"Y-m-d H:i:s"); $days = floor($row['TimeSpent'] / (60 * 60 * 24)); $remainder = $row['TimeSpent'] % (60 * 60 * 24); $hours = floor($remainder / (60 * 60)); $remainder = $remainder % (60 * 60); $minutes = floor($remainder / 60); $seconds = $remainder % 60; if($days > 0) echo date('F d Y', $row['date_created']); elseif($days == 0 && $hours == 0 && $minutes == 0) echo "few seconds ago"; elseif($days == 0 && $hours == 0) echo $minutes.' minutes ago'; else echo "few seconds ago"; ?> </span> <a href="javascript: void(0)" id="post_id<?php echo $row['p_id']?>" class="showCommentBox">Comments</a> </label> <?php $userip = $_SERVER['REMOTE_ADDR']; if($row['userip'] == $userip){?> <a href="#" class="delete"> Remove</a> <?php }?> <br clear="all" /> <div id="CommentPosted<?php echo $row['p_id']?>"> <?php $comment_num_row = mysql_num_rows(@$comments); if($comment_num_row > 0) { while ($rows = mysql_fetch_array($comments)) { $days2 = floor($rows['CommentTimeSpent'] / (60 * 60 * 24)); $remainder = $rows['CommentTimeSpent'] % (60 * 60 * 24); $hours = floor($remainder / (60 * 60)); $remainder = $remainder % (60 * 60); $minutes = floor($remainder / 60); $seconds = $remainder % 60; ?> <div class="commentPanel" id="record-<?php echo $rows['c_id'];?>" align="left"> <img src="small.png" width="40" class="CommentImg" style="float:left;" alt="" /> <label class="postedComments"> <?php echo clickable_link($rows['comments']);?> </label> <br clear="all" /> <span style="margin-left:43px; color:#666666; font-size:11px"> <?php if($days2 > 0) echo date('F d Y', $rows['date_created']); elseif($days2 == 0 && $hours == 0 && $minutes == 0) echo "few seconds ago"; elseif($days2 == 0 && $hours == 0) echo $minutes.' minutes ago'; else echo "few seconds ago"; ?> </span> <?php $userip = $_SERVER['REMOTE_ADDR']; if($rows['userip'] == $userip){?> <a href="#" id="CID-<?php echo $rows['c_id'];?>" class="c_delete">Delete</a> <?php }?> </div> <?php }?> <?php }?> </div> <div class="commentBox" align="right" id="commentBox-<?php echo $row['p_id'];?>" <?php echo (($comment_num_row) ? '' :'style="display:none"')?>> <img src="small.png" width="40" class="CommentImg" style="float:left;" alt="" /> <label id="record-<?php echo $row['p_id'];?>"> <textarea class="commentMark" id="commentMark-<?php echo $row['p_id'];?>" name="commentMark" cols="60"></textarea> </label> <br clear="all" /> <a id="SubmitComment" class="small button comment"> Comment</a> </div> </div> <?php } if($show_more_button == 1){?> <div id="bottomMoreButton"> <a id="more_<?php echo @$next_records?>" class="more_records" href="javascript: void(0)">Older Posts</a> </div> <?php }?>
delete_comments.php File:
The above code is just to show you different functionless. However you can get complete working script by downloading source above.
Who I Am

Zeeshan Rasool
Software Engineer - PHP
Lahore - Pakistan
zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85
Categories
- AJAX (37)
- Codeigniter (16)
- CSS (16)
- Facebook (11)
- Joomla (1)
- JQuery (53)
- Miscellaneous (4)
- Mootools (1)
- MySQL (6)
- PHP (60)
- SEO (2)
- Technology (6)
- Tutorials (15)
- Twitter (2)
- Web Design (23)
- Web Development (57)
- WordPress (2)
Tags
Comments
- ZeeShaN on Facebook Wall Script Clone with JQuery and PHP: Personal Project BETA Version 2.0
- 20 + Fresh jQuery Image Gallery/Slider Plugins and Tutorials Worth a Look | free on JQuery Based Flipped Image Gallery with Bounce Effects
- 20 + Fresh jQuery Image Gallery/Slider Plugins and Tutorials Worth a Look | free on Fresh JQuery Image Gallery with Captions and Auto Play/Pause Rotation
- 25 Cool and Helpful jQuery Plugins/Tutorials For Your Next Project | free on jQuery Tutorial: Create jQuery and CSS based Awesome navigation.
- 25 Cool and Helpful jQuery Plugins/Tutorials For Your Next Project | free on Ajax Tutorial: How to Create Ajax Search Using PHP jQuery and MYSQL
ZeeShaN






very nice post broo….this helped me to learn more
Nice post…let me check it out…..thanks alot.
U did a nice work.kudos!but pls work on Mohammad’s question because i’m having thesame issue with the code.pls notify when it is done.
Hi Mohammad. Thanks, are you using new wall script code (http://facebook.99points.info) ? It is working script. You should check this one. There must be some div problems in your side may be some div iDs are not properly assigned. I can not solve like this, You should try this new version this is perfect and still did not hear any issue in it.
Thanks
Hi, excellent script. but we all are asking the same question, IF I DELETE A COMMENT/POST, ALL POSTCOMMENTS DISAPPEARS. HOW TO SOLVE THIS PLEASE ?
Thnx
how to config the data base
There are some problem in your script. When I remove one post, all other post disappeared though they are not deleted. But, after refresh the come back. The same thing occurs for the comment deletion.
when I left a comment there create problem in alignment of comment-box.
How can I recover these problems.
Plz, please, plz inform me how can I recover these problems.
I think except these problems, your script is excellent.
i have to create a css class to make the SHARE button have the blue box:
.smallbutton.Detail {
background-color: #5B74A8;
border-color: #29447E #29447E #1A356E;
color: #FFFFFF;
cursor: pointer;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 33px;
padding: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
display: inline-block;
text-decoration: none;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
thanks for sharing!
very nice!
WHEN WE R TESTING IN localhost, then after posting more than one thread (i.e. main comment)if I try to make sub-comments, then except for the first thread, on focusing the ” write a comment box’, the comment link to make comments just disappears.any solution please? I need it asap