就在幾天前，Facebook推出了Reactions，這是Like按鈕的擴展。我成功地在我的WallScript 8，構建自己的社交網絡中實現了相同的功能。這是使用PHP，Jquery和PDO MySQL實現Reactions的快速簡便方法。這是實施反應的基本思路。希望你喜歡新的Reactions for Like按鈕..！快速瀏覽一下現場演示。
下載腳本 
現場演示
數據庫設計
要構建像反應系統這樣的消息，您必須創建四個表，例如Users，Messages，Message_Like 和Reactions。下面的圖像是使用Mysql Workbench工具生成的。
用戶表
用戶表包含所有用戶註冊詳細信息。
CREATE TABLE` 用戶 `（
` UID `詮釋NOT NULL PRIMARY KEY AUTO_INCREMENT，
` 用戶名 `VARCHAR（25）NOT NULL UNIQUE，
' 密碼 'VARCHAR（50）NOT NULL，
` 電子郵件 'VARCHAR（100）NOT NULL，
` 名 ` varchar（100）NOT NULL，
` profile_pic`varchar（200）NOT NULL，
）;
數據將以下列方式存儲，這裏是帶有PDO和HASH加密的密碼數據PHP登錄腳本。
用戶
消息表
該表包含用戶狀態消息數據。這裏uid_fk 是引用users.uid的FOREIGN KEY
CREATE TABLE` 消息 `（
` MSG_ID `INT（11）NOT NULL PRIMARY KEY AUTO_INCREMENT，
` 消息 `VARCHAR（200）NOT NULL，
` uid_fk `INT（11）NOT NULL，
` LIKE_COUNT `INT（11）DEFAULT NULL，
` 創建 `int（11）DEFAULT NULL，
FOREIGN KEY（uid_fk）REFERENCES users（uid） ）;
消息
反應表
該表包含反應數據名稱。
CREATE TABLE 反應（
' RID ' INT NOT NULL PRIMARY KEY AUTO_INCREMENT，
' 名稱 ' VARCHAR（45）NOT NULL
）;
反應
消息像表
包含所有用戶消息喜歡的關係數據。這裏uid_fk是FOREIGN KEY to REFERENCES users.uid，r id_fk 是FOREIGN KEY to REFERENCES reactions.rid 和msg_id_fk是FOREIGN KEY to REFERENCES messages.msg_id
CREATE TABLE` message_like `（
` like_id `INT（11）NOT NULL PRIMARY KEY AUTO_INCREMENT，
` msg_id_fk `INT（11），
` uid_fk `INT（11）NOT NULL，
` 創建 `INT（11）NOT NULL，
` rid_fk ` int（11）NOT NULL，
FOREIGN KEY（uid_fk）REFERENCES 用戶（uid），
FOREIGN KEY（msg_id_fk）REFERENCES 消息（msg_id），
FOREIGN KEY （rid_fk） REFERENCES reaction（rid）
）;
message_like
JavaScript庫
您必須包含以下JavaScript庫。我已經爲反應彈出修改了jquery tooltipster插件。
<link rel =“ stylesheet ”type =“ text / css ”href =“ css / tooltipsterReaction.css ”>
<link rel =“ stylesheet ”type =“ text / css ”href =“ css / tipsy.css ”>
<script src =“ js / jquery.min.js ”> </ script>
<script src =“ js / jquery.livequery.js ”> </ script>
<script src =“ js / jquery.tooltipsterReaction.js ”> </ script>
<script src =“ js / jquery.tipsy.js ”> </ script>
Jquery代碼
將反應工具提示應用於錨標記。反應名稱工具提示的Tipsy插件。
$（文件）。準備（函數（）
{
//用於反應圖標黑色提示。
$（ “ .likeTypeAction ”）。醉意（{比重： 'S'，住：真 }）;
//反應鼠標懸停彈出
$（“ 。反應 ”） 。的liveQuery（函數（）
{
//反應HTML內容
變種 reactionsCode =” <跨度類= “likeTypeAction”原始標題= “ 喜歡”數據-反應=“ 1 ”> <I類=“ likeIcon likeType”> </ I > </ span> '+
' <“data-reaction =”2“> <i class =” loveIcon likeType “> </ i> </ span> '+ ' <span class =”likeTypeAction“original-title =” Haha “data-reaction =”3“ > <i class =“ hahaIcon likeType ”> </ i> </ span> '+ ' <span class =“likeTypeAction”original-title =“ Wow ”data-reaction =“4”> <i class =“ wowIcon likeType “> </ i> </ span> '+ ' <span class =”likeTypeAction“original-title =” Cool “data-reaction =“5”> <i class =“ coolIcon likeType ”> </ i> </ span> '+ ' <span class =“likeTypeAction”original-title =“
true， interactive：true， content：$（reactionsCode）， }）; }）; $（”
body “）。on（” click “，”。likeTypeAction “，function（）
{
.......
.......
}
$（” body “）。on（” click “，”。unLike “，function（）
{
.......
.......
}
}）;
// HTML代碼
<a href =”＃“class =” reaction “id =” like 203 “rel =” like “>
<i class =” likeIconDefault “> </ i>喜歡</a>
CSS代碼
我實現了圖像精靈。
。likeType {
background-image：url（'../ images / like_types.png'）;
背景大小：100％;
顯示：塊;
身高：40px;
圖像渲染：清晰邊緣;
line-height：1;
寬度：40px;
遊標：指針;
}
。angryIcon {
background-position：0px 0px;
}
。confusedIcon {
background-position：0px -40px;
}
。hahaIcon {
background-position：0px -80px;
}
。likeIcon {
background-position：0px -120px
}
。loveIcon {
background-position：0px -160px;
}
。sadIcon {
background-position：0px -200px;
}
。wowIcon {
background-position：0px -240px;
}
。coolIcon {
background-position：0px -280px;
}
.likeTypeAction {float：left; 保證金權利：8px; cursor：pointer;}
像Ajax一樣
包含javascript代碼。$（“body”）。on（'click'，'。likeTypeAction'，function（）{} - 這裏likeTypeAction是反應圖標標籤的類名。使用$（this）.parent（）。parent（）。 attr（“id”）調用圖標標記消息ID值。
/ * Reaction * /
$（“ body ”）。上（ “ 點擊 ”， “ .likeTypeAction ”，函數（）
{
VAR reactionType = $（本）。ATTR（ “數據-反應”）;
VAR 。reactionName = $（本）ATTR（ “原始標題”）;
無功 rel = $（this）.parent（）。parent（）。attr（“rel”）;
var x = $（this） .parent（）。parent（）。attr（“id”）;
var sid = x。分裂（“反應”）;
VAR htmlData =” <I類=“” + reactionName。toLowerCase（）+ 'IconSmall likeTypeSmall </ i>的”> '+ reactionName +' </A>';
var dataString =' msg_id = '+ msg_id +' ＆rid = '+ reactionType;
$ .ajax（{
type：“ POST ”，
url：' ajaxReaction.php '，
data：dataString，
cache：false，
beforeSend：function（）{}，
success：function（html）
{ if（parseInt（html）== 1） { $（“ ＃like ” + MSG_ID）。html（htmlData）。
removeClass（' reaction '）。removeClass（' tooltipstered '）。addClass（' unLike '）。attr（' rel '，' 不同 '）;
$（ “＃” + X）。hide（）;
}
}
}）;
返回 虛假 ;
}）;
與Ajax不同，
包含javascript代碼。$（“body”）。on（'click'，'。unLike'，function（）{} - 這裏unLike是不同的錨標籤的類名。使用$（this）.attr（“id”）調用錨標記消息ID值。
$（“ 身體 ”）。上（ “ 點擊 ”， “ 不像 ”，函數（）
{
VAR reactionType = '1';
變種 X = $（本）。ATTR（ “ID”）;
VAR 。SID = X 分裂（ “像”）;
無功 msg_id = sid [1];
var dataString =' msg_id = '+ msg_id +' ＆rid = '+ reactionType;
var htmlData =' <i class =“likeIconDefault”> </ i>贊</a> ';
$ .ajax （{
type：“ POST ”，
url：'
cache：false，
beforeSend：function（）{}，
success：function（html）
{
if（parseInt（html）== 2）
{ $（“ ＃like ”+ msg_id）。html（htmlData）。addClass（' 反應 '）。addClass（' tooltipstered '）。removeClass（ ' 不像 '）; } } }）; 返回虛假 ; }）;
index.php
包含PHP和HTML代碼，通過調用$ feed-> newsFeed（）顯示所有用戶更新;
<？PHP的
include_once '的config.php ';
$ feedData = $ feed-> newsFeed（）;
？>
<！DOCTYPE html>
<html>
<head>
<！ - JavaScript CSS - >
<link rel =“ stylesheet ”type =“ text / css ”href =“ css / tooltipsterReaction.css ”>
<link rel = “ stylesheet ”type =“ text / css ”href =“ css / tipsy.css ”>
<link rel =“ stylesheet ”type =“ text / css ”href =“ css / app.css ”>
js / jquery.livequery.js “> </ script>
<script src =” js / jquery.tooltipsterReaction.js “> </ script>
<script src =” js / jquery.tipsy.js “> </ script>
< script src =“ js / app.js ”> </ script>
<！ - JavaScript CSS End - >
</ head>
<body>
<？php
foreach（$ feedData as $ data）
{
？>
<div class = “messageBody”id =“msg <？php echo $ data - > msg_id; ？> “> <img src =” <？php echo $ data - > 用戶照片; ？> “class =”messageImg“/> <b> <a href =”
<？php echo BASE_URL 。$ data - > username ; ？> “> <？php echo $ data - > name ; ？></a> </ b> <？php echo $ data - > message ;？> <div class =”messageFooter“> <a href =”＃ “class =”reaction“id =”like <？php echo $ data - > msg_id ; ？>“rel =”喜歡“> <i class =”likeIconDefault“> </ i>喜歡</a> </ div> </ div>
config.php
數據庫配置文件，修改用戶名，密碼和數據庫值。爲PHP 啓用PDO擴展
<？php
session_start（）;
define（' DB_SERVER '，'localhost'）;
define（' DB_USERNAME '，'username'）;
define（' DB_PASSWORD '，'password'）;
define（' DB_DATABASE '，' Reations '）;
define（“ BASE_URL ”，“http://www.yourwebsite.com/”）;
function getDB（）
{
$ dbhost = DB_SERVER ;
$ dbuser = DB_USERNAME ;
$ dbpass = DB_PASSWORD ;
$ dbname = DB_DATABASE ;
新的 PDO（“ mysql：host = $ dbhost ; dbname = $ dbname”，$ dbuser，$ dbpass）;
$ dbConnection-> exec（“ set names utf8 ”）; // utf-8支持
$ dbConnection-> setAttribute（PDO :: ATTR_ERRMODE，PDO :: ERRMODE_EXCEPTION）;
return $ dbConnection;
}
include_once ' feed.php ';
$ feed = new feed（）;
？>
ajaxReaction.php
用於更新用戶反應的Ajax post文件。
<？PHP的
include_once '的config.php ';
$ feedData = $ feed-> newsFeed（）;
$ sessions_uid = $ _SESSION ['uid'];
if（$ _POST ['msg_id'] && $ _POST ['rid'] && $ session_uid> 0）
{
$ msg_id = $ _POST ['msg_id'];
$ rid = $ _POST ['rid'];
$ data = $ feed- > userReaction（$ session_uid，$ msg_id，$ rid）;
echo $ data;
}
？>
feed.php
包含簡單的PHP代碼來更新用戶反應數據，這將使所有用戶更新。您必須根據您的會話ID進行修改。
<？php
class feed
{
/ * News Feed Data * /
public function newsFeed（）
{
$ db = getDB（）;
$ 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 “）;
$ stmt-> execute（）;
$ data = $ stmt-> fetchAll（PDO :: FETCH_OBJ）;
$ db = null;
返回 $ data;
}
/ *用戶反應檢查* /
公共 職能 reactionCheck（$ UID，$ MSG_ID）
{
$ db = getDB（）;
$ 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 AND L.msg_id_fk = ：msg_id ”）;
$ stmt-> bindValue（'：uid'，$ uid，PDO :: PARAM_INT）;
$ stmt-> bindValue（'：msg_id'，$ msg_id，PDO :: PARAM_INT）;
$ stmt-> execute（）;
$ data = $ stmt-> fetch（PDO :: FETCH_OBJ）;
$ db = null;
返回 $ data;
} / *新聞Feed數據* / 公共功能
userReaction（$ uid，$ msg_id，$ rid）
{
$ db = getDB（）;
$ stmt1 = $ db-> prepare（“ SELECT like_id FROM message_like WHERE uid_fk =：uid AND msg_id_fk = ：msg_id ”）;
$ stmt1-> bindValue（'：uid'，$ uid， PDO :: PARAM_INT）;
$ stmt1-> bindValue（'：msg_id'，$ msg_id， PDO :: PARAM_INT）;
$ stmt1-> execute（）;
$ count = $ stmt1-> rowCount（）;
if（$ count> 0）
{
$ stmt = $ db-> prepare（“ DELETE FROM message_like WHERE uid_fk =：uid AND msg_id_fk = ：“）;
$ stmt-> bindValue（'：uid'，$ uid， PDO :: PARAM_INT）;
$ stmt-> bindValue（'：msg_id'，$ msg_id， PDO :: PARAM_INT）;
$ stmt-> execute（） ;
$ db = null;
返回 2;
}
else
{
$ stmt = $ db-> prepare（“ INSERT INTO message_like（msg_id_fk，uid_fk，created，rid_fk）VALUES（：msg_id ，：uid ，：created ，：rid）”） ;
$ stmt-> bindValue（'：uid'，$ uid， PDO :: PARAM_INT）;
$ stmt->bindValue（'：msg_id'，$ msg_id， PDO :: PARAM_INT）;
$ created = time（）;
$ stmt-> bindValue（'：created'，$ created， PDO :: PARAM_INT）;
$ stmt-> bindValue（'：rid'，$ rid， PDO :: PARAM_INT）;
$ stmt-> execute（）;
$ db = null;
返回 1;
}
}
}
？>