How To Create Facebook Style – Like Unlike Using PHP

Submitted by alpha_luna on Friday, April 15, 2016 - 15:52.

If you are looking for a source code on How To Create Facebook Style – Like Unlike Using PHP then you are at the right place. This sample work is very familiar to us. Today, most of us are using Facebook, and the interesting part in Facebook is to like the post of your friend, family, and etc. In this article, we create a simple like unlike using PHP. For updating likes count in our database, we used jQuery. And, you can be used this source code in your simple SNS or it's called a Social Networking Site. HTML Like Unlike Form This source code where you can like and unlike the posts.

<center>
<table class="demo-table">
        <tbody>
                <tr>
                <th><strong>Sourcecodes In Sourcecodester</strong></th>
                </tr>
        <?php
        if(!empty($result)) {
        $ip_address = $_SERVER['REMOTE_ADDR'];
        foreach ($result as $tutorial) {
        ?>
                <tr>
                        <td valign="top">
                        <div class="feed_title"><?php echo $tutorial["title"]; ?></div>
                                <div id="tutorial-<?php echo $tutorial["tutorial_id"]; ?>">
                                <input type="hidden" id="likes-<?php echo $tutorial["tutorial_id"]; ?>" value="<?php echo $tutorial["likes"]; ?>">
                                <?php
                                $query ="SELECT * FROM ipaddress_likes_map WHERE tutorial_id = '" . $tutorial["tutorial_id"] . "' and ip_address = '" . $ip_address . "'";
                                $count = $db_handle->numRows($query);
                                $str_like = "like";
                                if(!empty($count)) {
                                $str_like = "unlike";
                                }
                                ?>
                                <div class="btn-likes"><input type="button" title="<?php echo ucwords($str_like); ?>" class="<?php echo $str_like; ?>" onClick="moreLikes(<?php echo $tutorial["tutorial_id"]; ?>,'<?php echo $str_like; ?>')" /></div>
                                <div class="label-likes"><?php if(!empty($tutorial["likes"])) { echo $tutorial["likes"] . " Like(s)"; } ?></div>
                                </div>
                        <div class="desc"><?php echo $tutorial["description"]; ?></div>
                        </td>
                </tr>
        <?php           
        }
        }
        ?>
        </tbody>
</table>
</center>

jQuery Script Like Unlike This script will be run after you click the Like Unlike Icon.

<script>
function moreLikes(id,action) {
        $('.demo-table #tutorial-'+id+' li').each(function(index) {
                $(this).addClass('selected');
                $('#tutorial-'+id+' #rating').val((index+1));
                if(index == $('.demo-table #tutorial-'+id+' li').index(obj)) {
                        return false;   
                }
        });
        $.ajax({
        url: "more_likes.php",
        data:'id='+id+'&action='+action,
        type: "POST",
        beforeSend: function(){
                $('#tutorial-'+id+' .btn-likes').html("<img src='LoaderIcon.gif' />");
        },
        success: function(data){
        var likes = parseInt($('#likes-'+id).val());
        switch(action) {
                case "like":
                $('#tutorial-'+id+' .btn-likes').html('<input type="button" title="Unlike" class="unlike" onClick="moreLikes('+id+',\'unlike\')" />');
                likes = likes+1;
                break;
                case "unlike":
                $('#tutorial-'+id+' .btn-likes').html('<input type="button" title="Like" class="like"  onClick="moreLikes('+id+',\'like\')" />')
                likes = likes-1;
                break;
        }
        $('#likes-'+id).val(likes);
        if(likes>0) {
                $('#tutorial-'+id+' .label-likes').html(likes+" Like(s)");
        } else {
                $('#tutorial-'+id+' .label-likes').html('');
        }
        }
        });
}
</script>

And, this is the result. Result

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

344 views