Главная » Языки программирования

Php facebook like it

На чтение 8 мин

How to create a Facebook style «Like» system?

I’ve been trying to find an example online of a Facebook style «Like» button but have not been able to find anything like this. What I would like to do is, place a button below an image which the user can press. Once pressed it will increment a value in the database for the image’s record, and then reflect the addition on the page by adding + 1 to the existing amount. I can guess this will need PHP, SQL and jQuery to pull off. Problem is I have no idea where to begin. I’ve created already a PHP script to add to my Like’s for a particular image by giving the image ID. I created already a jQuery post button which posts to the PHP and likes the image. The thing I’m stuck on is updating the page to reflect the like. For starters, I think the code I made to do this so far is completely disgusting lol. Here is all my code so far. PHP to output the Likes count and Like button, plus code for addition. $info is the array for the result of my whole image files table:

Echo "Likes: ".$info['likes'] . ""; Echo ''; Echo '
'; 
$id = $_GET['id']; mysql_query("UPDATE files SET likes=likes+1 WHERE fileid mt24 mb12">
    php
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this question" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="question" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="1" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start">Share
)">edited Mar 5, 2012 at 22:32
Lightness Races in Orbit
378k75 gold badges642 silver badges1052 bronze badges
asked Mar 5, 2012 at 22:30
Add a comment|

2 Answers 2

Reset to default
5

It looks like you have the general idea down, just a crude implementation of it.

You may want to designate the counter element for each image and update the inner content after the button is pressed.

);">Like150

where the is obviously unique to each image. Pass that to test() and then update the html of the count total on success.

function test(id) < $.ajax(< url: 'http://stormstorm.com/like.php', method: 'get', data: , dataType: json, success: function(data) < $('#' + id + '_count').html(data.total); >>); >

in your php you would do exactly what you did except return a json encoded array back to the js for update.

$id = mysql_real_escape_string($_GET['id']); mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id); if(mysql_affected_rows() > 0) < $sql = mysql_fetch_assoc(mysql_query("SELECT `likes` FROM `files` WHERE `fileid` mt24"> 
 
 
 
 
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start">Share 
 
 
 
 
 
 
 
 
answered Mar 5, 2012 at 22:49
0
Add a comment |
1

I think you are headed the right direction. You can return the number of likes after the update call in php and let jquery update the like count. I added some code below as an example.

HTML:

 
" /> Likes:

PHP: (*Note: I didn't check syntax but hopefully it will be enough code to understand the idea.) $id = $_GET['id']; mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id) or die(mysql_error()); $result = mysql_query("SELECT likes from files where fileid mt24">

Источник

Facebook Like Reactions using PHP, MySQL and Jquery.

Just a few days before, Facebook has launched Reactions, an extension of Like button. I succeeded in implementing the same in my WallScript 8, Build Your Own Social Network. Here is a quick and easy way to implement the Reactions using PHP,Jquery and PDO MySQL. It’s a basic idea of implementing the Reactions. Hope you enjoy the new Reactions for Like button. Take a quick look at the live demo.

Facebook Like Reactions using PHP, MySQL and Jquery.

Database Design
To build the message like reaction system, you have to create four tables such as Users, Messages, Message_Like and Reactions. This following image generated by using Mysql Workbench tool.

CREATE TABLE ` users ` (
` uid ` int NOT NULL PRIMARY KEY AUTO_INCREMENT ,
` username ` varchar( 25 ) NOT NULL UNIQUE,
` password ` varchar( 50 ) NOT NULL ,
` email ` varchar( 100 ) NOT NULL,
` name ` varchar( 100 ) NOT NULL,
` profile_pic ` varchar( 200 ) NOT NULL,
);

Data will store in following way, here the password data PHP login script with PDO and HASH encryption.

Facebook Reactions using PHP, MySQL and Jquery.

This table contains user status messages data. Here uid_fk is the FOREIGN KEY to REFERENCES users.uid

CREATE TABLE ` messages ` (
` msg_id ` int( 11 ) NOT NULL PRIMARY KEY AUTO_INCREMENT ,
` message ` varchar( 200 ) NOT NULL,
` uid_fk ` int( 11 ) NOT NULL,
` like_count ` int( 11 ) DEFAULT NULL,
` created ` int(11) DEFAULT NULL,
FOREIGN KEY (uid_fk) REFERENCES users (uid)
);

Facebook Reactions using PHP, MySQL and Jquery.

CREATE TABLE reactions (
' rid ' INT NOT NULL PRIMARY KEY AUTO_INCREMENT ,
' name ' VARCHAR( 45 ) NOT NULL
);

Facebook Reactions using PHP, MySQL and Jquery.

Contains all user message likes relation data. Here uid_fk is FOREIGN KEY to REFERENCES users.uid, rid_fk is FOREIGN KEY to REFERENCES reactions.rid and msg_id_fk is 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,
` created ` int( 11 ) NOT NULL,
` rid_fk ` int( 11 ) NOT NULL,
FOREIGN KEY (uid_fk) REFERENCES users (uid),
FOREIGN KEY (msg_id_fk) REFERENCES messages (msg_id),
FOREIGN KEY ( rid_fk ) REFERENCES reactions (rid)
);

Facebook Reactions using PHP, MySQL and Jquery.

JavaScript Libraries
You have to include following JavaScript libraries. I have modified jquery tooltipster plugin for reactions popup.

Jquery Code
Applying reaction tooltipster to the anchor tag. Tipsy plugin for reaction name tool tip.

$( document ). ready (function()
//Black tooltip for reaction icons.
$(" .likeTypeAction "). tipsy ();

$(this). tooltipster ( contentAsHTML: true ,
interactive: true ,
content: $(reactionsCode),
>);
>);

$(" body "). on (" click "," .likeTypeAction ",function()
.
.
>

. likeType background-image: url('../images/like_types.png');
background-size: 100%;
display: block;
height: 40px;
image-rendering: crisp-edges;
line-height: 1;
width: 40px;
cursor: pointer;
>
. 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

Like Ajax
Contains javascript code. $("body").on('click','.likeTypeAction', function()<>- here likeTypeAction is the class name of the reaction icon tag. Using $(this).parent().parent().attr("id") calling icon tag message ID value.

/*Reaction*/
$(" body "). on (" click "," .likeTypeAction ",function()
var reactionType=$(this). attr ("data-reaction");
var reactionName=$(this). attr ("original-title");
var rel=$(this). parent (). parent (). attr ("rel");
var x=$(this). parent (). parent (). attr ("id");
var sid=x. split ("reaction");
var msg_id=sid[1];

$.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 ',' unlike ');
$("#"+x). hide ();
>
>
>);

Unlike Ajax
Contains javascript code. $("body").on('click','.unLike', function()<>- here unLike is the class name of the unlike anchor tag. Using $(this).attr("id") calling anchor tag message ID value.

index.php
Contains PHP and HTML code, displaying all of the user updates by calling $feed->newsFeed();


include_once ' config.php ';
$feedData=$feed-> newsFeed ();
?>


stylesheet " type color: blue;">text/css " href color: blue;">css/tooltipsterReaction.css ">
stylesheet " type color: blue;">text/css " href color: blue;">css/tipsy.css ">
stylesheet " type color: blue;">text/css " href color: blue;">css/app.css ">







foreach ($feedData as $data)
?>

echo $data -> msg_id; ?> ">
echo $data -> profile_pic; ?> "/>
echo BASE_URL . $data -> username ; ?> "> echo $data -> name ; ?>
echo $data -> message ; ?>
echo $data -> msg_id ; ?>" rel="like">
Like

> ?>

config.php
Database configuration file, modify username, password and database values. Enable PDO extension for 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 ;
$dbConnection = new PDO (" mysql:host= $dbhost ;dbname= $dbname", $dbuser, $dbpass);
$dbConnection-> exec (" set names utf8 "); //utf-8 support
$dbConnection-> setAttribute (PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
>

include_once ' feed.php ';
$feed = new feed ();
?>

ajaxReaction.php
Ajax post file for updating user reactions.


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
Contains simple PHP code to update user reaction data, this will get all users update. You have to modify based on your session id.


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;
return $data;
>

/* User Reaction Check */
public function 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;
return $data;
>

/* News Feed Data */
public function 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= :msg_id ");
$stmt-> bindValue (':uid', $uid, PDO::PARAM_INT );
$stmt-> bindValue (':msg_id', $msg_id, PDO::PARAM_INT );
$stmt-> execute ();
$db = null;
return 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;
return 1;
>

Источник

Читайте также:  Java touri что это
Оцените статью
© 2023 Программирование