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.
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; }); });
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>
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.' · <a href="#" class="light_blue"> Like</a> · <a href="#" class="light_blue">Comment</a></div> </div> <div class="clear"></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; }
Download the code for better understanding how this code works..
Similar Articles
1 Comments
Leave a comment
Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.
Nice dtatus update.I want to create facebook like button.
Where I can Get details How to create own like button like facebook has?
Nice dtatus update.I want to create facebook like button.
Where I can Get details How to create own like button like facebook has?
A good and great tutorial
A good and great tutorial