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="//code.jquery.com/jquery-1.11.3.min.js"></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>
  <button class="dislike">Dislike 
    <span class="dislikes">0</span>
  </button>
</div>

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

$('#demo').likeDislike();

4. Auto-update like / dislike counters.

$('#demo').likeDislike({

  // 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.

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

    // lock the buttons
    self.readOnly(true);

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

        // unlock the buttons
        self.readOnly(false);
      }
    });
  }
});

6. Options and defaults.

$('#demo').likeDislike({
  click: null, // callback
  beforeClick: null, // callback
  initialValue: 0,
  reverseMode: false,
  readOnly: false,
  likeBtnClass: 'like',
  dislikeBtnClass: 'dislike',
  activeClass: 'active',
  disableClass: 'disable'
});

Change log:

2017-03-20

• 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.