Jul

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

ZeeShaN

AJAX, Facebook, JQuery, PHP, Web Development Tags

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\#$%&amp;~/.\-;:=,?@\[\]+]*)#is", "\\1<a href="\" target="\&quot;_blank\&quot;">\\2</a>", $ret);
 
	$ret = preg_replace("#(^|[\n ])((www|ftp)\.[\w\#$%&amp;~/.\-;:=,?@\[\]+]*)#is", "\\1<a href="\" target="\&quot;_blank\&quot;">\\2</a>", $ret);
	$ret = preg_replace("#(^|[\n ])([a-z0-9&amp;\-_.]+?)@([\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+"&amp;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 &lt;, &gt; 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){?>
					&nbsp;&nbsp;<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.

jQuery Login Form with Sliding effects Style...

Fresh: Ajax Heart Rating System with JQuery a...

10 very Useful and most popular Joomla Extens...

Block FarmVille/MafiaWar news feeds on Facebo...

By HackingEthics

Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

66 to “Reloaded: Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax.”

ZeeShaN August 3, 2010 at 5:34 pm
you welcome Christo
Britton August 4, 2010 at 5:48 am
Hi,

I’d love if we could limit the amount of comments displays and add a “show more” link if it exceeds the set amount to show.

I’d also like to incorporate the like/dislike feature into this. Thanks and great job!
Alldaron August 5, 2010 at 6:04 pm
Perhaps I missed something. I uploaded the files and attempted to install a database with the code above, but it wouldn’t take. And when I visit the url where the files uploaded, I get a bunch of errors. Please help. I’d even pay for a simple brand-free installer.

Thanks,
Alldaron
Facebook Like URL data Extract Using jQuery PHP and Ajax | PHP Tutorials August 11, 2010 at 2:13 am
[...] 100px so that small images should not be included. I have created this tutorial separate from our facebook style wall posting and comment application and facebook profile edit. However if you want to add this functionality in that script just [...]
stephen August 12, 2010 at 1:22 am
i was woundring how i would display comments that where posted to one users profile and only to his

if you know what i mean
Mon August 15, 2010 at 3:45 am
What’s the use of “(‘dbcon.php’);”
I have an fatal error said “Maximum execution time of 60 seconds exceeded in C:\xampp\htdocs\xampp\Projects\facebook_wallpost_system\facebook_wallpost_system\dbcon.php on line 2″ and when I see the code inside of dbcon.php at’s already the same code.. You know what I mean? Please help me.
Facebook Like URL data Extract Using jQuery PHP and Ajax | Webmaster Heaven August 16, 2010 at 1:49 pm
[...] 100px so that small images should not be included. I have created this tutorial separate from our facebook style wall posting and comment application and facebook profile edit. However if you want to add this functionality in that script just [...]
Gilang muharam August 18, 2010 at 4:18 pm
how to make for Everithing User Id becouse this only one user pleaaase help me
Facebook Like URL data Extract Using jQuery PHP and Ajax | Dummies Sources August 23, 2010 at 2:46 pm
[...] 100px so that small images should not be included. I have created this tutorial separate from our facebook style wall posting and comment application and facebook profile edit. However if you want to add this functionality in that script just [...]
JoshB August 25, 2010 at 11:12 pm
Hi, I’m new to the whole website designing stuff and im only 14.
i was wandering if its possible to insert a box like the ‘whats on your mind’ one, of which you input your own name rather than have it as the 99Points standard one.
as I said im new to all this but as ive got so far can anyone help me thoroughly ?
Thanks Josh.
JoshB August 25, 2010 at 11:17 pm
@Mon If you replace the code in the dbcon.php file with the following and change it to suite your needs, it should work fine.
ZeeShaN August 26, 2010 at 5:36 am
@Mon, dbcon.php is establishing connection with db and its required. May be there is some error in db name etc. Double check your db name and try to explore that db connection is working fine.
@JoshB, Actually this tutorial is for comments type script and facebook text area so I tried my best to give it facebook look but if there are some more functionality you need then you can do it easily. Its not possible for me to provide all facebook functionality here Thanks
Facebook Like URL data Extract Using jQuery PHP and Ajax | TechnoForum August 26, 2010 at 8:17 pm
[...] 100px so that small images should not be included. I have created this tutorial separate from our facebook style wall posting and comment application and facebook profile edit. However if you want to add this functionality in that script just [...]
Facebook Style Suggest a Friend Box Using jQuery and PHP. | 99Points August 28, 2010 at 11:28 pm
[...] style tutorial. Many readers liked my previous facebook like tutorials, specially facebook style wall posting application and facebook like url data extracting with jquery. So I thought to give another script which a web [...]
Marco September 1, 2010 at 2:49 pm
Hi, I tried to use this example, but in the dowloaded files, dbcon.php is empty. Can I have an example of dbcon.php ? Thanks
ZeeShaN September 1, 2010 at 6:51 pm
hi Marco, there is nothing else in dbcon file , just 2 simple db connection lines.