Facebook like reaction button using jquery.
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:
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"); } }) });