jQuery Facebook Like and Unlike | Lessoncup Programming Blog

Wednesday, 1 January 2014

jQuery Facebook Like and Unlike

Hi, today i am going to tell you about Facebook Like System, i got lot of requests form readers to give a lesson on Facebook like System, and i have done this concept using jQuery and Ajax we need to run some small logical cycle here and it is just few lines of code, let's see how we do this small Facebook Like System App.


index.php

here connect this file to database and write the query to fetch the records from fbposts table now loop the records inside the UL tag and write the query (Likes table) to check whether the user already liked the post or not and  place Like and Unlike buttons inside the if condition, based on the userId the buttons will display
<div class="lessoncup">

<ul>

<?php

include('db.php');

extract($_REQUEST);

$query = mysql_query("select * from fbposts");

while($row = mysql_fetch_array($query)){

?>

<li>

<img src="icons/1.jpg" width="50" height="50" border="0" align="absmiddle" class="img">

<?php echo $row['post']?>

<img src="<?php echo $row['image']?>" width="327" height="347" style="margin-top:10px; margin-bottom:10px;"> 

<br/>

<?php

$likquery = mysql_query("select * from likes where userid=2 and post_id=$row[postid]");

if(mysql_num_rows($likquery)==1){
 
?>

<a class="unlike" id="<?php echo $row['postid']?>">UnLike</a>&nbsp;<span class="like_update" id="y<?php echo $row['postid']?>">&nbsp;You and</span>

<?php }else{?>

<a class="like" id="<?php echo $row['postid']?>">Like</a>&nbsp;

<?php }?>

<span class="like_update">

<span class="like_update" id="you<?php echo $row['postid']?>"></span>

<?php 

$likes_query = mysql_query("select * from fbposts where postid=$row[postid]");

$likes_row=mysql_fetch_array($likes_query);

$likes_query = mysql_query("select * from likes where userid=2 and post_id=$row[postid]");

if(mysql_num_rows($likes_query)==1){
 
$count =$likes_row['likes']-1;

echo $count.'&nbsp;others like this';

}else{
 
 echo $likes_row['likes'].'&nbsp;others like this';
}


?>

</span>

</li>

<?php }?>

</ul>

</div>

JAVASCRIPT

write the on Click function to .like button as a selector and grab the ID of this button and store it postId variable, the like system will work based on user sessions right now i am not creating any session here just i am passing the static userId, now i stored both variables in postData and sending this variable to sendlikes.php file via ajax request and inside the ajax success function i just changed like button text to UnLike and at the same time i am just removing the like class and applying unlike class by using text() , addClass() and removeClass() and i am adding the ' You and ' text where the user clicked

write the on Click function to .unlike button as a selector and grab the ID of this button and store it postId variable, just i am passing the static userId, now i stored both variables in postData and sending this variable to sendulikes.php file via ajax request and inside the ajax success function i just changed Unlike button text to Like and at the same time i am just removing the Unlike class and applying like class by using text() , addClass() and removeClass() and i am removing the ' You and ' text where the user clicked
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

 $('body').on('click','.like',function(){
  
  var postId = $(this).attr('id');
  
  var postData = 'postid='+postId+'&uid=2';

  $.ajax({
   
   type: "POST",
   url: "sendlikes.php",
   data: postData,
   cache: false,
   success: function(){
    
    $('#'+postId).text('UnLike').addClass('unlike').removeClass('like');
    $('#you'+postId).text(' You and ');
   }
   
  });
  
 })
 
 
 $('body').on('click','.unlike',function(){
  
  var postId = $(this).attr('id');
  
  var postData = 'postid='+postId+'&uid=2';
  
  $.ajax({
   
   type: "POST",
   url: "sendulikes.php",
   data: postData,
   cache: false,
   success: function(){
    
    $('#'+postId).text('Like').addClass('like').removeClass('unlike');
    $('#you'+postId).text('');

   }
   
  });
  
 })
   
});


</script>

sendlikes.php

this file use to update the fbposts table whenever user like the post and insert the new record in likes table with userId
<?php

include('db.php');

extract($_REQUEST);

$query=mysql_query("select * from fbposts where postid=$postid");
$row = mysql_fetch_array($query);

$count = $row['likes'];

mysql_query("update fbposts set likes=$count+1 where postid=$postid");

mysql_query("insert into likes(userid,post_id) values($uid,$postid)");

?>

sendulikes.php

this file use to update the fbposts table whenever user Unlike the post and delete the user record from likes table with the matched userId
<?php

include('db.php');

extract($_REQUEST);

$query=mysql_query("select * from fbposts where postid=$postid");
$row = mysql_fetch_array($query);

$count = $row['likes'];

mysql_query("update fbposts set likes=$count-1 where postid=$postid");

mysql_query("delete from likes where userid=$uid and post_id=$postid");

?>

DATABASE

--
-- Table structure for table `fbposts`
--

CREATE TABLE IF NOT EXISTS `fbposts` (
  `postid` int(11) NOT NULL AUTO_INCREMENT,
  `post` text NOT NULL,
  `image` varchar(255) NOT NULL,
  `likes` int(11) NOT NULL,
  PRIMARY KEY (`postid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

---
-- Table structure for table `likes`
--

CREATE TABLE IF NOT EXISTS `likes` (
  `likeid` int(11) NOT NULL AUTO_INCREMENT,
  `userid` int(11) NOT NULL,
  `post_id` int(11) NOT NULL,
  PRIMARY KEY (`likeid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=92 ;

--

Live Demo   Download Script

6 comments :

  1. Thank You For Posting the idea sir....

    ReplyDelete
  2. Please what if the uid is a php variable, aw will I echo into the ajax instead of a constant value of 2

    ReplyDelete
  3. Please what if the uid is a php variable, aw will I echo into the ajax instead of a constant value of 2

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons