LIKE button, similar to Facebook. To vote up any update with Php and jQuery

Facebook introduced the LIKE button under its posts, making people showcasing what they like, just by clicking on the like button placed below the post. Since then this button has been widely used, for various functions. In Voting Systems, to Vote up and Vote down, or to Like posts etc. And using Php, jQuery and Ajax you can also introduce one such button to your webpage too, very easily.

Today we have here a very simple and easy tutorial for implementing one such like button, similar to Facebook, to like updates posted by various users. Here we will create a system in which user can like the various posted updates by simply clicking on the like button.

 Download the Script

Database Design 

  Messages table :  

CREATE TABLE messages (
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message VARCHAR(200),
like INT);

  Likes table :  

CREATE TABLE likes (
lid INT PRIMARY KEY AUTO_INCREMENT,

msg_id_fk INT,

uid_fk INT );

Adding Data to Database

You can yourself add data to the database, we advice you to add 4 rows with msg_ids as (1,2,3,4) and respective messages. Or, you can simply copy & paste the query from mysql_data.sql enclosed along with the script into your Mysql Query Browser.

  db.php  

In db.php you must change the SERVER_NAME, USERNAME, PASSWORD and DATABASE to your own MySql settings.

<?php

define('DB_SERVER', 'SERVER_NAME');

define('DB_USERNAME', 'USERNAME');

define('DB_PASSWORD', 'PASSWORD');

define('DB_DATABASE', 'DATABASE');

$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());

$database = mysql_select_db(DB_DATABASE) or die(mysql_error());

?>

  Index.php  

Index page contains the code to showcase  the updates in order, along with the like button accompanied with the like count. On click on the button, javascript function is executed and the like count is updated following a series of steps.

<?php

echo "<div id='content'>";

$message_total = mysql_query("SELECT * from messages");

$message_count= mysql_num_rows($message_total);

$message_query = mysql_query("SELECT * from messages ORDER by msg_id desc");

while($data = mysql_fetch_row($message_query))

{

echo "<div class='message_box'>";

echo "<div class='user_image'><img src='http://www.gravatar.com/avatar/HASH?s=40'></div>";

echo "<div class='message_body'>$data[1]</div>";

$msg_id=$data[0];

$like_count=$data[2];

echo "<div class='like_box'><a href='' id='$msg_id' class='like_button'><img src='vote_up.png'/&agt;</a> <span class='like_show$msg_id' style='font-weight:bold;font-family:Georgia, Times New Roman, Times, serif;font-size:12px;position:relative;top:-2px;'>$like_count</span></div>";

echo "</div>";

}

echo "</div>";

?> 

  like_message.js  

This is the javascript to, take the value of attribute "id" from the click on like button, and post it to message_like.php using Ajax.

$(function() {

$(".like_button").click(function() 

{

var like_id = $(this).attr("id");

var dataString = 'like_id='+ like_id ;

$(".like_show"+like_id).fadeIn(200).html('&lt;img src="ajax-loader.gif" /&gt;');

$.ajax({

   type: "POST",

   url: "message_like.php",

   data: dataString,

   cache: false,

   success: function(html)

   {

    $(".like_show"+like_id).html(html);

  

  }  });

return false;

});

});

  message_like.php  

This updates the like count abd saves it into the database and also updates the value on the webpage dynamically.

<?php

include("session.php");

include("db.php");

if($_POST['like_id'])

{

$like_id=$_POST['like_id'];

$like_id = mysql_escape_String($like_id);

$sql=mysql_query("SELECT * from messages where msg_id='$like_id'");

while($data=mysql_fetch_row($sql))

{

$like=$data[2];

}

$uid_sql=mysql_query("select * from likes where msg_id_fk='$like_id' and uid_fk='$uid'");

$count=mysql_num_rows($uid_sql);

if($count==0)

{

$like_update=$like+1;

$sql=" Update messages SET like='$like_update' WHERE msg_id='$like_id' ";

$sql_update=mysql_query($sql);

$sql_in=mysql_query("INSERT into likes (msg_id_fk,uid_fk) values ('$like_id','$uid')");

echo "You and $like others like this";

}

else

{

echo "<script language=javascript>alert('you already LIKE this message !!')</script>";

echo "$like";

}}

?>

And hence, you have implemented it, the LIKE button. For any query, feel free to ask through your comments. I love hearing from you.