Live Demo of Facebook Like button with scripts-learn more with @s.shivasurya

Facebook like system is one of the best implementation in social network systems, In this post I have explained how to implement like/unlike system database design and web implementation with PHP and jquery.

 Download Script     Live Demo

i would like to explain the just javascript to update database here.Final PHP Code
Complete Like/Unlike system. 

<?php 
$query=mysql_query("SELECT U.username, U.uid, M.msg_id, M.message FROM users U, messages M WHERE U.uid=M.uid_fk and U.uid='$sessions_uid'");
while($row=mysql_fetch_array($query))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
$username=$row['username'];
$uid=$row['uid'];
?>

<div class="stbody">
<div class="stimg"><img src="userprofile.jpg"/></div>
<div class="sttext">
<b>s.shivasurya</b>: Status Message
<div class="sttime">48 seconds ago</div>

<div>
<?php
$q=mysql_query("SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' ");
if(mysql_num_rows($q)==0)
{
echo '<a href="#" class="like'" id="like.$msg_id.'" title="Unlike" rel="Unlike">Unlike</a>';
 } else {
echo '<a href="#" class="like" id="like.$msg_id.'" title="Like" rel="Like">Like</a>';
} ?>
</div>

<?php if($like_count>0) {
$query=mysql_query("SELECT U.username,U.uid FROM message_like M, users U WHERE U.uid=M.uid_fk AND M.msg_id_fk='$msg_id' LIMIT 3");
?>
<div class='likeUsers' id="likes<?php echo $msg_id ?>">
<?php
$new_like_count=$like_count-3;
while($row=mysql_fetch_array($query))
{
$like_uid=$row['uid'];
$likeusername=$row['username'];
if($like_uid==$uid)
{
echo '<span id="you'.$msg_id.'"><a href="'.$likeusername.'">You</a></span>';
}
else
{
echo '<a href="'.$likeusername.'">'.$likeusername.'</a>';
} 
}
echo 'and '.$new_like_count.' other friends like this';
?> 
</div>
<?php }
else {
echo '<div class="likeUsers" id="elikes'.$msg_id.'"></div>';
} ?>
</div>
</div>
<php } ?>

the above script explains the php script to update database and viewing the likes.

JavaScript
Contains javascipt code. $(".like").click(function(){}- like is the class name of the like/unlike anchor tag. Using $(this).attr("id") calling anchor tag ID value.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script type="text/javascript">

$('.like').die('click').live("click",function()
{
var ID = $(this).attr("id");
var sid=ID.split("like");
var New_ID=sid[1];
var REL = $(this).attr("rel");
var URL='message_like_ajax.php';
var dataString = 'msg_id=' + New_ID +'&rel='+ REL;
$.ajax({
type: "POST",
url: URL,
data: dataString,
cache: false,
success: function(html){

if(REL=='Like')
{
$("#youlike"+New_ID).slideDown('slow').prepend("<span id='you"+New_ID+"'><a href='#'>You</a> like this.</span>.");
$("#likes"+New_ID).prepend("<span id='you"+New_ID+"'><a href='#'>You</a>, </span>");
$('#'+ID).html('Unlike').attr('rel', 'Unlike').attr('title', 'Unlike');
}
else
{
$("#youlike"+New_ID).slideUp('slow');
$("#you"+New_ID).remove();
$('#'+ID).attr('rel', 'Like').attr('title', 'Like').html('Like');
}

}
});

</script>

this javascript is responsible for updating the database with like information without reloading the page.

the remaing You could design the html layout as per your needs to generate the  like button and implement it.


for complete set php like system request as comments.i will send you the

complete set through E-mail.hope u enjoy this.