How to make a dynamic Rails like/unlike button using the Acts as Votable gem

You can find more like this @ https://charliekettell.com/

Recently, some colleagues and I faced a communication crisis. Fortunately, this was not between us and was rather when pondering how we could allow users of our social media site the opportunity to show appreciation for one another’s posts. A mix of a light-bulb moment and some inspiration from a similar product, we decided to introduce a like button.

Our makeshift Facebook was built using Rails and of the options the Acts as Votable gem seemed the best choice. The documentation for this gem is thorough and the help around the web is sufficient when introducing, however we did come into some bother when unliking and having the record change dynamically.

From installing the gem to getting a non-refresh update, the below hopefully gives a sufficient overview.

Installing

To install and get all setup, I have got the bulk of the information from the documentation. As the tides change, there may be updates to the gem and these instructions will stand the test of time — certainly worth a check!

To start, add the below to your Gemfile.

Followed up with a bundle install from the command line.

bundle install

Database Migrations

Next up, you will need to create the Acts as Votable migrations and migrate the database.

rails g acts_as_votable:migration
rake db:migrate

The gem will use a vote table to record all the likes and unlikes. The above commands will generate these tables.

What to vote on

To your application’s models! In Rails, these are used to talk with the database and therefore we need to decide what exactly we’re voting on. Shown below in the Post model is the short-yet-essential line “acts_as_votable” doing this.

Who gets to vote

At this point, you may have a model for those who are going to be using the site, perhaps called Users. The “acts_as_voter” line creates the association between users (the voter) and posts (being voted on).

Caching

The following will add cached columns to your votable model’s table and hopefully speed up performance.

In your terminal, enter the following command to create a new migration file:

rails g migration add_cached_likes_to_posts

In that file, update so it looks like the following:

Be sure to check the documentation for the latest version of this

Routes

The final brick for our Rails like-button foundation are the routes. This will entail travelling to the routes.rb folder and updating your post.

You may already have here resources :posts. This allows you to declare all the common routes: index, show, destroy etc. In here, you will need to edit slightly to introduce the custom action ‘like’.

Controller

Right away, we can put the new custom action into practice in our controller. This uses the parameters to both find the post and depending on the user’s relationship with the post will like or unlike.

In addition, you may need to add this line to the top of your post controller. This will allow it to respond to the calls coming from the view.

To the view

In your posts view folder, you will need to create the file like.js.erb. The below is some jQuery with a slight bit of embedded Ruby.

Quick explanation of what is going on. There was an angel theme for our project which should hopefully clear up why preach and preached were used for like and liked.

The ajax:success event will trigger once the ajax request has completed successfully and consequently run the following function.

We then use the method to travel up the DOM tree. This allows us to then use the find method to find the post’s respective like count and use the html method on it. The latter method will set the innerHTML to the embedded Ruby shown. This uses the Acts as Votable method get_likes and is then followed by the hands together emoji.

The same is then done for the preach (like) button.

View

Of course, beauty is in the eye of the beholder and you may opt for a different design however I did find this way to work.

Once again, this includes some embedded Ruby taking us to the like action in the Post controller. Later down the line is remote: true. This allows the JavaScript driver to control the submit behaviour. By default, this is an Ajax submit and means we can use the Ajax global events. There is some more information on this here.

Hours of fun

And that’s that

All in all, the gem itself is useful to use and an efficient way to bring likes to your application. There were some teething problems when getting the like and unlike to update dynamically, hopefully this blog clears up any future confusion!