I think it was probably about two years ago when I first came across a Svbtle-hosted blog where I noticed a small little circle, bouncing when you hover it and showing a number followed by “Kudos”.
So, what are Kudos?
According to Wikipedia, Kudos are explained as follows:
Kudos (from the Ancient Greek: κῦδος) is acclaim or praise for exceptional achievement. Wikipedia
A Kudos system is basically similar to a Facebook’s “like” or Google+’s “+1” button. Today, we are going to roll our own that can be easily integrated into any website or blog.
We are going to use Flybase for the backend database, since this is the Flybase blog. 🙂
When it comes to the backend you…
Lots of decisions you don’t really want to face for a webapp like this Kudos script.
Still, you obviously require some kind of backend for storing the kudos.
Flybase is great for this, as it is a real-time app platform.
Not only do you get an easy way to store your data, but you can even implement real-time synchronization among your clients. That has never been so easy.
First, sign up for an account at Flybase.
So how does this work on the Kudos script?
In your code, you then create a reference to the
Flybase object, specifying the app you’d like to reference.
To do this, you need your
Flybase App and your collection.
We’ll name this collection
kudos, since that is what we are using it for.
We are going to assign a user a unique id, this will be stored in
LocalStorage so that we can track return visits, etc.
Within the Kudos script we will use the following function for handling this:
I then use the
uid from the
getAuthData() to identify a user’s Kudos entry.
This allows me to restrict the user in such a way that it can only add new kudos or remove its own entry.
Storing data is as simple as setting the value.
key is the page url (cleaned from special symbols like slashes etc). Then the script will create an entry for the current user, with its
Removing an existing Kudos simply removes the document referenced by
Retrieving the data will display the Kudos count for the current page, and also at the same time enable real-time updates:
We’ve added three event listeners, first we run a query and retrieve all kudos for the current page, as referenced by
key and update the
likeCount with the returned
Then we’ve added an
added listener and a
removed listener, these listen for any changes to the kudos count in real-time, meaning if any changes occur, for example, another visitor to the same page adds a kudos to the page, or removes their kudos, then all other visitors will see the count change automatically.
Every time a value is updated on the Flybase store, this callback will be invoked, and the kudos count for that page will automatically update.
All of the code is available on GitHub: https://github.com/flybaseio/kudos.
The Repo also includes detailed instructions on how to add the script to your own page as well as on how to properly create and configure your Flybase account. As always, I’m more than happy for any comments or PRs with improvements.
Ready To Build Awesome Apps?