How to add a like button without a plugin

like it button with sample style

Update on Oct 4, 2016

There are a lot of plugins to add a like/dislike or voting feature to your wordpress site, and in this post I will walk you through how to create your own “Like this” button.

Warning: This tutorial is NOT newbies friendly. If you don’t have basic understanding of PHP, HTML, ajax or wordpress functions, you can jump directly to this section where you can download a zip file of the whole plugin.

First, we create a button letting users can “like it” to our article.
If the javascript is enabled, it will use javascript, or it will follow the link.

We store the like count value in a custom field named _pt_likes. If it doesn’t exist or it’s empty, we show 0.

The extra bit of code here is the $nonce in line 12, this is for security consideration to avoid foul play.
(See Codex here)

Now we define the function to handle the action

First of all, we verify the nonce to make sure the action is legit. If it isn’t, we stop moving on and tell the users “No naughty business please”. Otherwise, we update the like count to the database and show an updated like count value.

Then comes the javascript part.
To assemble the Ajax call, first we need to load jQuery and our own javascript code, as well as custom styles.

Here is the javascript code in like-it.js file.

By now, you should have seen the like this button appearing in the post.
like it button without stylkes

But we want to make it look nice. Below is a sample css styling that you can paste to the like-it.css file. Since we are using Fonwawesome icon here, make sure to load the fontawesome styles first.

Ok, now our like it button is more beautiful and professional.
like it button with sample style

Download

Download I have put it all in a zip file as a plugin and you can click above download link to get it.
You can also find more information of this plugin on the release page.
http://ptheme.com/item/wp-love-it/

Reference:
http://premium.wpmudev.org/blog/using-ajax-with-wordpress/
http://www.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress/

Save

Author: Leo

My name is Leo who's behind this blog. I've been working with wordpress since 2010. I'll write about themes, plugins, tutorials and all about wordpress here. Hope you find it useful!

14 thoughts on “How to add a like button without a plugin”

    1. Just make some changes in Snippet #1.
      1. remove first line. add_filter( 'the_content', 'like_it_button_html', 99 );
      2. remove parameter from line 3. It should be function like_it_button_html() {
      3. replace line 18 with echo $like_text;

      By doing this, the button will not automatically appear in your post. You can annually add it by using:
      if(function_exists( like_it_button_html )){
      like_it_button_html();
      }

      I didn’t test it. But feel free to tell me should you have any problems.

    1. For this purpose you’ll probably need to bind some login check function to the like button. You’ll have to check the log status both from the client side and server side.
      On client side, this should be implemented easily with some javascripts.
      On Server side, use a conditional check “is_user_logged_in” is enough. Also remove add_action( 'wp_ajax_nopriv_pt_like_it', 'pt_like_it' ) from the ajax handler.

  1. I have a simple problem that in my theme the like button counter counts unlimited by a single user .
    i want to users can like only once.

    sorry for my bad English.

    1. Hi, to limit the click count for a specific user, one possible way is to store the ID of “liked posts” to the browser cookies.
      Let’s imagine that a user clicks the ‘like’ button.
      1) if the post_id of this liked post cannot be found in the browser cookies, ‘like’ function is proceed and the post ID is pushed to the cookies;
      2) otherwise prevent the ‘like’ function and do nothing.

  2. Hello,

    I would like to ask you: your plugin is good, but there’s some problems with the count of likes in your button. I want only get one (1) like from one user, because now it seems like user can add more than 1 like on each post. Can you help me with that?

    Thanks

  3. i need two this button
    1> Made It and 2 > Drink it
    i try in this mode:
    function like_it_button_html($db_row) {
    …..
    $likes = get_post_meta( get_the_ID(), $db_row, true );
    ……………..
    }
    and when i call function in single.php i say:

    but how to transfer $db_row into function pt_like_it() for same value?

    1. 1. Add one more button to the HTML tags.

      2. Add the ajax handler function.

      add_action( ‘wp_ajax_nopriv_pt_drink_it’, ‘pt_drink_it’ );
      add_action( ‘wp_ajax_pt_drink_it’, ‘pt_drink_it’ );

      function pt_drink_it() {

      }

      3. Add the javascripts.

      jQuery( document ).on( ‘click’, ‘.pt-drink-it’, function() {

      }

      Remember to change the custom field “_pt_likes” to whatever you like for saving the “drink it” values.

  4. Very usefull for beginner, but,.. how to add the “Dislike” button? would you repost for this issue? sorry my english bad. hpe you answare, Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *