Kudos - Yii2 widget (Svbtle-like) > stdout.in Ievgen Kuzminov IT blog

Kudos - Yii2 widget (Svbtle-like)

Mar 15, 2014, 6:07:22 PM


Yii2 widget for Svbtle style Kudos. Based on JS from https://github.com/masukomi/kudos


On posts details page of my blog or original JS widget demo

Installation via Composer

add to require section of your composer.json "ijackua/yii2-kudos-widget": "dev-master" and run composer update

Usage example

   'widgetId' => 'post', // unique id of widget on page, to allow more than one widget on the page
   'uid' => $post->id, // uid of Kudoable element, for stat count
   'count' => $post->kudos, // initial Kudos value, to display
   'onAdded' => 'function (event) {
  // JS callback on Kudo +1 , you can do what ever you want here
  // for example send AJAX request to track stats
  var uid = $(this).data("uid");
  $.post("/kudo/plus/post/" + uid);}',
   'onRemoved' => 'function (event) {
  // JS callback on Kudo -1, send another AJAX request to track stats
  var uid = $(this).data("uid");
  $.post("/kudo/minus/post/" + uid);}',

Tracking and stat storage server side you should implement yourself what ever you want.


is used to keep widget state for each user personally. It uses widgetId|uid key to be unique for multiple widgets on the site. And does not pollute request Headers with extra Cookies (if someone Kuoded a lot of your pages).


  • onActive is sent when you hover over the object (the circle is growing)
  • onInactive is sent when you mouse-off the object
  • onAdded is sent when you successfully kudo something
  • onRemoved is sent when you un-kudo something

Advanced usage with custom icons inside widget

I am using font-smiley from http://fontello.com/ Custom icon-font should be prepared and connected to the page, then you can adjust smiley look and feel via CSS and add them inside Kudos widget like this

   'widgetId' => 'post',
   'uid' => $post->id,
   'count' => $post->kudos,
   'defaultClass' => 'icon icon-emo-thumbsup',
   'onAdded' => 'function (event) {
  var uid = $(this).data("uid");
  $.post("/kudo/plus/post/" + uid);}',
   'onRemoved' => 'function (event) {
  var uid = $(this).data("uid");
  $.post("/kudo/minus/post/" + uid);}',


comments powered by Disqus
Kuzminov "iJackUA"
Web Team Lead
at MobiDev (Kharkiv, Ukraine)
Code in Ruby and Elixir, but still love PHP. Explore ES6 and Vue.js. Explore databases, use Ubuntu and MacOS, think about IT people and management


Animista - is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Staticman - handles user-generated content for you and transforms it into data files that sit in your GitHub repository, along with the rest of your content.