Unobtrusive AJAX Star Rating Bar
What It Is
This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. It is a major improvement on the previous version because it is now unobtrusive, meaning that if Javascript is off it will still work (although the page will refresh). 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 (see samples below or read the docs). A few other changes were made as well – see the docs for details. Note that this script isn’t tied to any specific system (such as WordPress), so you should be able to adapt it to your situation without too much trouble. What are you waiting for? Check the demos.
Based on work found at Komodo Media and Climax Designs. There is also another AJAX version of a rater on this page: Yvo Schaap
Good people of the Internet: This work is licensed under a Creative Commons Attribution 3.0 License. Please give credit where it is due, whether it is to me or the people upon whose work I based this script, and don’t claim this work as your own! Please consider making a donation – even $0.50 or a buck. That would be so freaking cool of you. Donate button located below.
If you have any problems downloading the file, first make sure you don’t have any over-crazy firewall protection on. When you can’t grab the file that is USUALLY the culprit. And you have to download it from this domain. I don’t like direct links from other sites. If that doesn’t work, .
Whatchoo Talkin’ ‘Bout
v 1.2.2 Updates (March 18, 2007):
Sorry for the quick release between version 1.2.1 and version 1.2.2. I needed to update the script this page was actually using (it was still using the oldest version) because someone kept farting around with the ratings here. Hopefully, that won’t happen now that this page is using the newest version of the script. Also, because I’m running this site with Wordpress, I found it was a pain in the arse to go in and change the DB queries manually, so I just altered the script to work with Wordpress out of the box by changing what needed to be changed.
- Added: prefixed DB calls with $rating_dbname for better separation from other scripts. This will really help with Wordpress installs – As of 1.2.2 – I don’t think you need to do any special tweaks any longer.
- Updated: changed some variable names so as not to confuse with other scripts
Notes
Basic changes, modifications, and answers to common questions. I will move all changes, modifications, and general advice to the forums, where they belong. (The forums are NOT live right now, but coming soon…)
With a Little Help From My Friends
HEY MONKEYBOY. YEAH, YOU. One very good reason that I DO NOT offer tech support on this script, offer CSS lessons, teach HTML, or give anyone any idea how to fix this silly thing in IE 6 – all things that google is so good at if you know how to type, is because I make next to nothing on this script.
I spent a lot of spare time polishing this thing up and trying to make it more useful. If the late nights I spent tearing my hair out trying to determine why Internet Explorer won’t allow dynamic insertion of an “onclick“ into a link using setAttribute has saved you any time at all, or if you just think it looks purty, consider a little donation. C’mon, you know there must be a couple bucks just sitting in your PayPal account that you’ve forgotten about!
If you come up with anything more interesting or better developed than what I have here, you’ll have to drop a line in the forums (which, I’m telling you, are coming soon). Suggestions are welcome and information about vulnerabilities or egregious violations of PHP best practices is most welcome as well – just be nice. And remember, spread some good karma: donate today!
Whither Wall of Fame & Live Samples?
These have been quietly removed. All I got was an inbox full of needy people looking for linkage to their site, that may or may not have been shoddy, and may or may not have actually used the rater in such a way that it looked good. There was way more noise than signal there, and I didn’t need the headache. Thanks to everyone who has donated in the past, and will donate in the future. It’s much appreciated!
Demos
Comments are closed for the Star Rater!
Sorry, but comments have been closed for this script. You can now read all about it (and post your questions and advice) in the forums! (Coming VERY soon...) Pretty much all the info you need to fix or upgrade the Star Rater version 1.1 is found in the existing comments. And again, sorry if you feel like you're getting dissed, but I can't offer help on this script. I just can't. I can't give lessons in CSS, either. I may be able to pop in on the forums from time to time. Thanks for your understanding.
300 Comments
Sorry, comments are closed.
November 11th, 2006
very nice script… I installed and modified script for my member area changed used_ip and it seems very nice now.
I am looking for a poll like this script.
thnk you ryan good job
November 11th, 2006
Great script mate, exactly what I was looking for!
Just Two Suggestions:
1.Make the fields used in the script to be customized, much like $tableName. I already had a voting script which used similar math functions (Total votes and Current Rating) so those were no big deal to change in the Mysql database. But ‘id’ was, and I had to go through every page and replace this in the SQL statements.
2. I don’t know if my mySQL server is picky, or just out dated. But It will not accept this type of query:
SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='$id_sent'Instead, I have to do it like this:
SELECT `total_votes`, `total_value`, `used_ips` FROM $tableName WHERE `id`='$id_sent'Again, no biggie. The script is pretty light so it only took a few minutes.
Great job, keep up the gook work!
November 11th, 2006
Very interesting script!
I made some changes.
added the insert if update not effected the rows. (auto insert instead of the manual) i have many database id which i implemented this to.
Thank you. been searching for this one.
I tired keeping it in a sub folder and didn’t work well. So i copied the files to the root and respectively,.... the script ran smooth.
Thank you again for sharing this work!
November 12th, 2006
Excellent script… really, really nice! Thanks Ryan.
Does anyone know how to use different values for tblName based on the page you’re on? For example:
/blogs/ (we’re on the blogs page) set tblName=tblBlog
/photos/ (we’re on the photos page) set tblName=tblPhoto
I can only get the script to work with one fixed value for tblName in _config-rating.php - if I try and assign the value dynamically it works when initially drawing the rating, but not when posting the rating to the db (it just hangs with the working gif displayed). I’ve tried passing the values in the db.php link but with no success.
Any ideas?
November 13th, 2006
Thanks ryan. With your help and Joel Harrison (#126) i got it to work. I am going to work on some install documentation for newbies as myself using wordpress incorporating the items mentioned above.
take a look here: ericsphotoblog.com
I removed the line, rating id output, and centered it as well.
As for problems related to the rating hanging when clicking on the stars, I found that when removing “$id_sent. from the rpc.php file it caused it to hang.
Removing the . from _drawrating.php was enough to get rid of the rating id output and it stops it from hanging.
November 13th, 2006
Sorry I am not sure why some of the script didnt appear in the comment above.
As for problems related to the rating hanging when clicking on the stars, I found that when removing $id_sent. from the rpc.php file it caused it to hang.
Removing the php echo $id ?>. from _drawrating.php was enough to get rid of the rating id output and it stops it from hanging.
November 13th, 2006
Having problems with google indexing/making votes (I assume) ive just added the rel="nofollow" tags and i’ll see what happens… (Ive also modded it to check cookies thanks Dan#70) Ryan, Thanks for the script!!! http://sneakerate.com
November 14th, 2006
@138 squantum: rating session in cookie is a preferable manner than one cookie per vote i think too. But take note your non javascript version is broken.
@153 mondre: if you put the files in a subfolder, dont forget to edit rating.js to reflect the change (which calls the db file).
@154 Gareth: not sure about tablename issue, you could try adding an extra column to the ratings table, and changing the myself queries to include this page id. Thats what i’ve done anyway.
November 14th, 2006
Forgive me for being a noob, but how do you re-render the show rating bar to show the stars as above and not an unordered list of rating numbers.
Maybe it’s lack of sleep that is causing me to over look something plain and simple, but I’m at a loss.
November 17th, 2006
After spending hours and hours and hourse getting this rating bar to work on my wordpress site I completed some install documentation for newbies.
This documentation is in more detail than the readme file and it describes how to install with wordpress plus some of the modifications mentioned in this comment page.
Check it out here: http://www.ericsphotoblog.com/star-rating-bar/
November 17th, 2006
Hi!
Thank you sooo much for making such a slick looking rating bar.
I’m having some problems with the presentation of the hover stars and the results stars on my website, www.musicshoppingmall.com.
I do believe it is functioning correctly, but it’s just the presentation that’s not good on IE 7 and firefox 2.0.
Would you (my friendly forum readers) be able to help me?
The locations of my css is:
http://musicshoppingmall.com/js/behavior.js
http://musicshoppingmall.com/js/rating.js
http://musicshoppingmall.com/css/rating.css
Thank you.
Richard
November 21st, 2006
@160 Eric: Thanks for writing that up for the WordPress users. If they read this far down the page, your link might help cut down the number of emails I get about getting this script to work with WP!
@157 D:Like the site! I’d love to own a few pairs of those shoes. I voted on a few - works well.
November 21st, 2006
by far the best rater i’ve found yet. i cannot say thanks enough.
one question, i installed a test page on a new domain and within the day was already hit with the google bot (66.249.65.205
November 21st, 2006
@163 zeetes: I think a few people here have mentioned that adding a rel="nofollow" to the links helps. There’s a lot of comments here now - might have to do a bit of digging.
November 21st, 2006
oh hah i don’t think all of what i posted published.
yeah i’ll add the “no follow” to my tags when it goes live. i hate that bot sometimes.
my real question was is it possible to reset the ip logs weekly/biweekly since i’m way out of practice with php and i don’t really feel like writing a cron script.
thanks!
November 22nd, 2006
Thanks Ryan..
I’ve little problem i don’t want “ 4.5/5 (2 votes cast)” text under stars. I want put next to stars. How can i do
(sorry for English)
November 22nd, 2006
Is there a way to prevent people from just copying the rating url and multi-vote? i.e. http://www.website.com/db.php?j=3&q=4&t=0.0.0.0&c=4
Also with wordpress, how could i force people to log in before voting?
Thanks again.
November 24th, 2006
166 omur: You could try something like this, add to your rating css..
div.ratingblock ul { display: inline}
This basically means the rating list is displayed without any line breaks before/ after it.
167 zeetas: A cronjob is certainly the easiest way to do this. but you could do it manually with a simple php file like this..
That script would reset ratings_table_names used ips when you called the script like so: example.com/resetips.php?reset=now
if you forget the ?reset=now bit, the script doesnt run, for overly simple security..
as for your other questions, yes its possible to prevent multi votes, example: http://zonteck.com/zonlist/beckinsale_01/10
But it’s complex if you want to take into account referrers and what not, ryan is working on an update to this rating script that should include this feature (i think?). I remember in the previous comments someone has shown how to implement this to some measure.
November 24th, 2006
Oops i forgot wordpress strips php code. Remove underlines.
November 25th, 2006
168: @zonteck
i did it but now text is on the stars
i do it like this (http://img258.imageshack.us/img258/6152/heyyoooooooolh3.png)
November 26th, 2006
Hi, i had the same problem as #51:unexpected $end in _drawrating.php on line 51
I found out it’s because my php.ini was not set to allow short open tags in.
And now it works :)
Find this line in php.ini “short_open_tag = off” and set it to on
If you dont have access to php.in, you can just change the tags from short tags: “
November 26th, 2006
This script has obvious security flaws, and I have zero time to work on an update. I will check in periodically to clean up and reset the rating bars to zero(s), though.
Putting this script together was meant more or less as an exercise for me and has turned into a burden. Please note: I will no longer answer ANY tech-support email regarding this script. You can write it, but I will not respond. Thanks for understanding.
November 27th, 2006
I get something funny in IE6… but not in FF…
I set my ratings to 4 stars, but in IE after I vote, I get 5 stars showing after I voted.
In FF 1.5 and 2 I get 4 before I vote, and 4 show after I vote… Somehow in IE 6 I am getting an extra star to show after I vote
November 27th, 2006
found the problem, was center aligned
November 30th, 2006
This script don’t work with Firefox v1.5.0.8
November 30th, 2006
i’m running 1.5.0.8 currently and it runs fine.
December 01st, 2006
#167 Zeetes
Nice find… that make this script TOTALLY USELESS! oh well. its still fun and still great to use but this script can NOT and SHOULD NOT be used in any real world applications, unless of course it just for fun. like rating pictures n stuff like that.
December 04th, 2006
Solution to Insert Statement
++++++++++++++++++++++++++++++++
if ( $numbers[’total_votes’] == “” ){
mysql_query("INSERT INTO ratings (id, total_votes, total_value, used_ips) VALUES(’$id’, ‘0’, ‘0’, ‘’) “)
or die(mysql_error());
}
++++++++++++++++++++++++++++++++
Complete script _drawrating.php
++++++++++++++++++++++++++++++++
“>
“ class="unit-rating" style="width:px;">
px;">Currently /
<a>&q=&t=&c=” title=” out of “ class="r-unit rater"></a>
class="voted" >. Rating: / ( cast)
December 04th, 2006
Thanks for writing this script Ryan. You can never please everyone and those who don’t like your free script should go and pay for one for their ‘real world applications’, thanks again, Mark
December 04th, 2006
Hola, Muy buen trabajo!!! está muy bueno el rating.
el detalle de que no funciona correctamente en el internet explorer, se resuelve cambiando el “rating.css”, este es el código correcto:
/* styles for the unit rater */
.ratingblock {
width: 50%;
display:block;
padding-bottom:8px;
margin-bottom:8px;
margin-left: auto;
margin-right: auto;
}
.loading {
height: 30px;
background: url(’../images/working.gif’) 50% 50% no-repeat;
}
.unit-rating { /* the UL */
list-style:none;
margin: 0px;
padding:0px;
height: 30px;
position: relative;
background: url(’../images/starrating.gif’) top left repeat-x;
}
.unit-rating li{
text-indent: -90000px;
padding:0px;
margin:0px;
/**/
float: left;
/* */
}
.unit-rating li a {
outline: none;
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.unit-rating li a:hover{
background: url(’../images/starrating.gif’) left center;
z-index: 2;
left: 0px;
}
.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:30px;}
.unit-rating a.r2-unit{left:30px;}
.unit-rating a.r2-unit:hover{width: 60px;}
.unit-rating a.r3-unit{left: 60px;}
.unit-rating a.r3-unit:hover{width: 90px;}
.unit-rating a.r4-unit{left: 90px;}
.unit-rating a.r4-unit:hover{width: 120px;}
.unit-rating a.r5-unit{left: 120px;}
.unit-rating a.r5-unit:hover{width: 150px;}
.unit-rating a.r6-unit{left: 150px;}
.unit-rating a.r6-unit:hover{width: 180px;}
.unit-rating a.r7-unit{left: 180px;}
.unit-rating a.r7-unit:hover{width: 210px;}
.unit-rating a.r8-unit{left: 210px;}
.unit-rating a.r8-unit:hover{width: 240px;}
.unit-rating a.r9-unit{left: 240px;}
.unit-rating a.r9-unit:hover{width: 270px;}
.unit-rating a.r10-unit{left: 270px;}
.unit-rating a.r10-unit:hover{width: 300px;}
.unit-rating li.current-rating {
background: url(’../images/starrating.gif’) left bottom;
position: center;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
.voted {color:#999;}
.thanks {color:#36AA3D;}
Saludos!!