Facebook comment box and facebook status box using jquery in php with new facebook like reaction button.

POSTED

AUTHOR: VARUN SINGH

Today I am going to design facebook comment box and facebook status box using jquery, php and ajax. Many programmers are excited to learn how to design facebook comment box or status box with facebook like reaction buttons for their website. In this tutorial I have also include new facebook like reaction button script using jquery.
A Facebook status is a feature which allows users to share their thoughts, locatio and important information with their friends. Generally a short king of information without going into too much details. When we posts a status on our wall, it also posts on the user's personal wall, as well as in the news feeds of their friends. You can also update status from a web browser and mobile site.
Do you know What is facebook like reaction button. This new facebook like reaction buttons show your feelings - Like, love, haha, yay, wow, sad, angry appears when hovering the mouse cursor on the normal like button on facebook page or facebook mobile Application. So Please read the article step by step to learn how to make facebook comment box and status box with like reaction button for your website. Now i am going to display the output of our Facebook status, comment box with facebook reaction button.

Facebook status and comment box with facebook like reaction button Output:

Here is the output of the page .

facebook like reaction jquery


download download


Implementation of code:

I am not displaying all code on this page. Please Download to get full complete code.


index.php: This is the php file for front-end design. Here is the code of this file.

<?php
<!DOCTYPE html>
<html lang="en">
  <head>

	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/post.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="script.js"></script>
 
   </head>

  <body>

    <div class="container">
	<div class="row">
	<div style="width:580px;" class="col-md-6 col-md-offset-3">
		<h3 class="text-center"><img src="https://coderglass.com/images/logo.png" /></h3>
		<h3 class="text-center">Facebook  update status and comment box using Jquery, Php and Ajax </h3>
		<hr>

		<form action=" " method="post" id="uploadimage" name="form" enctype="multipart/form-data" class="facebook-share-box">
			<ul class="post-types">
				<li class="post-type">
					<a class="status" title="" href="#"><i class="icon icon-file"></i> Share an Update</a>
				</li>
				<li class="post-type">
					<a class="photos" href="#"><i class="icon icon-camera"></i> Add photos</a>
				</li>
				<li class="post-type">
					<a class="album" href="#"><i class="icon icon-album"></i> Create Photo Album</a>
				</li>
			</ul>
			<div class="share">
				<div class="arrow"></div>
				<div class="panel panel-default">
                      
                      <div class="panel-body">
                        <div class="">
						    <img src="varun-singh.jpg" style="height:60px; width:60px; float:left; margin-right:3px;" />
                            <textarea name="content" id="content" cols="40" rows="10"  class="form-control message" style="height: 60px; width:450px; overflow: hidden;" placeholder="What's on your mind ?"></textarea> 
						</div>
						<div   id="image_preview"><img id="previewing"  src="noimage.png" style="height:50px; width:60px;" /></div>
                      </div>
						<div class="panel-footer">
								<div class="row">
									<div class="col-md-7">
										<div class="form-group">
											<div class="btn-group">
											  
											  <button type="button" class="btn btn-default"><i class="icon ">
											  <div class="image-upload">
											  
                                              <label for="file">
                                              <img src="./css/pic.png"/>
                                              </label>

                                                     <input name="file"  id="file" type="file"/>
													 
                                               </div>
											  
											  </i></button>
											  <button type="button" class="btn btn-default"><i class="icon icon-friends"></i> </button>
											  <button type="button" class="btn btn-default"><i class="icon icon-smile"></i></button>
											  <button type="button" class="btn btn-default"><i class="icon icon-map-marker"></i> </button>
											</div>
										</div>
									</div>
									<div class="col-md-5">
										<div class="form-group">
											<select name="privacy" class="form-control privacy-dropdown pull-left input-sm">
												<option value="1" selected="selected">Public</option>
												<option value="2">Only my friends</option>
												<option value="3">Only me</option>
											</select>                                    
											<input type="submit" name="submit" value="Post"   id="v" name="submit" class="post_button  btn btn-primary submit">                               
										</div>
									</div>
								</div>
						</div>
                    </div>
			</div>
			</div>
		</form>
	
	</div>
	
      
        <div id="flash"   ></div>

         <div id="display" ></div>  
   
	</div>

	</div> 
	
  </body>
</html>
?>


ajax-php-file.php: This is the php file is use to upload images into database.

<?php
if(isset($_FILES["file"]["type"]))
{
$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
) && ($_FILES["file"]["size"] < 100000)
&& in_array($file_extension, $validextensions)) {
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
}
else
{
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";
}
else
{
$sourcePath = $_FILES['file']['tmp_name']; 
$targetPath = "upload/".$_FILES['file']['name']; 
move_uploaded_file($sourcePath,$targetPath) ; 

}
}
}
else
{
echo "<span id='invalid'>***Invalid file Size or Type***<span>";
}
}
?>


insert.php: This is the php file is used to insert comments or status in database. Here is the code of this file.

<?php
$con=mysqli_connect("localhost","root","","facebook");
mysqli_set_charset($con,'utf8');

$sql_check = mysqli_query($con,"SELECT * FROM comments order by comment_id desc");

if(isSet($_POST['content']))

{
$content=$_POST['content'];
mysqli_query($con,"insert into comments(comment) values ('$content')");
$sql_in= mysqli_query($con,"SELECT comment,comment_id FROM comments order by comment_id desc");
$r=mysqli_fetch_array($sql_in);


}

?>
<head>
<link rel="stylesheet" type="text/css" href="css/feeling.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/feeling.js"></script>
</head>
<center>
<table cellpadding="0" cellspacing="0" width="550px ">

<tr class="comment">
<td style="padding:10px;  background:#ffffff;  border: 1px solid #adb2bb;" class="comment_box" align="left">
<img src="varun-singh.jpg" style="height:40px; width:40px; float:left; margin-right:3px;" /><b>Varun Singh</b><br>
<p>Just now<img src="lock.png" style=" margin-left:4px;" /></p>
<?php echo $r['comment']; ?><br>
<p>I am not diplaying and uploading your images because of unnecessary images will be uploaded on our server. </p>
<img src="upload/taapasi.jpg" height="200" width="500"  />
<hr>
                    <span class="like-btn"> 
						<span class="like-btn-emo like-btn-default"></span> 
						<span class="like-btn-text">Like</span> 
						  <ul style="margin-top:30px;" class="feelings-box"> 
								<li class="feeling feeling-like" data-feeling="Like"></li>
								<li class="feeling feeling-love" data-feeling="Love"></li>
								<li class="feeling feeling-haha" data-feeling="HaHa"></li>
								<li class="feeling feeling-wow" data-feeling="Wow"></li>
								<li class="feeling feeling-sad" data-feeling="Sad"></li>
								<li class="feeling feeling-angry" data-feeling="Angry"></li>
						  </ul>
					</span>
</td>

</tr>

</table>
</center>


style.css: This file is used to set the every body part and other things on perfect postion.

body{
	background-image: url("grids.png");
	height:100%;
	margin:0px;
	padding:0px;
	width:100%;
	
}
.base{
	position:absolute;
	width:100%;
	top:0px;
	left:0px;
	color:gray;

}
.base2{
	width:1000px;
	height:430px;
}


#logo{
	
	margin-top:20px;
	width:1000px;
	height:70px;
	
}

#info1{
	
	width:1000px;
	height:25px;
	margin-top:25px;
	font-family: 'Open Sans', sans-serif;
	background: #000000;
    background: -webkit-linear-gradient(top,#000000,#000000);
    border-color: rgba(0,0,0,0.1);
    color: #fff!important;
    font-size: 20px;
	padding-top:5px;
}

#form1{
	margin-top:17px;
	width:230px;
	margin-left:20px;
    background:red;
	
	
	

}
#form2{
	margin-top:17px;
	width:500px;
	height:280px;
    padding-top:20px;
	
	
	

}
#form3{
	margin-top:17px;
	width:230px;
	margin-right:20px;
    background:red;
	
	
	

}
.clear{
	clear:both;
}
#form-img{
	
	width:99px;
	height:99px;
}
#mailbox{
	width:270px;
	height:42px;
	border-radius:5px 5px 5px 5px;
	background:white;
	
	font-size:18px;
	margin-top:20px;
	border-width: 0px;
	border-style:solid;
	border-color: blue;
}
#button2{
	width:270px;
	height:35px;
	
	margin-top:10px;
	background:#498af2;
	font-family:verdana;
	font-size:14px;
	color:white;
	border-radius:5px 5px 5px 5px;
	border-width: 1px;
	border-style:solid;
	border-color: gray;
	cursor:pointer;
	outline:none;
	
}
#info3{
	float:right;
	margin-top:10px;
	font-size:13px;
	font-family: 'Open Sans', sans-serif;
	color:#498af2;
	padding-right:42px;
	font-weight:bold;
}
#info3 a{
	color:#498af2;
	text-decoration:none;
}
#info4{
	margin-top:10px;
	font-size:13px;
	font-family: 'Open Sans', sans-serif;
	
	font-weight:bold;
}
#info4 a{
	color:#498af2;
	text-decoration:none;
}
#info5{
	margin-top:30px;
	font-size:13px;
	font-family: 'Open Sans', sans-serif;
	color:#87898b;
	font-weight:bold;
}

#logo2{
	
	margin-top:10px;
	height:27px;
	width:243px;
}
#bottom {
	
	
	width:1000px;
	height:60px;
	margin-top:25px;
	font-family: 'Open Sans', sans-serif;
	background: #000000;
    background: -webkit-linear-gradient(top,#000000,#000000);
    border-color: rgba(0,0,0,0.1);
    color: #fff!important;
    font-size: 20px;
	padding-top:5px;

	
}
#bottom ul{
	list-style: none;
	
}
#bottom ul li{
	float:left;
	margin-left:20px;
     
	
}
#searchid
	{
		width:500px;
		border:solid 1px #000;
		padding:10px;
		font-size:14px;
		border-radius:5px 5px 5px 5px;
	}
	#result
	{

		width:500px;
		border-radius:5px 5px 5px 5px;
		display:none;
		margin-top:-1px;
		border-top:0px;
		overflow:hidden;
		border:1px #CCC solid;
		background-color: white;
	}
	.show
	{
		padding:10px; 
		border-bottom:1px #999 dashed;
		font-size:15px; 
		height:50px;
	}
	.show:hover
	{
		background:#4c66a4;
		color:#FFF;
		cursor:pointer;
	}

feeling.css: This file is used to set the every body part and other things on perfect postion.

.facebook-feeling{
  max-width:100%;
  margin:10px auto;
  padding:0 60px;
  position: absolute;
}

.like-btn {
  font-weight: bold;
  color: #7f7f7f;
  position: relative;
  cursor: pointer;
  padding: 20px 20px 0 0;
}

.like-btn:hover {
  text-decoration: underline;
}

.like-btn-default {
  background-image: url('../images/facebook.png');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -277px -446px;
}

.like-btn-emo {
  display: inline-block;
  margin: 0 6px -3px 0;
  width: 16px;
  height: 16px;
}

.feelings-box {
  height: 44px;
  width: 340px;
  padding: 10px;
  position: absolute;
  top: -63px;
  left: -14px;
  box-shadow: 1px 1px 2px #cccccc, -1px 0px 2px #eeeeee;
  border-radius: 44px 44px;
  display: none;
}

.feeling {
  list-style-type: none;
  cursor: pointer;
  display: inline-block;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 8px;
  opacity: 0;
  transform: scale(1, 1);
  transition: opacity .5s ease-in-out 1s, transform .07s ease-in-out 0s, top .07s ease-in-out 0s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center
}

.like-btn:hover .feelings-box {
  display: block;
}

.feeling-like {
  left: 10px;
  transition-delay: 0s;
  background-image: url('../images/feelings_like.png');
}

.feeling-love {
  left: 68px;
  transition-delay: .05s;
  background-image: url('../images/feelings_love.png');
}

.feeling-haha {
  left: 126px;
  transition-delay: .1s;
  background-image: url('../images/feelings_haha.png');
}

.feeling-wow {
  left: 184px;
  transition-delay: .15s;
  background-image: url('../images/feelings_wow.png');
}

.feeling-sad {
  left: 242px;
  transition-delay: .2s;
  background-image: url('../images/feelings_sad.png');
}

.feeling-angry {
  left: 300px;
  transition-delay: .25s;
  background-image: url('../images/feelings_angry.png');
}



.like-btn:hover .feeling {
  opacity: 1;
  animation-name: feeling_delay;
  animation-duration: .5s;
}

@keyframes feeling_delay {
  0% {
    width: 48px;
    height: 48px;
    top: 60px;
  }
  48% {
    width: 56px;
    height: 56px;
    top: 5px;
  }	
  100% {
    width: 48px;
    height: 48px;
    top: 8px;
  }
}


.like-btn:hover .feeling-like {
  animation-delay: 0s
}

.like-btn:hover .feeling-love {
  animation-delay: .05s
}

.like-btn:hover .feeling-haha {
  animation-delay: .1s
}

.like-btn:hover .feeling-wow {
  animation-delay: .15s
}

.like-btn:hover .feeling-sad {
  animation-delay: .2s
}

.like-btn:hover .feeling-angry {
  animation-delay: .25s
}

.feeling:hover {
  transform: scale(1.3, 1.3);
  top: 2px
}



.feeling::before {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  line-height: 17px;
  font-size: .7em;
  width: 80%;
  height: 17px;
  margin-left: 10%;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  position: absolute;
  top: -25px;
  opacity: 0;
  transition: opacity .2s ease-in-out 0s;
}

.feeling:hover::before {
  opacity: 1
}

.feeling-like::before {
  content: 'Like'
}

.feeling-love::before {
  content: 'Love'
}

.feeling-haha::before {
  content: 'Haha'
}

.feeling-wow::before {
  content: 'Wow'
}


.feeling-sad::before {
  content: 'Sad'
}

.feeling-angry::before {
  content: 'Angry'
}

.like-stat {
  margin-top: 10px;
  margin-left:60px;
}


.like-btn-like{
  background-image: url('../images/feeling-small.png');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -17px -151px;
}

.like-btn-love{
  background-image: url('../images/feeling-small.png');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 -168px;
}

.like-btn-haha{
  background-image: url('../images/feeling-small.png');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 -151px;
}

.like-btn-wow{
  background-image: url('../images/feeling-small.png');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -17px -185px;
}

.like-btn-sad{
  background-image: url('../images/feeling-small.png');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -17px -168px;
}

.like-btn-angry{
  background-image: url('../images/feeling-small.png');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -17px -117px;
}

.like-btn-text-like {
  color:rgb(88, 144, 255);
}
.like-btn-text-wow,.like-btn-text-haha,.like-btn-text-sad {
  color:rgb(240, 186, 21)
}
.like-btn-text-love{
  color:rgb(242, 82, 104)
}
.like-btn-text-angry{
  color:rgb(247, 113, 75);
}

.like-emo > span{
    display: inline-block;
    margin: 0 -3px -3px 5px;
    width: 16px;
    height: 16px;
    border: 1px solid #EEE;
    border-radius: 50%;

}

.like-details{
  margin-left:10px;
  color:#9197a3;
  font-size:12px;
}

feeling.js: This file is used to display the reaction on click by users.

$(document).ready(function(){
  $(".feeling").on("click",function(){   // like click
	var data_feeling = $(this).attr("data-feeling");
	$(".like-details").html("You, Varun Singh and 1k others");
	$(".like-btn-emo").removeClass().addClass('like-btn-emo').addClass('like-btn-'+data_feeling.toLowerCase());
	$(".like-btn-text").text(data_feeling).removeClass().addClass('like-btn-text').addClass('like-btn-text-'+data_feeling.toLowerCase()).addClass("active");;

	if(data_feeling == "Like")
	  $(".like-emo").html('<span class="like-btn-like"></span>');
	else
	  $(".like-emo").html('<span class="like-btn-like"></span><span class="like-btn-'+data_feeling.toLowerCase()+'"></span>');
  });
  
  $(".like-btn-text").on("click",function(){ // undo like click
	  if($(this).hasClass("active")){
		  $(".like-btn-text").text("Like").removeClass().addClass('like-btn-text');
		  $(".like-btn-emo").removeClass().addClass('like-btn-emo').addClass("like-btn-default");
		  $(".like-emo").html('<span class="like-btn-like"></span>');
		  $(".like-details").html("Varun Singh and 1k others");
		  
	  }	  
  })
  
  
});


The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.


Comments: