Monday, June 18, 2012

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.





14 comments:

  1. is there a way to show who commented if you were using something like Buddypress for example

    ReplyDelete
  2. like uploud doesn't work for me. i get message that i and (number of other likes) like this but it stay on the same number instead of increase for 1.

    ReplyDelete
    Replies
    1. I used the script on receiving your comment and the script is working fine. Are you using this script in a project where there are a lot more other javascripts, because that might lead to some errors.

      Delete
    2. No. http://www.software-x.org/like/like/ here is the link of the vote up/down file on my host.

      Delete
  3. Hi, the like upload doesn't work for me either. It shows me the message "you and x other like this" but after that the number never increases with 1. The like field in table messages also stays 0. Only the likes table gets updated.

    Any idea what could be going wrong? I downloaded the script and only changed the db settings and changed 'mysql_escape_String' to 'mysql_real_escape_string', the rest is the same. Thanks!

    ReplyDelete
    Replies
    1. Never mind, I figured it out. Thanks for the great script!

      Delete
    2. Hey, how did you fix it? i have the same problem!

      Delete
  4. See this link -> http://www.upgradedtutorials.info/php/getting-facebook-likes-shares-and-comment-counts-using-php-function/ its a newer version where you can get the facebook likes, comment, and share counts using facebook FQL and get it via json and display it as a text. you can manipulate the view and design it in a way you want. Its so handy, simpler Code, and soo useful

    ReplyDelete
  5. Number of likes is not increasing... Please, need some help...

    ReplyDelete
  6. Or use this like button: http://www.likebtn.com

    ReplyDelete
  7. The messages table doesnt update. What can be the problem with the code? I have done the neccessary changes

    ReplyDelete
    Replies
    1. In this script there is no way to update the message into message table, you will have to insert messages yourself. So as to make Like functionality work.

      Delete
  8. First tip is about designing your cheap Facebook fans, customizing it and making it likable.

    ReplyDelete
  9. Just change the column name like from table messages to something else and make same changes in the script it will work. The column name LIKE is keyword.

    ReplyDelete