Tuesday, 22 January 2013

Create a like button just like facebook !!


Facebook Like Button


Hullo there guys , today i'm gonna give you a step by step tutorial for creating a like button using php/jquery , much like facebook !! So what is the general algorithm that is to be followed ? It's quite simple :-

When a user presses the like button two things should happen :- One , the number of likes should be updated in the database and two , the changes should be communicated to the the front-end that is the number of likes which all the other users are seeing , should be dynamically updated without affecting other page contents .

So how to acheive this ?

First create a mysql table called likes like the following :-

Item_Number   |    Likes
--------------------------

item number is the serial number for the item(post/image/link etc) for which the number of likes are stored in the corresponding column . Now create a php file with the following contents :-

Like.php  (This file will give us the number of likes)

<?php
if(isset($_REQUEST['item_number']))
{
$x = $_REQUEST['item_number'] ;
$connection = mysql_connect("hostname","username","password");
$query = "SELECT * from database_name.likes WHERE Item_Number='{$x}' LIMIT 1";
$result = mysql_query($query);
$r = mysql_fetch_array($result);
echo $r["Likes"];
}
else if(isset($_REQUEST['add']))
{

$x = $_REQUEST['add'] ;
$connection = mysql_connect("hostname","username","password");
$query = "UPDATE Likes SET Likes=Likes+1 from database_name.likes WHERE Item_Number='{$x}'";
$result = mysql_query($query);

}
?>


Now , go to the file which will display the number of likes in real-time . suppose you want to display the number of likes in a div with an id "number_of_likes" , then the following jquery code will help you update the number of likes in real time :-


$(document).ready(function(){
setInterval(function(){
var item_number = 2 ; //say
var request_url = "Like.php?item_number="+item_number; //Build the request url
$.get(request_url,function(res){ $("#number_of_likes").html(res); })
},500)

//Other javascript/jquery code

$("#add").click(function(){

var item_number = 2 ; //say
var request_url = "Like.php?add="+item_number; //Build the request url
$.get(request_url,function(res){ $("#number_of_likes").html(res); })

})

});


So how does the code work ?
 The setInterval function takes in two parameters , the function to be executed and the number of milliseconds after which it'll be executed again and again , so basically what it does is it runs the function at an interval of every 500 milli-seconds  . So what does this function do ? The function basically fetches the contents of the file like.php?item_number=itemno after an interval of 500 milliseconds !! And what does Like.php contain ?? It contains the number of like sfor that particular item number !! So what does the script do then ? Yes it updates the number of likes every 0.5 seconds (1second = 1000 milli-second) , so eureka !! We're Done !!

The add button works in a similar way , just that we invoke it only when an user clicks the like button instead of repeating it !!


Creating the Buton

Just create a button and give it an id of "add"  !!


8 comments:

  1. Hi Anurag,

    Superb stuff to boost the social rankings of a website/blog. Facebook & twitter need to be optimized properly for the website to gain traction and visitors. This simple tweak can make a lot of difference to the number of visitors and the social sharing as well.
    Thanks for sharing this :)

    Do check out my entry for Get Published.

    Regards

    Jay
    My Blog | My Entry to Indiblogger Get Published

    ReplyDelete
  2. Hi Anurag,

    Thank for the tutorial. Is it efficient to call "like.php" and query the database every half second? Have you discovered another way to solve this problem?

    Thanks!

    ReplyDelete
  3. For efficiency , you can use something like memcached on the server side .. you can optimize your queries .. also you can increase the time interval .. Another option may be to store the number of likes for each seperate posts in seperate xml files (a file is created for each user , and there will be a tag for each post) .. then only that much part is queried instead of going through the entire database .. Also nosql solutions might be used , and you can create collections corresponding to a single user .

    ReplyDelete
  4. hi, just looking at this. exactly what im after although im a bit of a php/mysql newbie. when you create the table in your db do i just name it 'Likes'? or 'Item_Number | Likes' ?

    I'm a bit unsure about where the Item_Number bit fits in?

    ReplyDelete
    Replies
    1. Create something like this :-

      Id | Likes
      -------------

      Where id is a primary key . And likes is the number of likes for that particular item.

      If you have user accounts , then to track like from each account , you can have something like

      serial | post_id | user_id

      Delete
  5. Pleasr tell me how to create likes and item_number table

    ReplyDelete
  6. Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!

    MongoDB Training Centers in Chenai

    ReplyDelete