15 Javascript Plugins and Tutorials for Adding Ratings

Giving users the ability to interact with your web site is one of the key elements to its success. Allowing users to post a comment or response and socially sharing are two of the basic fundamentals of web interaction, another, maybe less popular, is giving users the quickfire option of grading or rating a post, by using the super simple five star method or by the voting up or down approach.
Below you will find a selection of Javascript (jQuery, Prototype, MooTools…) plugins and tutorials that will allow you to add a ratings functionality to your posts.

Javascript Ratings Plugins

ColorRating Plugin

ColorRatingColorRating Plugin »
ColorRating is a small (only 5kbs of CSS/JS/PHP) Ajax and PHP 5-Star Rating Script that requires no database setup or administration as it comes with it’s own SQLite database, making deployment as easy as unzipping the files. It degrades gracefully for users without JavaScript.
Demo »

jQuery Rater Plugin for Star Ratings

jQuery Rater Plugin for Star RatingsjQuery Rater Plugin »
The original jQuery Rater Plugins usage nah been based on a fully degradable form submission model which means you must use markup containing an option list. Unfortunately, this means it became quite complex to support a rating model that fires off an ajax request to submit a new rating.
The developer wrote the new jQuery Rater Plugin for Star Ratings that should reduce the complexity of implementing an ajax rating scenario on the client side. The server side is easier as well since the markup doesn't change after a user has already rated. This plugin can also support multiple raters per page.
Demo »

jQuery Star Rating Plugin

jQuery Star Rating PluginjQuery Star Rating Plugin »
The Star Rating widget is a plugin for the jQuery that creates a non-obstrusive star rating control by turning a collection of radio boxes/select options into a sleek star-rating control.
It will create the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled making it beautifully downgradable.
Demo »

Starbox – Rating Stars for Prototype

Starbox - Rating Stars for PrototypeStarbox for Prototype »
Starbox allows you to easily create all kinds of rating boxes using a single PNG image. Witn its huge volume of options and functions, Starbox is quite possibly the most complete Javascript rating system within this article. The library is build on top of the Prototype javascript framework and for some extra effects you can add Scriptaculous as well.
Demo »

Rabid Ratings for MooTools

Rabid Ratings for MooToolsRabid Ratings for MooTools »
RabidRatings is an eye-caching ratings system whill allows users to your website to rate virtually anything with simplicity.
Installation is easy – simply tell the PHP script how to connect to your database and include the PHP tag where you want to have a ratable item, and everything else is done for you.
Most AJAX ratings widgets use star and half-star images with mouse over events on each star. RabidRatings uses a reverse alpha-transparent PNG as a background image to achieve infinitely complex precision (ie, 1.23 stars) and robust visual effects with a very low overhead.
Demo »

Control.Rating for Prototype

Control.Rating for PrototypeControl.Rating for Prototype »
Control.Rating attaches to any div, span or table cell on your page in one line of code to create a fully customizable CSS based ratings widget. Each control can optionally post an Ajax request when it's value is set, or can interact with text inputs or select elements that are already on your page. It uses four (customizable) class names to determine each link's state: rating_off, rating_half, rating_on and rating_selected.
Demo »

Star Rating Form Widget for Prototype

Star Rating Form Widget for PrototypeStar Rating Form Widget for Prototype »
The Starry Widget is a simple class that will enable you integrate star-rating fields into your forms with little or no Javascript knowledge.
Starry Widgets automatically build star based form elements in your HTML wherever you place the code snippets. This way you can use them in a typical form without having to do any special Javascript code or ajax.
Demo »

Unobtrusive AJAX Star Rating Bar

Unobtrusive AJAX Star Rating BarUnobtrusive AJAX Star Rating Bar »
The first thing to note about this plugin is that it is no longer supported by the developer. Having said that it is still good enough to be featured in this post. It is perhaps the most popular and most used ratings scipt ever with 208,000 downloads. It has been built with PHP and mySQL, it is unobtrusive (although the page will refresh) and you can also set the number of rating units you want to use (i.e. 4 stars, 5 stars, or 10 stars) on a rater to rater basis.

GD Star Rating for WordPress

GD Star Rating for WordPressGD Star Rating for WordPress »
GD Star Rating plugin allows you to set up rating and review system for WordPress posts, pages and comments in your blog. You can set many options for displaying the rating stars, and add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin.
Demos »

AJAX Star Rating Plugin

AJAX Star Rating PluginAJAX Star Rating Plugin »
This plugin offers you an easy and customizable way to enable your users to star rate any CakePHP model you want. It offers support for both Prototype and jQuery, seamlessly integrates with AJAX and is cross browser compatibile.
Demo »

Javascript Ratings Tutorials

Star Rating using CSS Sprite and jQuery

Star Rating using CSS Sprite and jQueryStar Rating using CSS Sprite and jQuery »
This tutorial will show you how to create a Star Rating plugin with help from CSS-sprites and using Ajax to store the voting value.
Demo »

Favorite Rating with jQuery and Ajax

Favorite Rating with jQuery and AjaxFavorite Rating with jQuery and Ajax »
In this tutorial you can learn how to recreate the unique and stylish method that amypink.com uses for allowing visitors to rate or “show the love” (as the develper calls it), with jQuery and Ajax.
Demo »

Reddit-style Voting With PHP, MySQL And jQuery

Reddit-style Voting With PHP, MySQL And jQueryReddit-style Voting With PHP, MySQL And jQuery »
If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.
Demo »

Creating an AJAX Rating Widget

Creating an AJAX Rating WidgetCreating an AJAX Rating Widget »
In this tutorial, you will be shown how to create the framework to display the animated rating widget and how to connect it to your server backend by using some of the most common Ajax frameworks out there (jQuery, Prototype, MooTools and Dojo), clearly separating the page creation from the JavaScript functions and the rating backend, to allow the script to be as flexible as possible and to be easy integrable into your existing website.
Download Files »

Voting System Tutorial with jQuery, Ajax and PHP

Favorite Rating with jQuery and Ajax
Voting system with jQuery, Ajax and PHP »
Demo »

Author: (588 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.