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.
October 24th, 2006
Cold any body give an explanation for the following error message please
success in database selection. Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘WHERE id=’1’’ at line 1
October 24th, 2006
How would you change the size of the ratings text??? Like where it says the 3/5???
October 25th, 2006
Hi,
I want to get “post id” of my post to use it in voting then every post will have own voting. so I tried many things but I haven’t achieved.
$raterID = 'rater-' . post->ID;function rating_bar($raterID,$units='')
------
$raterID = 'rater-' . post_ID();
function rating_bar($raterID,$units='')
what should I do to get post_ID?
October 25th, 2006
Hey, great script and I’ve played around with it a bit. Everything works as advertised, except for two small problems.
# When I output the rating bar, it always outputs one extra star. For example, I try to output a 5 star bar, but I get 6 star bar with the first 5 stars being “clickable”.
# When I output the rating bar, the current rating is displayed, but starts from the second star on. For example, if there is a rating of 3.0/5, the first star is empty, but the next three are filled correctly and the last two are blank.
Other than these two bugs, everything works perfectly.
So, if you or anyone knows why its outputting that extra star, or why it won’t start coloring in from the left-most star, please respond. I’d greatly appreciate it.
My changes: my gif is the starrating.gif sized down to 15px x 45px. The configrating file was changed to reflect the new width (15px) and my database setup. The .css file was changed exactly according to instructions above.
My guess is that the current rating bar and the user rating bars are overlapping incorrectly (i.e. the current rating bar starts out one star to the right from where the user rating bar starts). But I have no idea how to fix this.
October 25th, 2006
EDIT: I fixed problem #2 above. I went into rating.css and in the .unit-rating li.current-rating block I added a “left: 0px;”
attribute. This makes both bars overlap correctly. This may just be a lucky hack (it was a shot in the dark). If anyone has a real, tried solution, please do share.
The problem of the extra star still persists.
October 26th, 2006
well done TEAM! I couldn’t have done it without you! 5 STARS on my WordPress Blog looks great :) If anyone needs help or advice, stop by my site and ask. http://www.jharrisondesign.com
I would love to help turn this into a WP Plugin.
One question: Can I easily insert --> CODE into a new POST without having to copy/paste from a text file?
Thanks and God Bless
joel;
October 26th, 2006
Hi, this is EXACTLY what I was looking for and then some...but I have one question - I’m using a CMS (subdreamer) and wanted to know how involved the process is of adding this on many individual pages (many, being 150+)?
October 26th, 2006
Great stuff!
Added it to my site here
http://www.console-covers.com/covers/func,select/id,72/
October 29th, 2006
OK guys this script is great but i have a problem,.
I modified the script and it works fine for what I do but I noticed that the stars do not look right in Internet Explorer but it looks good in Safari, Firefox and all other browser.
can some one check it out for me and tell me what the deal is…
here is the URL
http://www.oghnia.com/2007/
notice the Star Rating in the Pictures section,, its screwed up… there is a yellow box behind each and every star,, why is that?
October 30th, 2006
is there another solution to rel="nofollow" to stop spiders voting. Maybe using javascript?
October 31st, 2006
Hiya,
Firstly, thanks so much for an amazing script. It’s simple, easy and worked right out of the box - thank you!
My issue concerns compatibility with WordPress; the script works like a charm on my test page, but the vote just hangs in WordPress, despite doing the modifications you’ve suggested - 1) commenting out mysql_select_db($dbname); and 2) appending the seven other instances of $tableName to $dbname.$tableName (the rating_prefix didn’t work for me :)).
The test page still works perfectly with these amendments, but it seems to have done nothing to help with my WP page.
Any further suggestions as to what may be causing this and how to fix it?
Thanks in advance!
November 02nd, 2006
I for one would LOVE to see this modified into a MediaWiki Extension. I don’t think it would be that hard, unfortunately I don’t have the skillz.
November 03rd, 2006
I just published my first blog and I wanted to enable this feature so visitors can rate the photos however I cant seem to figure out how to install this script. Is there a documentation for it? I downloaded the file but I didnt see any install instructions. Am I missing something?
November 03rd, 2006
Nice work.
Took a bit of tweaking but got it working.
The whole manually creating the entries in the DB got to me a bit so I wrote a script to automate that part. When I uploaded that and ran it the tables were created correctly and easily without having to do it manually or needing to reply on phpMyAdmin etc.
Also some simple modifications to the _drawratings.php got rid of the issue people were having where it wouldn’t write to the DB and would therefore start over when a page was refreshed.
November 04th, 2006
All right, I see the install file. I initially opened it with notepad and it came out all distorted. It fine now that I opened it with wordpad.
I’ll post my results.
November 05th, 2006
I would also like to see it for MediaWiki. Please! :)
November 05th, 2006
This working in Joomla would be brilliant. I see “console-covers” has it working in Joomla, anyone know how they did that? I asked them but didn’t get a reply
November 06th, 2006
Works great! I added it to my photo blog and it works really well (http://foromaki/net/fresh). I made a few mods, though:
- The filter by IP thing won’t work for me (many users using NAT), and one cookie per vote is too much. Instead, I send a “session” cookie that is unique per visitor, and then check that in the DB to see if they’ve voted before.
- I also moved the previous voting from being squished in a single column to a separate table. The encode/decode thing into a single column was a nice hack for simplicity, but is likely to have performance problems for lots of votes (not my site!). Also, I wanted to have voters histories so I could later show them their vote.
- I switched it so that when a user has voted, their vote shows up in the star view, instead of the average. This is how Netflix does it, and I prefer that model. I look up their vote in the aforementioned table.
- I’m using it from wordpress, but it’s not really “integrated” so much as “shoehorned”.
- Added some links to do “Top 20” and “Your Top 20” views based on ratings
- There is a minor bug in rating.js whereby if your HTML contains a “|”, it will break the AJAX. I did a workaround (cuz I’m lazy), but a real fix would be pretty simple.
Anyway, I’m a very satisfied customer. Cheers!
November 07th, 2006
Ok this install is getting really confusing. I agree with fubar (#110) above that this is really frustrating and difficult for newbies to install. The doumentation is inadequate. I’m using wordpress and I activated the exec-php plugin.
I dont understand where _config-rating.php is supposed to sit. Under which directory?
Step four is confusing as well. What am I supposed to do with this information:
4. Point to the right Javacsript and CSS files (you need behavior.js, rating.js, and rating.css)
Where are these files supposed to sit? Where do i place the script? Am I supposed to edit the script?
For wordpress where would I place this file:
At the top of my Index.php sheet?
Once I figure this all out I could write detailed documentation for successful wordpress install. Help would be appreciated.
November 07th, 2006
Sorry the script below didnt appear in the comment for some reason
For wordpress where would I place this file:
php require(’_drawrating.php’);
At the top of my Index.php sheet?
November 07th, 2006
Is it me or does this simply not work in opera?
November 07th, 2006
@vibez: This might very well not work in Opera. I’ve never tried using it or tested it in that browser. Can anyone else confirm whether vibez is crazy or this really doesn’t work in Opera?
@Eric: No offense but I’m not sure how I could have made an install much easier...there are almost no files to deal with! _config_rating can go anywhere you want, as long as you point to it correctly. Put it in your root directory. The JS and CSS can go anywhere you want. If you have a JS folder, put your JS in there, same with the CSS. Or don’t...it’s up to you.
Basically, the files are set up to work correctly if you drop this folder on your site as is. Everything should work inside the folder. Now, when you start moving stuff around (and possibly outside this folder), you’ll have to just make sure each file know where the other file was moved to. I think all the links in the files are relative.
_drawrating.php gets included on any page where you’ll want a rater. You might have to change the path in the require based on where you put the _drawrating file - is it in a folder called ‘my_cool_rating’? Is the page where your raters will be in the root directory? then you’ll have to change the path.: php_require (’my_cool_rating/_drawrating.php’).
Hope that helped. Wish I had time to help people or write better docs, but that’s just not possible.
November 08th, 2006
Hello—I just installed the script with Wordpress—it works great, however the background and stars seem to be off—you can see it here http://southerntrek.com/blog/
is anyone else having this problem?
November 08th, 2006
@ryan.
It works fine in opera except on my site. Time for me to get debugging
November 08th, 2006
Hi,
I’m a bit lost, what is going on? Why do I get the “Cannot connect do DB” error? The information is correct? Thanks…
November 09th, 2006
It works in Opera 9
November 09th, 2006
For Wordpress you suggest:
Change _config-rating.php
Comment out the mysql_select_db($rating_dbname); line.
When i do this, the rater stops working… if i leave it as is, its fine. what exaclty are the issues when this is commented out or not?
November 09th, 2006
@semih #123
For WordPress you can use: $id
November 09th, 2006
half my previous post is missing
here it is:
rating_bar($id);
November 10th, 2006
In response to Ryan (http://southerntrek.com/blog/): your image file has a problem. Make sure the three “frames” are all the same height. Otherwise they won’t overlay correctly.