How to Add a Simple Like Button to Your Rails 6 Application

Introduction

If you are brand new to ruby on rails like I am you may have been wondering about the implementation of a like ecosystem into your brand new application. If so, you may have noticed that you have to take in a myriad of things like account validations, how to present the button, and how your models are associated in your database. All of this stuff gets a little complicated, but the great part is that once you do it once you know how to implement it every single time! My goal in this tutorial is to walk you through that first time so that you can implement a like button on your next project easily and efficiently. Okay enough talk, let’s get started!

QUICK NOTE: This tutorial is meant for people who already have a good grasp of ruby on rails. If you struggle with associations, validations, or authentication I advise you to learn those aspects of rails first. I also strongly suggest using the devise gem for your authentication. Thanks!

Step 1: Setting Up Your Associations

The first step in our like button journey is to map out our associations. For this example, we are going to keep it simple and say that we have a user, a post, and of course a like model. Our user model will have many likes, and so will our post model. This is because the user can like many posts (albeit they can only like each post once), and our post can be liked by users many times. This means we need to make our like model a join model in our database. To do this, first add your user and post models to the database with whatever fields you like, and then using your terminal add the like model like this:

rails g model like user_id:belongs_to post_id:belongs_to

Step 2: Setting Up a Custom Route

The next step is to set up a custom route so that when our user clicks the like button we can go to a custom method and create our like. When we do that it should look something like this:

put ‘/post/:id/like’ to: ‘posts#like’, as: ‘like’

Here we are sending a put request with the id of the post we want to like and we are calling our like method in our controller.

Step 3: Creating Our Like Method

Next we want to add the like method in our controller that the route will enact. Since we are liking posts we will want to put this method within our posts controller. The like method will look something like this:

The only caveat here is that current_user will be replaced with whatever you use to represent the user that is logged in. If you are using the devise gem for authentication then this code will work for you since current_user is a method that comes with devise.

Step 4: Making Sure They Can Only Like it Once

Now that we have our route and our controller set up, it is time to set up our model with some quick validation code. The first code we are going to write will be a way to validate using a method in our html. This code will be in our post model and look something like this:

This checks to see if the user already like the post, or if they have yet to like it. If they have it will return true, and if not it will return false.

Step 5: Adding a Second Validation to Our Like Model

If we want to double check to make sure that our user can only like a post once, we can also add a uniqueness validation to our like model like so:

This uniqueness validation will make sure that a like’s user_id and post_id combination is unique. That way we have two methods making sure that our user can only like our post once.

Final Step: Add the Button to Your ERB File

Now all we have to do is add a button and a little logic to our post’s show.html.erb file.

Here we are using the user_signed_in? method created by devise to check if our user is signed in (If you aren’t using devise you will have to make this method on your own). Then we are using our liked? method to check if our user already liked that specific post, and if so we make our button’s disabled attribute equal to true . If they haven’t already liked it we have our button act like normal.

Conclusion

That’s it you made your first like button congrats! It may seem daunting at first, but I hope that this tutorial helped steer you in the right direction to creating your first like button. If you have any questions be sure to leave a comment and I’ll try and get back to you as soon as possible. Happy coding!