Allow users to like content

As part of my recent site redesign, I wanted users to be able to “like” content without having to leave a comment, use social media, or have a user account.

I think this will be especially useful for the Code Snippets section of the site which doesn’t have comments enabled. When viewing the Code Snippets archive, liked content has a yellow icon next to it, making it easy to see your favorite snippets.

I wanted it to be like the “+1” reaction you can leave on GitHub comments (screenshot). You can see it in action at the bottom of this post, and I’ve released the code as a plugin (BE Like Content).  It has no styling, so you can make it look however you like.

Customization with Filters

  • You can change the allowed post types and text used (zero, one, many likes) using the be_like_content_settings filter (see here).
  • You can customize the number displayed on frontend using the be_like_content_display_count filter. For instance, add commas or round to significant figures. I used this to add a thumbs up icon before the number.
  • You can disable the JS from loading with add_filter( 'be_like_content_load_assets', '__return_false' );. I moved the Javascript to my theme’s JS file (one less file to load), and I’m adding additional functionality – marking liked code snippets differently on the CPT archive.
  • A dashboard widget showing Popular Content is included. You can customize the query arguments using be_like_content_popular_widget_args

Using Cookies

I’m using the JS Cookie library to store your liked posts as a cookie. This minimizes duplicate likes, and when you load a page you’ve already liked I’m able to mark it as “liked”. Users can get around this by clearing their cache or using a private tab, but the count itself isn’t important enough that I care. I don’t recommend this approach for something that users would want to game (ex: voting on posts in a contest).

The library is very simple to use. To get a cookie you run Cookies.get( cookieName ); where cookieName is the name you’ve given to your cookie. When you’re ready to update it, run Cookies.set( cookieName, value, { expires: 365 } );. You can see I’m using it here.

One thing that tripped me up was how Javascript turns arrays with single items into strings. After liking the first post, I’d save a cookie with an array of that post ID, but on the next pageload the cookie would be a string, breaking my code. I got around it by saving the cookie as a JSON string, then parsing the JSON when retrieving the cookie.

AJAX Updating

My post on Infinite Scroll goes into a lot more detail on how to do AJAX requests. This is a really simple implementation.

On the actual “like” button I added a data attribute containing the post ID. When you click it, we check to make sure you haven’t already liked it (by looking at the cookie) and that we’re not in the process of liking it (you clicked it twice). If everything checks out, we pass the post ID and `be_like_content` action to admin ajax. That runs the update_count() method which grabs the current count, adds one, and updates post meta (see here).

Try it Out

If you like the idea, please install the plugin on your site and let me know how it works.

Release Tutorial

Receive New Posts by Email

Leave a comment