Facebook like reaction button using jquery.

by Varun Singh
2020-06-08

10579

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 like reaction button for your website. Today I am going to design facebook like reaction button using php and jquery with very easy steps.

Facebook like reaction button Output:

facebook like reaction button using jquery

Download Script

Live Demo

index.html:

This is the html file for front-end design. Here is the code of this file.

<html>
<head>
<title>Facebook like reaction button  JQuery- coder glass.</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<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>

<body>

<center><div class="base">
<div id="logo">
<img src="logo.png" width="300" height="70" />
</div>
<div id="info1">
Facebook like reaction button using PHP and JQuery
 by VARUN SINGH
</div>

<div class="base2">
<div id="form2" style="float:left">
<div id="form-img">
<img src="profile-img.png" width="80" height="80" />
</div>

<p> 
<img style=" vertical-align: text-top; margin-left:100px;" 
src="images/edirlene.png" alt="edirlene" width="50" height="50" /> 
<b style="color:blue; font-size:16px;">Edirlene: </b>
Hi Varun your website is very cool.

<div class="facebook-feeling">
<span class="like-btn"> 
<span class="like-btn-emo like-btn-default"></span>
<span class="like-btn-text">Like</span> 
<ul 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>
<div class="like-stat"> 
<span class="like-emo"> 
<span class="like-btn-like">
</span>
<span class="like-details">Varun Singh and 1k others</span>
</div>
</div>

</p> 

</div>
</div>
</div>
<div class="clear"></div>
</div>
</center>

</body>
</html>

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

Tags: php java python

Varun Singh

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.