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

Author: Zeeshan Rasool | Jul 3, 2010

AJAX, Facebook, JQuery, PHP, Web Development

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.

[ad#ad-4]

[ad#co-2]

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`)
)

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

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();
});

//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();
		});
	}

});

// 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’));

});

});

// 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();
			});
		}
	});
});

//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();

});

}

});

[ad#co-1]
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>

<div id="record-<?php echo $rows['c_id'];?>" class="commentPanel">

</label>

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

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

<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

}?>

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

<?php echo clickable_link($rows['comments']);?>

</label>

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

<textarea class="commentMark" id="commentMark-<?php echo $row['p_id'];?>" name="commentMark" cols="60"></textarea>

</label>

<a id="SubmitComment" class="small button comment"> Comment</a>

</div>

<?php

}

if($show_more_button == 1){?>

<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.
[ad#co-7]

Recommended WordPress Themes Stores

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

anju

haiiiii good
mac

where is facebox.css?
john

ya it was help full
araman

Nice tutorial

Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points. Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5

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

Database Structure

Recommended WordPress Themes Stores

Categories

Popular post

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

Database Structure

Few More Brilliant Posts !

Recommended WordPress Themes Stores

Categories

Popular post