Facebook like reaction button using php and jquery.

POSTED

AUTHOR: VARUN SINGH

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:

Here is the output of the Facebook like reaction button page .

facebook like reaction jquery

download download
/div>

Implementation of code:


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

<html>
	
	<title>Facebook like reaction button design using PHP and JQuery- coder glass.</title>
	<head>
		<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>
	<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-73364464-1', 'auto');
  ga('send', 'pageview');

   </script>
		<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">
			<?php include('../../../advertise/left-ads.php'); ?>
			<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"><!-- container div for feeling system -->
					<span class="like-btn"> <!-- Default like button -->
						<span class="like-btn-emo like-btn-default"></span> <!-- Default like button emotion-->
						<span class="like-btn-text">Like</span> <!-- Default like button text,(Like, wow, sad..) default:Like  -->
						  <ul class="feelings-box"> <!-- feeling buttons container-->
								<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"> <!-- Like statistic container-->
						<span class="like-emo"> <!-- like emotions container -->
							<span class="like-btn-like"></span> <!-- given emotions like, wow, sad (default:Like) -->
						</span>
						<span class="like-details">Varun Singh and 1k others</span>
					</div>
				 </div>
				
				</p> 
				
				<!-- feeling system start -->
				
				
                </div>
				
			</div>
			<?php include('../../../advertise/right-ads.php'); ?>
			</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");
		  
	  }	  
  })
  
  
});

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.


Advertise Here

Comments: