{"id":4693,"date":"2017-11-01T05:14:39","date_gmt":"2017-11-01T05:14:39","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4693"},"modified":"2017-11-01T05:14:39","modified_gmt":"2017-11-01T05:14:39","slug":"facebook-like-reactions-using-php-mysql-and-jquery","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/facebook-like-reactions-using-php-mysql-and-jquery\/","title":{"rendered":"Facebook Like Reactions using PHP, MySQL and Jquery."},"content":{"rendered":"
Just a few days before, Facebook has launched Reactions, an extension of Like button. I succeeded in implementing the same in my\u00a0WallScript 8<\/a>, Build Your Own Social Network. Here is a quick and easy way to implement the Reactions using PHP,Jquery and PDO MySQL. It\u2019s a basic idea of implementing the Reactions. Hope you enjoy the new Reactions for Like button..! Take a quick look at the live demo.<\/div>\n

\u00a0<\/span><\/p>\n

\"Facebook<\/div>\n


\n<\/a>
\nDownload Script<\/a>\u00a0\u00a0\u00a0\u00a0\"\"\u00a0Live Demo<\/a><\/p>\n

Database Design<\/b>
\nTo build the message like reaction system, you have to create four tables such as\u00a0Users<\/i>,\u00a0Messages, Message_Like<\/i>\u00a0and\u00a0Reactions<\/i>. This following image generated by using Mysql Workbench tool.<\/p>\n

<\/span><\/p>\n

Users Table<\/div>\n

User table contains all the users registration details.
\n<\/span><\/p>\n

CREATE TABLE `users<\/b>` (
\n`uid` int NOT NULL\u00a0PRIMARY KEY\u00a0AUTO_INCREMENT\u00a0,
\n`username` varchar(25) NOT NULL UNIQUE,
\n`password` varchar(50) NOT NULL ,
\n`email` varchar(100) NOT NULL,
\n`name` varchar(100) NOT NULL,
\n`profile_pic` varchar(200) NOT NULL,
\n);<\/div>\n


\nData will store in following way, here the password data\u00a0PHP login script with PDO and HASH encryption.<\/p>\n

Users<\/b>
\n<\/span><\/p>\n

\"Facebook<\/div>\n

\u00a0<\/span><\/p>\n

<\/div>\n

\u00a0<\/span><\/p>\n

Messages Table<\/div>\n

This table contains user status messages data. Here\u00a0uid_fk<\/i>\u00a0\u00a0is the FOREIGN KEY to REFERENCES\u00a0users.uid<\/i>
\n<\/span><\/p>\n

CREATE TABLE \u00a0 `messages<\/b>` (
\n`msg_id` int(11) NOT NULL\u00a0PRIMARY KEY\u00a0AUTO_INCREMENT,
\n`message` varchar(200) NOT NULL,
\n`uid_fk` int(11) NOT NULL,
\n`like_count` int(11) DEFAULT NULL,
\n`created` int(11) DEFAULT NULL,
\nFOREIGN KEY\u00a0(uid_fk)\u00a0REFERENCES\u00a0users<\/b>(uid)
\n);<\/div>\n


\nMessages<\/b>
\n<\/span><\/p>\n

\"Facebook<\/div>\n

\u00a0<\/span><\/p>\n

<\/div>\n

\u00a0<\/span><\/p>\n

Reactions Table<\/div>\n

This table contains reaction data names.
\n<\/span><\/p>\n

CREATE TABLE\u00a0reactions<\/b>(
\n‘rid’ INT\u00a0NOT NULL\u00a0PRIMARY KEY\u00a0AUTO_INCREMENT,
\n‘name’ VARCHAR(45) NOT NULL
\n);<\/div>\n


\nReactions<\/b>
\n<\/span><\/p>\n

\"Facebook<\/div>\n

\u00a0<\/span><\/p>\n

<\/div>\n

\u00a0<\/span><\/p>\n

Message Like Table<\/div>\n

Contains all user message likes relation data. Here\u00a0uid_fk<\/i>\u00a0is FOREIGN KEY to REFERENCES\u00a0users.uid, r<\/i>id_fk<\/i>\u00a0is FOREIGN KEY to REFERENCES\u00a0reactions.rid\u00a0<\/i>and\u00a0msg_id_fk<\/i>\u00a0is FOREIGN KEY to REFERENCES\u00a0messages.msg_id<\/i>
\n<\/span><\/p>\n

CREATE TABLE `message_like<\/b>` (
\n`like_id` int(11) NOT NULL\u00a0PRIMARY KEY\u00a0AUTO_INCREMENT,
\n`msg_id_fk` int(11),
\n`uid_fk` int(11) NOT NULL,
\n`created` int(11) NOT NULL,
\n`rid_fk` int(11) NOT NULL,
\nFOREIGN KEY\u00a0(uid_fk)\u00a0REFERENCES\u00a0users<\/b>(uid),
\nFOREIGN KEY\u00a0(msg_id_fk)\u00a0REFERENCES\u00a0messages<\/b>(msg_id),
\nFOREIGN KEY\u00a0(rid_fk)\u00a0REFERENCES\u00a0reactions<\/b>(rid)
\n);<\/div>\n


\nmessage_like<\/b>
\n<\/span><\/p>\n

\"Facebook<\/div>\n

\u00a0<\/span><\/p>\n

<\/div>\n


\nJavaScript Libraries<\/b>
\nYou have to include following JavaScript libraries. I have modified jquery tooltipster plugin for reactions popup.
\n<\/span><\/p>\n

<link rel=”stylesheet” type=”text\/css” href=”css\/tooltipsterReaction.css”>
\n<link rel=”stylesheet” type=”text\/css” href=”css\/tipsy.css”>
\n<script src=”js\/jquery.min.js”><\/script>
\n<script src=”js\/jquery.livequery.js”><\/script>
\n<script src=”js\/jquery.tooltipsterReaction.js”><\/script>
\n<script src=”js\/jquery.tipsy.js”><\/script><\/div>\n


\nJquery Code<\/b>
\nApplying reaction tooltipster to the anchor tag. Tipsy plugin for reaction name tool tip.
\n<\/span><\/p>\n

$(document).ready(function<\/b>()
\n{
\n\/\/Black tooltip for reaction icons.
\n$(“.likeTypeAction”).tipsy({gravity: ‘s’,live:\u00a0true});<\/p>\n

\/\/Reactions popup on mouseover
\n$(“.reaction”).livequery(function<\/b>\u00a0()
\n{
\n\/\/Reactions HTML Content
\nvar<\/b>\u00a0reactionsCode='<span class=”likeTypeAction” original-title=”Like” data-reaction=”1″><i class=”likeIcon likeType”><\/i><\/span>’+
\n‘<span class=”likeTypeAction” original-title=”Love” data-reaction=”2″><i class=”loveIcon\u00a0likeType”><\/i><\/span>’+
\n‘<span class=”likeTypeAction” original-title=”Haha” data-reaction=”3″><i class=”hahaIcon\u00a0likeType”><\/i><\/span>’+
\n‘<span class=”likeTypeAction” original-title=”Wow” data-reaction=”4″><i class=”wowIcon\u00a0likeType”><\/i><\/span>’+
\n‘<span class=”likeTypeAction” original-title=”Cool” data-reaction=”5″><i class=”coolIcon\u00a0likeType”><\/i><\/span>’+
\n‘<span class=”likeTypeAction” original-title=”Confused” data-reaction=”6″><i class=”confusedIcon\u00a0likeType”><\/i><\/span>’+
\n‘<span class=”likeTypeAction” original-title=”Sad” data-reaction=”7″><i class=”sadIcon\u00a0likeType”><\/i><\/span>’+
\n‘<span class=”likeTypeAction last” original-title=”Angry” data-reaction=”8″><i class=”angryIcon\u00a0likeType”><\/i><\/span>’;<\/p>\n

$(this).tooltipster({
\ncontentAsHTML:\u00a0true,
\ninteractive:\u00a0true,
\ncontent: $(reactionsCode),
\n});
\n});<\/p>\n

$(“body”).on(“click”,”.likeTypeAction”,function<\/b>()
\n{
\n…….
\n…….
\n}<\/p>\n

$(“body”).on(“click”,”.unLike”,function<\/b>()
\n{
\n…….
\n…….
\n}
\n});
\n\/\/HTML Code
\n<a href=”#” class=”reaction” id=”like203″ rel=”like”>
\n<i class=”likeIconDefault” ><\/i>Like<\/a><\/div>\n


\nCSS Code<\/b>
\nI have implemented image sprite.
\n<\/span><\/p>\n

.likeType\u00a0{
\nbackground-image: url(‘..\/images\/like_types.png’);
\nbackground-size: 100%;
\ndisplay: block;
\nheight: 40px;
\nimage-rendering: crisp-edges;
\nline-height: 1;
\nwidth: 40px;
\ncursor: pointer;
\n}
\n.angryIcon\u00a0{
\nbackground-position: 0px 0px;
\n}
\n.confusedIcon\u00a0{
\nbackground-position: 0px -40px;
\n}
\n.hahaIcon\u00a0{
\nbackground-position: 0px -80px;
\n}
\n.likeIcon\u00a0{
\nbackground-position: 0px -120px
\n}
\n.loveIcon\u00a0{
\nbackground-position:0px -160px;
\n}
\n.sadIcon\u00a0{
\nbackground-position: 0px -200px;
\n}
\n.wowIcon\u00a0{
\nbackground-position: 0px -240px;
\n}
\n.coolIcon\u00a0{
\nbackground-position: 0px -280px;
\n}
\n.likeTypeAction{float: left; margin-right: 8px; cursor: pointer;}<\/div>\n


\nLike Ajax<\/b>
\nContains javascript code.\u00a0$(“body”).on(‘click’,’.likeTypeAction’, function(){}<\/i>– here\u00a0likeTypeAction<\/i>\u00a0is the class name of the reaction icon tag. Using $(this).parent().parent().attr(“id”) calling icon tag message ID value.
\n<\/span><\/p>\n

\/*Reaction*\/
\n$(“body”).on(“click”,”.likeTypeAction”,function<\/b>()
\n{
\nvar\u00a0reactionType=$(this).attr(“data-reaction”);
\nvar\u00a0reactionName=$(this).attr(“original-title”);
\nvar\u00a0rel=$(this).parent().parent().attr(“rel”);
\nvar\u00a0x=$(this).\u00a0parent().parent().attr(“id”);
\nvar\u00a0sid=x.split(“reaction”);
\nvar\u00a0msg_id=sid[1];<\/p>\n

var\u00a0htmlData='<i class=”‘+reactionName.toLowerCase()+’IconSmall likeTypeSmall” ><\/i>’+reactionName+'<\/a>’;
\nvar\u00a0dataString = ‘msg_id=’+ msg_id +’&rid=’+reactionType;<\/p>\n

$.ajax({
\ntype: “POST”,
\nurl: ‘ajaxReaction.php’,
\ndata: dataString,
\ncache:\u00a0false,
\nbeforeSend:\u00a0function<\/b>(){},
\nsuccess:\u00a0function<\/b>(html)
\n{
\nif(parseInt(html)==1)
\n{
\n$(“#like”+msg_id).html(htmlData).removeClass(‘reaction’).removeClass(‘tooltipstered’).addClass(‘unLike’).attr(‘rel’,’unlike’);
\n$(“#”+x).hide();
\n}
\n}
\n});<\/p>\n

return\u00a0false;
\n});<\/p><\/div>\n


\nUnlike Ajax<\/b>
\nContains javascript code.\u00a0$(“body”).on(‘click’,’.unLike’, function(){}<\/i>– here\u00a0unLike<\/i>\u00a0is the class name of the unlike anchor tag. Using $(this).attr(“id”) calling anchor tag message ID value.
\n<\/span><\/p>\n

$(“body”).on(“click”,”.unLike”,function<\/b>()
\n{
\nvar\u00a0reactionType=’1′;
\nvar\u00a0x=$(this).attr(“id”);
\nvar\u00a0sid=x.split(“like”);
\nvar\u00a0msg_id=sid[1];
\nvar\u00a0dataString = ‘msg_id=’+ msg_id +’&rid=’+reactionType;
\nvar\u00a0htmlData='<i class=”likeIconDefault” ><\/i>Like<\/a>’;
\n$.ajax({
\ntype: “POST”,
\nurl: ‘ajaxReaction.php’,
\ndata: dataString,
\ncache: false,
\nbeforeSend:\u00a0function<\/b>(){},
\nsuccess:\u00a0function<\/b>(html)
\n{
\nif(parseInt(html)==2)
\n{
\n$(“#like”+msg_id).html(htmlData).addClass(‘reaction’).addClass(‘tooltipstered’).removeClass(‘unLike’);
\n}
\n}
\n});<\/p>\n

return\u00a0false;
\n});<\/p><\/div>\n

<\/p>\n

index.php<\/b>
\nContains PHP and HTML code, displaying all of the user updates by calling\u00a0$feed->newsFeed();<\/i>
\n<\/span><\/p>\n

<?php<\/b>
\ninclude_once\u00a0‘config.php’;
\n$feedData=$feed->newsFeed();
\n?><\/b>
\n<!DOCTYPE html >
\n<html>
\n<head>
\n<!– JavaScript CSS –>
\n<link rel=”stylesheet” type=”text\/css” href=”css\/tooltipsterReaction.css”>
\n<link rel=”stylesheet” type=”text\/css” href=”css\/tipsy.css”>
\n<link rel=”stylesheet” type=”text\/css” href=”css\/app.css”>
\n<script src=”js\/jquery.min.js”><\/script>
\n<script src=”js\/jquery.livequery.js”><\/script>
\n<script src=”js\/jquery.tooltipsterReaction.js”><\/script>
\n<script src=”js\/jquery.tipsy.js”><\/script>
\n<script src=”js\/app.js”><\/script>
\n<!– JavaScript CSS End –>
\n<\/head>
\n<body>
\n<?php<\/b>
\nforeach($feedData as $data)
\n{
\n?><\/b>
\n<div class=”messageBody” id=”msg<?php\u00a0<\/b>echo\u00a0$data->msg_id;\u00a0?><\/b>“>
\n<img src=”<?php\u00a0<\/b>echo\u00a0$data->profile_pic;\u00a0?><\/b>” class=”messageImg”\/>
\n<b><a href=”<?php\u00a0<\/b>echo\u00a0BASE_URL.$data->username;\u00a0?><\/b>“><?php\u00a0<\/b>echo\u00a0$data->name;\u00a0?><\/b><\/a><\/b>
\n<?php\u00a0<\/b>echo\u00a0$data->message; ?>
\n<div class=”messageFooter”>
\n<a href=”#” class=”reaction” id=”like<?php\u00a0<\/b>echo\u00a0$data->msg_id; ?>” rel=”like”>
\n<i class=”likeIconDefault” ><\/i>Like<\/a>
\n<\/div>
\n<\/div>
\n<?php<\/b>\u00a0}\u00a0?>
\n<\/body>
\n<\/html><\/div>\n

<\/p>\n

config.php<\/b>
\nDatabase configuration file, modify username, password and database values. Enable\u00a0PDO extension<\/i>\u00a0for PHP
\n<\/span><\/p>\n

<?php<\/b>
\nsession_start();
\ndefine(‘DB_SERVER’, ‘localhost’);
\ndefine(‘DB_USERNAME’, ‘username’);
\ndefine(‘DB_PASSWORD’, ‘password’);
\ndefine(‘DB_DATABASE’, ‘Reations’);
\ndefine(“BASE_URL”, “http:\/\/www.yourwebsite.com\/”);<\/p>\n

function<\/b>\u00a0getDB()
\n{
\n$dbhost=\u00a0DB_SERVER;
\n$dbuser=\u00a0DB_USERNAME;
\n$dbpass=\u00a0DB_PASSWORD;
\n$dbname=\u00a0DB_DATABASE;
\n$dbConnection =\u00a0new\u00a0PDO(“mysql:host=$dbhost;dbname=$dbname”, $dbuser, $dbpass);
\n$dbConnection->exec(“set names utf8”);\u00a0\/\/utf-8 support
\n$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
\nreturn\u00a0$dbConnection;
\n}<\/p>\n

include_once\u00a0‘feed.php’;
\n$feed =\u00a0new\u00a0feed();
\n?><\/b><\/div>\n

<\/p>\n

ajaxReaction.php<\/b>
\nAjax post file for updating user reactions.
\n<\/span><\/p>\n

<?php\u00a0<\/b>
\ninclude_once\u00a0‘config.php’;
\n$feedData=$feed->newsFeed();
\n$sessions_uid=$_SESSION[‘uid’];
\nif($_POST[‘msg_id’]\u00a0&&\u00a0$_POST[‘rid’]\u00a0&&\u00a0$session_uid>0)
\n{
\n$msg_id=$_POST[‘msg_id’];
\n$rid=$_POST[‘rid’];
\n$data=$feed->userReaction($session_uid,$msg_id,$rid);
\necho\u00a0$data;
\n}
\n?><\/b><\/div>\n

<\/p>\n

feed.php<\/b>
\nContains simple PHP code to update user reaction data, this will get all users update. You have to modify based on your session id.
\n<\/span><\/p>\n

<?php<\/b>
\nclass\u00a0feed
\n{
\n\/* News Feed Data *\/
\npublic\u00a0function<\/b>\u00a0newsFeed()
\n{
\n$db =\u00a0getDB();
\n$stmt = $db->prepare(“SELECT U.uid, U.name, U.username,U.profile_pic, M.msg_id, M.message, M.created, M.like_count FROM users U,messages M WHERE U.uid=M.uid_fk ORDER BY M.msg_id DESC”);
\n$stmt->execute();
\n$data = $stmt->fetchAll(PDO::FETCH_OBJ);
\n$db = null;
\nreturn\u00a0$data;
\n}<\/p>\n

\/* User Reaction Check *\/
\npublic\u00a0function<\/b>\u00a0reactionCheck($uid, $msg_id)
\n{
\n$db =\u00a0getDB();
\n$stmt = $db->prepare(“SELECT L.like_id, R.name FROM message_like L, reactions R WHERE R.rid=L.rid_fk AND L.uid_fk=:uid\u00a0AND L.msg_id_fk=:msg_id”);
\n$stmt->bindValue(‘:uid’, $uid,\u00a0PDO::PARAM_INT);
\n$stmt->bindValue(‘:msg_id’, $msg_id,\u00a0PDO::PARAM_INT);
\n$stmt->execute();
\n$data= $stmt->fetch(PDO::FETCH_OBJ);
\n$db = null;
\nreturn\u00a0$data;
\n}<\/p>\n

\/* News Feed Data *\/
\npublic\u00a0function<\/b>\u00a0userReaction($uid,$msg_id,$rid)
\n{
\n$db =\u00a0getDB();
\n$stmt1 = $db->prepare(“SELECT like_id FROM message_like WHERE uid_fk=:uid AND msg_id_fk=:msg_id”);
\n$stmt1->bindValue(‘:uid’, $uid,\u00a0PDO::PARAM_INT);
\n$stmt1->bindValue(‘:msg_id’, $msg_id,\u00a0PDO::PARAM_INT);
\n$stmt1->execute();
\n$count=$stmt1->rowCount();<\/p>\n

if($count > 0)
\n{
\n$stmt = $db->prepare(“DELETE FROM message_like WHERE uid_fk=:uid AND msg_id_fk=:msg_id”);
\n$stmt->bindValue(‘:uid’, $uid,\u00a0PDO::PARAM_INT);
\n$stmt->bindValue(‘:msg_id’, $msg_id,\u00a0PDO::PARAM_INT);
\n$stmt->execute();
\n$db = null;
\nreturn\u00a02;
\n}
\nelse
\n{
\n$stmt = $db->prepare(“INSERT INTO message_like (msg_id_fk, uid_fk, created, rid_fk) VALUES (:msg_id, :uid, :created, :rid)”);
\n$stmt->bindValue(‘:uid’, $uid,\u00a0PDO::PARAM_INT);
\n$stmt->bindValue(‘:msg_id’, $msg_id,\u00a0PDO::PARAM_INT);
\n$created=time();
\n$stmt->bindValue(‘:created’, $created,\u00a0PDO::PARAM_INT);
\n$stmt->bindValue(‘:rid’, $rid,\u00a0PDO::PARAM_INT);
\n$stmt->execute();
\n$db = null;
\nreturn\u00a01;
\n}<\/p>\n

}
\n}
\n?><\/b><\/div>\n

\n
<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Just a few days before, Facebook has launched Reactions, an extension of Like button. I succeeded in implementing the same in my\u00a0WallScript 8, Build Your Own Social Network. Here is a quick and easy way to implement the Reactions using PHP,Jquery and PDO MySQL. It\u2019s a basic idea of implementing the Reactions. Hope you enjoy […]<\/p>\n","protected":false},"author":1,"featured_media":4694,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[30],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4693"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4693"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4693\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4694"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}