Ajax and CSS Post Rating Tools/Plugins

Typically, blogs have two methods of interacting with other members and the blog owner – through comments and possibly a contact/advertise form. When users leave comments, they review what the author has posted – providing feedback and a discussion on the topic – in the area where comments listing and indirectly through the commenter’s page (if linking/profiles is shown).

Simply having comments on your blog may create problems, however in the future. First, a visitor passing by may not want to post a comment, but needs the ability to quickly rate a post. Secondly, posts that have a lot of comments do not necessarily make it a better post – it simply means that more people commented. Lastly, if a blog has too many comments, most people simply scroll through them, avoiding beneficial information.

Star rating plugins and widgets eliminate some of the problems. If you run a blog devoted to reviewing movies, products, etc, these will help improve the rate at which visitors find the top rated posts (products), and can list posts by the way readers rated them. Built primarily off JavaScript and Ajax, they may cause problems if you are using a free hosting provider such as Blogger or WordPress.com; however, there has recently been new widgets created for blog owners desiring a widget they don’t host themselves.

Post Rating – Using JavaScript, CSS, XHTML, and Ajax

• If you are looking to create a star rating widget, the tutorial from Progressive-Coding guides you through the steps to create a four star rating system using JavaScript and then tying it into Ajax, offering steps to design and implement it on your site. This is geared towards advanced users, however a sample download of the star rating is provided at the end. The widget, when created is ‘flashy, animated, and incites people to click [it]‘.



• Komodo Media’s (home page) CSS Star Rating Redux is a tutorial to help create a CSS-based star rating widget. The newest version (Redux) features cross-browser support, ajax and back-end code, tables support, inline ratings (so you can place it in line with other text/elements), pseudo-state (meaning that when you refresh the page any ratings will be lost), and finally, percentage-based widths. The steps given are fairly simple if you know where/how XHTML and CSS should be placed. Included are instructions on creating a smaller star/rating widget.Previous versions (Deux and the original CSS post rating) include simpler steps for installing, as well as ways to design the stars vertically. These are shown in the second image with appropriate headings. 

  

  

• Masuga Design’s Unobtrusive Ajax Star Rating Bar is a rating script using PHP and mySQL making it able to run on most self-hosted sites. It allows users to customize the number of stars and if a user doesn’t have JavaScript turned on, the page will simply refresh when they vote.



• Star Rating For Reviews courtesy of Channel-Ai.com is a WordPress plugin, which is able to store information to your WP database. Not only is it for review blogs, but can be tied into the post header using instructions provided. Some other features include that it is standards compliant, fully customizable stars, plus the option of placing sorted ratings in a table/sidebar. 

  

• DS-Rating For WordPress is a plugin designed primarily for the blog owner to rate his/her own posts, as it doesn’t allow users to change the rating. The CSS stars range in value from 0-5, with a 0.5 star increment. Install the plugin and the ability to rate posts will be added below them, and the CSS can be then added in the control panel. 

  

• Another CSS/XHTML only design and tutorial is called the CSS The Star Matrix Pre-loaded. This tutorial is clearly written and images are provided to use when you create the rating system. This widget is one of the few not using JavaScript with mouse rollover features that would normally require it. 

  

• WP-PostRatings [demo] is by far one of the most popular Ajax rating plugins, created by a respected developer. Customization ranges from the image (stars, bars, or squares) to how many stars you wish to have (1-5). 

  

• Starbox Rating Stars were created for the Prototype JavaScript framework and easily creates rating boxes using one PNG image. 

  

• Ajax Rating/Star Rater for Movable Type is a plugin that enables users to rate your entries. Easy to setup, you simply add two lines of tag to your posts for rating. Note: The “Pro” version of Ajax Rating lets you rate comments, trackbacks, categories, authors, tags, and just about anything else. Added features include threshold viewing for comments based on rating, listing “hot” items, and comment reporting. 

  

• Spotback is a completely free, multi-platform tool to add post rating, content recommendation, top stories, and a tag cloud to the footer of your posts. 

  

• JS-Kit Ratings Service is a JavaScript widget that lets users vote on your posts. An additional features is that a ‘Top Rated’ service is available, highlighting the top posts.Other features include cross-browser compatibility, service statistics, customizable presentation, robust operation and full data backup, plus many benefits to visitors. 

  

• OutBrain is a widget with rock solid performance, support for all major blogging platforms (Blogger, TypePad, and WordPress and others). Simple install and nothing you don’t want. Also available in multiple languages. 

  

• BlogRate is a community where people vote on each other’s stories, but also contains a widget (which only tracks the last 5 readers to your post). The information from the post is then transferred onto the BlogRate site. Powered by Ajax and works on major blogging platforms. 

  

• Despite being in Spanish, you can find a unique post rating tool (Post Star Rating WordPress Plugin) at Abuse Magazine (translated to English) (also found at WordPress Extend), which uses Ajax techniques to gather the rating. Steps are provided for WordPress installation. 

  

Comment Rating

• Comment Karma is a plugin for WordPress that allows users to rate or moderate other users comments. A thumbs up or down will give them a positive or negative number, the same thing you’ll on similar social networking sites. 

  

• Sez Who

- A website tool that helps engage readers – a ‘distributed context, rating and reputation system for social media sites like blogs, forums, wikis, etc.’ (from Water, No Ice)

Other Tools:

• Slim offers an additional option for customizing Komodo Design’s CSS Post Ratings.
• PHP – 5 Star Rating System – Using hReview, this system can rate items or articles, and allows the inclusion of single or multiple rating systems on one page.
• Dave Naffis – Ruby On Rails, Ajax and CSS Star Rating System

- A short guide describing how to change the three types of star rating systems.

• ASP Ajax Star Rating – A simple ASP Ajax star rating system, which is also used on their site.