Facebook Like Status Update in PHP and jQuery

Today, i am going to write a nice tutorial on creating Facebook like status update in jQuery and PHP. In this tutorial i will tell you how to create database and then PHP code and javascript code.

Demo Download

jQuery Code

This code will do all dynamic work of the code and dynamically submit status update to server.

$( function(){
$(".input_box").elastic().css("height","30px");
$(".input_box").focus(function(){
$(this).filter(function(){
return $(this).val() == "" || $(this).val() == "What's on your mind?"
}).val("").css("color","#000000");
});
$(".input_box").blur(function(){
$(this).filter(function(){
return $(this).val() == ""
}).val("What's on your mind?").css("color","#808080");
});

$("#share").click(function(){
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12){
a_p = "am";
}else{
a_p = "pm";
}
if (curr_hour == 0){
curr_hour = 12;
}
if (curr_hour > 12){
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1){
curr_min = "0" + curr_min;
}
var m_names = new Array("Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
var date = m_names[curr_month] +" "+ curr_date +" "+"at"+" "
+ curr_hour + ":" + curr_min + " " + a_p;

$(".loading").show();
var status=$(".input_box").val();
if(status == "What's on your mind?"){
$(".loading").hide();
}else{
var DATA = 'status=' + status + '&date=' +date;
$.ajax({
type: "POST",
url: "status_update.php",
data: DATA,
cache: false,
success: function(data){
$(".load_status_out").append(data);
$(".loading").hide();
$(".input_box").val("What's on your mind?")
.css("color","#808080").css("height","30px");
}
});
}
return false;
});
});

$( function(){

$(".input_box").elastic().css("height","30px");

$(".input_box").focus(function(){

$(this).filter(function(){

return $(this).val() == "" || $(this).val() == "What's on your mind?"

}).val("").css("color","#000000");

});

$(".input_box").blur(function(){

$(this).filter(function(){

return $(this).val() == ""

}).val("What's on your mind?").css("color","#808080");

});

$("#share").click(function(){

var a_p = "";

var d = new Date();

var curr_hour = d.getHours();

if (curr_hour < 12){

a_p = "am";

}else{

a_p = "pm";

}

if (curr_hour == 0){

curr_hour = 12;

}

if (curr_hour > 12){

curr_hour = curr_hour - 12;

}

var curr_min = d.getMinutes();

curr_min = curr_min + "";

if (curr_min.length == 1){

curr_min = "0" + curr_min;

}

var m_names = new Array("Jan", "Feb", "Mar",

"Apr", "May", "Jun", "Jul", "Aug", "Sep",

"Oct", "Nov", "Dec");

var d = new Date();

var curr_date = d.getDate();

var curr_month = d.getMonth();

var curr_year = d.getFullYear();

var date = m_names[curr_month] +" "+ curr_date +" "+"at"+" "

+ curr_hour + ":" + curr_min + " " + a_p;

$(".loading").show();

var status=$(".input_box").val();

if(status == "What's on your mind?"){

$(".loading").hide();

}else{

var DATA = 'status=' + status + '&date=' +date;

$.ajax({

type: "POST",

url: "status_update.php",

data: DATA,

cache: false,

success: function(data){

$(".load_status_out").append(data);

$(".loading").hide();

$(".input_box").val("What's on your mind?")

.css("color","#808080").css("height","30px");

}

});

}

return false;

});

PHP Code

Index.php This is the main code with statu update form. It will have all the formatting.

<h1>Facebook status update</h1>
<div class="con">
<div class="pd">
<div class="share"></div>
<div class="status">Update Status</div>
<div class="loading"></div>
</div>
<br />
<div class="img_top"></div>
<div class="text_status">
<textarea class="input_box" />What's on your mind?
</textarea></div>
<div class="button_outside_border_blue" id="share">
<div class="button_inside_border_blue">
Share
</div>
</div>
<div class="clear"></div>
<div class="load_status_out"></div>
</div>

<h1>Facebook status update</h1>

<div class="status">Update Status</div>

</div>

<br />

<textarea class="input_box" />What's on your mind?

</textarea></div>

</div>

</div>

Status_update.php

This code will be called dynamically. It will store status to database and then dynamically update it to the page.

<?PHP
//Include connection to database
//include('connect.php');

//Get posted values from form
$status=$_POST['status'];
$date=$_POST['date'];

//Strip slashes
$status = stripslashes($status);
$date = stripslashes($date);

//Strip tags
$status = strip_tags($status);
$date = strip_tags($date);
/*

//Inset into database
$insert_status=mysql_query("INSERT INTO status ('status, date')
VALUES ('$status','$date')") or die (mysql_error());
while($row=mysql_fetch_array($insert_status)){
$status=$row['status'];
$date=$row['date'];
}

//Line break after every 80
$status = wordwrap($status, 80, "\n", true);

//Line breaks
$status=nl2br($status);
//Display status from data base
echo '<div class="load_status">
<div class="status_img"><img src="blankSilhouette.png" /></div>
<div class="status_text"><a href="#" class="blue">Deepanker</a>
<p class="text">'.$status.'</p>
<div class="date">'.$date.' &middot; <a href="#" class="light_blue">
Like</a> &middot;
<a href="#" class="light_blue">Comment</a></div>
</div>
<div class="clear"></div>
</div>';
?>

<?PHP

//Include connection to database

//include('connect.php');

//Get posted values from form

$status=$_POST['status'];

$date=$_POST['date'];

//Strip slashes

$status = stripslashes($status);

$date = stripslashes($date);

//Strip tags

$status = strip_tags($status);

$date = strip_tags($date);

//Inset into database

$insert_status=mysql_query("INSERT INTO status ('status, date')

VALUES ('$status','$date')") or die (mysql_error());

while($row=mysql_fetch_array($insert_status)){

$status=$row['status'];

$date=$row['date'];

}

//Line break after every 80

$status = wordwrap($status, 80, "\n", true);

//Line breaks

$status=nl2br($status);

//Display status from data base

echo '<div class="load_status">

<div class="status_text"><a href="#" class="blue">Deepanker</a>

<p class="text">'.$status.'</p>

Like</a> ·

<a href="#" class="light_blue">Comment</a></div>

</div>

</div>';

CSS Code

body{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size:12px;
margin-top:100px;
margin-left:300px;
}

a.blue:link {
color:#3b5998;
text-decoration:none;
}

a.blue:visited {
color:#3b5998;
text-decoration:none;
}

a.blue:hover {
color:#3b5998;
text-decoration:underline;
}

a.blue:active {
color:#3b5998;
}

a.light_blue:link {
color:#6d84b4;
text-decoration:none;
}

a.light_blue:visited {
color:#6d84b4;
text-decoration:none;
}

a.light_blue:hover {
color:#6d84b4;
text-decoration:underline;
}

a.light_blue:active {
color:#36d84b4;
}

.blue{
padding:0;
margin:0;
font-weight:bold;
}

.text{
padding:0;
margin:0;
clear:both;
overflow:hidden;
}

.clear{
clear:both;
}

.con{
width:495px;
border-top:solid #aaaaaa 1px;
}

.img_top{
position:relative;
left:12px;
width:11px;
height:7px;
background-image:url('top_arrow.png');
display:block;
clear:both;
z-index:2;
}

.input_box{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
color:#808080;
width:495px;
height:30px;
padding:5px 0 0 5px;
border:solid #b4bbcd 1px;
outline:none;
resize:none;
}

.share{
color:#808080;
padding:0 12px 2px 0;
font-weight:bold;
float:left;
position:relative;
}

.status{
width:108px;
height:14px;
background-image:url('top_status.png');
background-repeat: no-repeat;
color:#000000;
text-align:right;
font-weight:bold;
float:left;
}

.pd{
padding:8px 0 4px 0;
}

.text_status{
position:relative;
top:-1px;
z-index:1;
}

.loading{
display:none;
width:16px;
height:11px;
background-image:url('loading.gif');
float:right;
}

.load_status_out{
padding-top:10px;
}

.load_status{
margin-top:10px;
padding-bottom:10px;
border-bottom:solid #aaaaaa 1px;
}

.status_img{
width:50px;
height:50px;
background:#eceff5;
float:left;
}

.status_text{
padding:0 10px 0 10px;
float:left;
}

.date{
padding-top:5px;
color:#999999;
}

/* button */

.button_outside_border_blue{
width:50px;
margin-top:5px;
border:solid #29447e 1px;
border-bottom:solid #1a356e 1px;
cursor:pointer;
float:right;
}

.button_inside_border_blue{
padding:4px 0 4px 0;
background-color:#5c75a9;
border-top:solid #8a9cc2 1px;
text-align:center;
font-weight:bold;
color:#ffffff;
}

div.button_inside_border_blue:active{
background-color:#4f6aa3;
}

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

body{

font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

font-size:12px;

margin-top:100px;

margin-left:300px;

}

a.blue:link {

color:#3b5998;

text-decoration:none;

}

a.blue:visited {

color:#3b5998;

text-decoration:none;

}

a.blue:hover {

color:#3b5998;

text-decoration:underline;

}

a.blue:active {

color:#3b5998;

}

a.light_blue:link {

color:#6d84b4;

text-decoration:none;

}

a.light_blue:visited {

color:#6d84b4;

text-decoration:none;

}

a.light_blue:hover {

color:#6d84b4;

text-decoration:underline;

}

a.light_blue:active {

color:#36d84b4;

}

.blue{

padding:0;

margin:0;

font-weight:bold;

}

.text{

padding:0;

margin:0;

clear:both;

overflow:hidden;

}

.clear{

clear:both;

}

.con{

width:495px;

border-top:solid #aaaaaa 1px;

}

.img_top{

position:relative;

left:12px;

width:11px;

height:7px;

background-image:url('top_arrow.png');

display:block;

clear:both;

z-index:2;

}

.input_box{

font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

color:#808080;

width:495px;

height:30px;

padding:5px 0 0 5px;

border:solid #b4bbcd 1px;

outline:none;

resize:none;

}

.share{

color:#808080;

padding:0 12px 2px 0;

font-weight:bold;

float:left;

position:relative;

}

.status{

width:108px;

height:14px;

background-image:url('top_status.png');

background-repeat: no-repeat;

color:#000000;

text-align:right;

font-weight:bold;

float:left;

}

.pd{

padding:8px 0 4px 0;

}

.text_status{

position:relative;

top:-1px;

z-index:1;

}

.loading{

display:none;

width:16px;

height:11px;

background-image:url('loading.gif');

float:right;

}

.load_status_out{

padding-top:10px;

}

.load_status{

margin-top:10px;

padding-bottom:10px;

border-bottom:solid #aaaaaa 1px;

}

.status_img{

width:50px;

height:50px;

background:#eceff5;

float:left;

}

.status_text{

padding:0 10px 0 10px;

float:left;

}

.date{

padding-top:5px;

color:#999999;

}

/* button */

.button_outside_border_blue{

width:50px;

margin-top:5px;

border:solid #29447e 1px;

border-bottom:solid #1a356e 1px;

cursor:pointer;

float:right;

}

.button_inside_border_blue{

padding:4px 0 4px 0;

background-color:#5c75a9;

border-top:solid #8a9cc2 1px;

text-align:center;

font-weight:bold;

color:#ffffff;

}

div.button_inside_border_blue:active{

background-color:#4f6aa3;

}

Download the code for better understanding how this code works..

jQuery Code

PHP Code

CSS Code

Related posts: