Minimal Like / Dislike Button Plugin with jQuery - like-dislike

File Size: 8.1 KB
Views Total: 28272
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Like / Dislike Button Plugin with jQuery - like-dislike

like-dislike is a really simple jQuery plugin for generating a like button widget on your website that displays the number of users who liked / disliked each content.

How to use it:

1. Place jQuery library and the jQuery like-dislike plugin at the bottom of your webpage.

<script src="//"></script>
<script src="js/like-dislike.js"></script>

2. Create like and dislike buttons on the webpage.

<div id="demo">
  <button class="like">Like 
    <span class="likes">0</span>
  <button class="dislike">Dislike 
    <span class="dislikes">0</span>

3. Call the function on the top element to active the plugin.


4. Auto-update like / dislike counters.


  // update like / dislike counters
  click: function (btnType, likes, dislikes, event) {
      var likesElem = $(this).find('.likes');
      var dislikedsElem = $(this).find('.dislikes');
      likesElem.text(parseInt(likesElem.text()) + likes);
      dislikedsElem.text(parseInt(dislikedsElem.text()) + dislikes);

5. Advanced usage.

  reverseMode: true,
  activeBtn: localStorage['key']? localStorage['key'] : '',
  click: function(btnType, likes, dislikes, event) {
    var self = this;

    // lock the buttons

    // send data to the server
      url: '/action',
      type: 'GET',
      data: 'id=1' + '&likes=' + likes + '&dislikes=' + dislikes,
      success: function (data) {
        // show new values
        localStorage['key'] = btnType;

        // unlock the buttons

6. Options and defaults.

  click: null, // callback
  beforeClick: null, // callback
  initialValue: 0,
  reverseMode: false,
  readOnly: false,
  likeBtnClass: 'like',
  dislikeBtnClass: 'dislike',
  activeClass: 'active',
  disableClass: 'disable'

Change log:


  • Update to version 1.0.1

This awesome jQuery plugin is developed by uagrace. For more Advanced Usages, please check the demo page or visit the official website.