FACEBOOK LIKE SYSTEM

[norebro_social_networks icon_layout=”boxed”]

In this post we will learn how to create a facebook like system for users . We will assume users are liking a post and we will have a basic design . You can get the design by clicking here . We will use ladda for button spin effect and bootstrap for basic layout design . Download and extract ladda , create a new folder inside public/assets directory named ladda and copy paste dist directory which you will find inside extracted folder . Create new styles.css inside public/assets folder and paste below content .

View on Github

body
{
padding-top: 20px;
background-color: #F7F7F7;
}
.post
{
background-color: #FFF;
overflow: hidden;
box-shadow: 0 0 1px #CCC;
}
.post img
{
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
.post .content
{
padding: 15px;
}
.post .author
{
font-size: 11px;
color: #737373;
padding: 25px 30px 20px;
}
.post .post-img-content
{
height: 196px;
position: relative;
}
.post .post-img-content img
{
position: absolute;
}
.post .post-title
{
display: table-cell;
vertical-align: bottom;
z-index: 2;
position: relative;
}
.post .post-title b
{
background-color: rgba(51, 51, 51, 0.58);
display: inline-block;
margin-bottom: 5px;
color: #FFF;
padding: 10px 15px;
margin-top: 5px;
}

MIGRATIONS

Lets first create our database schema and table using Migrations. Create a migration using below command in command prompt.

php artisan migrate:make create_likes_table

Now go to app/database/migrations and open our newly created migration . In the up method paste below code

xxxx_xx_xx_xxxxxx_create_likes_table.php

Schema::create('likes', function($t) {
$t -> increments('id');

$t -> integer('user_id');
$t -> integer('post_id');

// created_at, updated_at DATETIME
$t -> timestamps();
});

In above code, we are creating Likes table using a create method of Schema Class . We are creating five columns . First column will be auto-increment id, the second column is user_id which will be used to track which user liked which post , third is post_id and last two columns are default laravel timestamps (updated_at , created_at ).

Run Migrations

php artisan migrate

CREATING VIEW

/views/index.blade.php

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <link href="/assets/styles.css" rel="stylesheet"/>

        <link rel="stylesheet" href="/assets/ladda/dist/ladda-themeless.min.css">
        <script src="/assets/ladda/dist/spin.min.js"></script>
        <script src="/assets/ladda/dist/ladda.min.js"></script>
    </head>
    <body>

        <div class="container">
            <div class="row">
                <div class="col-sm-4 col-md-4">
                    <div class="post">
                        <div class="post-img-content">
                            <img src="https://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" />
                            <span class="post-title"><b>Make a Image Blur Effects With</b>
                                <br />
                                <b>CSS3 Blur</b></span>
                        </div>
                        <div class="content">
                            <div class="author">
                                By <b>Bhaumik</b> |
                                <time datetime="2014-01-20">
                                    January 20th, 2014
                                </time>
                            </div>
                            <div>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                            <a href="#" id="like_1" class="btn btn-success btn-md ladda-button ajax-like" data-style="slide-right" data-size="l"><span class="ladda-label">Like</span></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4">
                    <div class="post">
                        <div class="post-img-content">
                            <img src="https://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" />
                            <span class="post-title"><b>Make a Image Blur Effects With</b>
                                <br />
                                <b>CSS3 Blur</b></span>
                        </div>
                        <div class="content">
                            <div class="author">
                                By <b>Bhaumik</b> |
                                <time datetime="2014-01-20">
                                    January 20th, 2014
                                </time>
                            </div>
                            <div>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                            <div>
                                <a href="#" id="like_2" class="btn btn-success btn-md ladda-button ajax-like" data-style="slide-right" data-size="l"><span class="ladda-label">Like</span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4">
                    <div class="post">
                        <div class="post-img-content">
                            <img src="https://placehold.it/460x250/47A447/ffffff&text=jQuery" class="img-responsive" />
                            <span class="post-title"><b>Make a Image Blur Effects With</b>
                                <br />
                                <b>CSS3 Blur</b></span>
                        </div>
                        <div class="content">
                            <div class="author">
                                By <b>Bhaumik</b> |
                                <time datetime="2014-01-20">
                                    January 20th, 2014
                                </time>
                            </div>
                            <div>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </div>
                            <a href="#" id="like_3" class="btn btn-success btn-md ladda-button ajax-like" data-style="slide-right" data-size="l"><span class="ladda-label">Like</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $('.ajax-like').click(function(e) {
                    e.preventDefault();
                    var l = Ladda.create(this);
                    var id=$(this).attr("id");
                    l.start();
                    $.post("/like", {
                        "post_id" : $(this).attr("id")
                    }, function(response) {
                        if(response.result!=null&&response.result=="1"){
                            if(response.isunlike=="1"){
                                $("#"+id).removeClass("btn-success");
                                $("#"+id).addClass("btn-danger");
                                $("#"+id).html(response.text);
                            }else{
                                $("#"+id).removeClass('btn-danger');
                                $("#"+id).addClass("btn-success");
                                $("#"+id).html(response.text);
                            }
                        }else{
                            alert("Server Error");
                        }
                    }, "json").always(function() {
                        l.stop();
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>

In the above code, we replaced read more button with Like Button. We have given a unique id for each like button. Let’s break our javascript code.

$('.ajax-like').click(function(e) {});

It will listen for a click on elements with class ajax-like. We assigned an ajax-like class to all like buttons to track click.

var l = Ladda.create(this);

l.start();

It will start our spinning Ladda effect. We have assigned slide-right effect to all like buttons. I recommend you to check other parameters we can use in Ladda by clicking here.

var id=$(this).attr("id");

It will get id attribute of our clicked element . It’s pattern will be like_* .

$.post("/like", {
                        "post_id" : $(this).attr("id")
                    }, function(response) {
                        if(response.result!=null&&response.result=="1"){
                            if(response.isunlike=="1"){
                                $("#"+id).removeClass("btn-success");
                                $("#"+id).addClass("btn-danger");
                                $("#"+id).html(response.text);
                            }else{
                                $("#"+id).removeClass('btn-danger');
                                $("#"+id).addClass("btn-success");
                                $("#"+id).html(response.text);
                            }
                        }else{
                            alert("Server Error");
                        }
                    }, "json").always(function() {
                        l.stop();
                    });

It will send post request to our server at /like URI with post data (post_id) and set the response type to json . Once we get the response we will check if response.result is not null or not 0 then we get the isunlike field which will tell us which class to set for our like button. If unlike is 1 we assign btn-danger class to our button and set html to response.text . If unlike is 0 then we are assigning btn-success to our like button . Whether our request was successful or not we will stop ladda effect using l.stop .

Our routes file will have only two route’s first is for index page and second is for ajax request

Route::get('/', 'LikeController@index');
Route::post('/like', 'LikeController@like');
Route::post('/unlike', 'LikeController@unlike');

MODELS

We will only have one model which will linked to likes table .

Likes.php

class Likes extends Eloquent  {

protected $table = 'likes';

}
}

CONTROLLERS

Create a new Controller named LikeController.php . Its a good practice to name your controllers like xxxxController .

LikeController.php

class LikeController extends BaseController {

    public function __construct() {
        //We will implement Filters later
        //$this -> beforeFilter('csrf', array('on' => 'post'));
        //I will not implement login system here since its already covered
        //in our secure login system series you can download the code from there

    }

    public function index(){
        return View::make('index');
    }

    public function like(){

        if(Input::has("post_id")){

            $post_id=explode("_",Input::get("post_id"));

            //Find if user already liked the post
            if(Likes::where("post_id",$post_id[1])->where("user_id","1")->count()>0){
                Likes::where("post_id",$post_id[1])->where("user_id","1")->delete();
                return Response::json(array("result"=>"1","isunlike"=>"0","text"=>"Like"));
            }else{
                $like=new Likes();
                //We are using hardcoded user id for now , in production change
                //it to Sentry::getId() if using Sentry for authentication
                $like->user_id="1";
                $like->post_id=$post_id[1];
                $like->save();

                return Response::json(array("result"=>"1","isunlike"=>"1","text"=>"unlike"));
            }

            return Response::json(array("result"=>"1","isunlike"=>"1","text"=>"unlike"));
        }else{
            //No post id no access sorry
            return Response::json(array("result"=>"0"));
        }

    }

}

Now let’s break down our like method.

$post_id=explode("_",Input::get("post_id"));

Above code will break our string using _ as a delimiter and returns an array of all sub-strings.

if(Likes::where("post_id",$post_id[1])->where("user_id","1")->count()>0)

Our if condition will check user already liked the post or not if the user already liked then delete the like entry or else put the entry in the table.

return Response::json(array("result"=>"1","isunlike"=>"0","text"=>"Like"));

If the user already liked the post then delete the like entry and send JSON as a response using Response::json . Our JSON contains result =”1″ which mean request is successful, isunlike=”0″ which means user didn’t request to, unlike the post.

facebook like system laravel like system

Imran Member since April 21, 2018

Imran is a web developer and consultant from India. He is the founder of KodeInfo, the PHP and Laravel Community . In the meantime he follows other projects, works as a freelance backend consultant for PHP applications and studies IT Engineering . He loves to learn new things, not only about PHP or development but everything.