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.
December 04th, 2006
Hey there… first of all I just want to say how awesome this script is.
I’ve managed to get it to work with no problems what so ever on my site.
Now I know you’re not replying to support questions anymore Ryan but I thought maybe someone else out there might be able to help me.
My problem is thanks to wordpress… well so I believe.
The connection to the database works, i think… the css works… but when i try and click on a star i get an error?
http://furydesigns.com.au/2006/09/15/firefox-extensions/
Can anyone help?
December 05th, 2006
How would this work if i had multiple pages (each with their own star rating) on a website? ie. would i need to setup more databases or more tables and how would i accomplish this?
Thanks in advance
December 05th, 2006
anyone understand comment #6 (Jason G.’s comment) i couldn’t do. please explain excatly
December 05th, 2006
Two days later and I still haven’t been able to figure this out.
I’ve followed all the instructions… including the wordpress ones up the top.
I’ve read all the comments and a few people have had the same issue as me but they’ve never left an answer.
I’ve got two pages setup and connected to the same database and files.
http://furydesigns.com.au/ratingbar.php
http://furydesigns.com.au/2006/09/15/firefox-extensions/
Only difference is one is on Wordpress… the problem is: Whenever you click on a star the loading image comes up but hangs.
Help please :(
December 06th, 2006
Alright,
I seemed to have fixed all my problems now… with a lot of help of course ;)
Because of my permalink structure the stars weren’t pointing to my database… just had to fix the links up and all worked well.
December 08th, 2006
If I put this rating system on multiple pages will it still work if one person votes on more then one page?
December 08th, 2006
Is it possible to include script in cutenews at full story?
December 10th, 2006
187# Yes it is possible
December 10th, 2006
Would be nice if you made this function based and not have echo’s all over the place. Would be a lot easier to make more portable =
December 10th, 2006
1. When I have more the one rating system on the same page it automatically counts the vote for both.
2. The second voting system counts the vote but the loading bar is still being displayed.
http://www.supplement-analysis.com/test/index.php
December 14th, 2006
Hello,
i actually managed to rewrite your wonderful script in ASP and VBScript… i hope you dont mind :)
December 17th, 2006
Hi,
were do i put the rel="no follow” to prevent the bot to vote each time? sorry for that question, iam a beginner ;)
December 17th, 2006
Hi,
There is problem on 6th comment. please help me i’m beginner :(
December 21st, 2006
Hi all,
Just a quick note on this script, if you use it your page won’t validate as seen on some of the sites linked to here.
The problem is in _drawrating.php line 38 of the supplied unedited version of the file and is down to the use & not being entered as &
To get the script’s code to validate change line 38 from:
<a>&q=&t=&c=” title=” out of “ class="r-unit rater"></a>to
<a>&q=&t=&c=” title=” out of “ class="r-unit rater"></a></pre>
If you have already made changes, just replace the 3 instances of & to & and it will fix those validation errors.
Here’s a version with the no follow command to prevent bots that stick to the rules from following the links (posted and refered to above lots of times but people seem to be missing where to put the no follow command:
<a>&q=&t=&c=” title=” out of “ class="r-unit rater” rel="nofollow"></a>Also the read me doesn’t point this out, but don’t forget to make sure your _config-rating.php file has a suitable CHMOD to prevent people from accessing your database connection settings and from hacking your website! Try CHMODING it to 644 or 666 and testing to see if it still works.
Hope this helps!
On a separate note, I’ve spent about 3 days messing with this code to get it to work on my site and the things I’ve found so far seem to be mainly down to incorrect paths. As mentioned above, if you have your page that contains the rating stars in a sub folder, it creates a nightmare of a mess to track down.
I’ve finally got mine working fine in terms of the Ajax and database working fine updating with the votes but I’ve noticed a CSS inheritance problem from my main CSS sheet is causing the star images not to line up properly in the browser.
If through the use of Firefox’s Web Developer extension, I disable my main CSS Style sheet, the stars work perfectly as they do here on this demo page. One of the CSS classes in rating.css requires something extra to be set, as its inheriting from the main CSS sheet and I have a feeling its something to do with a font-size class not padding and margin.
If I add font-size: to the CSS for unit_rating it seems to make a difference but not enough. So close I can taste it!
December 22nd, 2006
Hi !
I have a little, but i guess an important problem. I installed the script. Everything is okay, but then i click on the stars to rate, nothing happened, just the “download icon” endless…
What I have to do, if anyone know what i could do..
Thanks for your help..
Capo
December 22nd, 2006
anybody got the mediawiki extension yet?
as a rookie I will try it myself…
Ill let you know when it is ready (maybe 2010!)
December 22nd, 2006
The code in my last post #194 is missing but essentially to remove validation errors in your page, you have to replace the 3 occurrences of the & (ampersand) sign in line 38 of _drawrating.php with the special code & a m p ; without the spaces. Sorry, couldn’t get it to display here without these spaces in between as the code BBCode isn’t working!
December 22nd, 2006
Mark,
You can put the attribute rel="no follow” in _drawrating.php (line 38). Look at the source code of your webpage before and after the edit to verify its done.
December 22nd, 2006
Re:#195 Capo
I found this happens when your paths are wrong or some of the files and folders are in different places to where the script is looking for them when you click on the rate button. Check your folders are in the same layout as in the download or update the paths in the files so they look in the right place.
December 22nd, 2006
The download url doesnt work?…
why is that?
December 22nd, 2006
no it is working
December 22nd, 2006
it wasnt because of Kerio Personall Firewall, after I put that out is is working again
December 23rd, 2006
this rookie made the Unobtrusive script working for MEDIAWIKI at www.leerwiki.nl. There are a lot of adaptions, showing them in this forum would be a mess. So check the manual out at this link.
Thanx Ryan, for your wonderful script!
December 23rd, 2006
RE: #195 THE OLD MAN !!
Hey, thanks a lot for your help, it still doesn’t work… I checked every single link, on every single file and paths and layouts are right… I don’t understand… in the original folder, there is /index.php. On this page, everything is ok, but i can rate the same bar several times and you never see the average… (i hope you understand, i’m not english, i’m trying to do my best...)
If someone have or had the same matter… you can help me… Thanks again Mister Old Man…
December 24th, 2006
Capo,
When you click a star, does the database update? Even though the loading bar never goes away?
If it does and the votes increase next time you look at the page, I would say the script can’t find the files it needs.
If it doesn’t, the script is hanging somewhere before it can update your database.
I had this problem for a while, it was the paths that were wrong.
Post the layout of your relevant files and folders here.
Here is my layout which works fine even in a subfolder but note the comment about CSS and images below.
/cmeacg/episode.php (the page that contains the rating stars)
/cmeacg/rpc.php
/cmeacg/db.php
/cmeacg/_config_rating.php (change CHMOD on this to 644 after you have it working)
/cmeacg/drawrating/php
/cmeacg/js/.DS_Store
/cmeacg/js/._DS_Store
/cmeacg/js/behavior.js
/cmeacg/js/rating.js
/css/rating.css
/images/images go in here
I haven’t changed the paths in any file, they are as they were in the download because the directory structure is unchanged but is now one deep however the images and css are in the folders specified above.
I changed the path in the CSS sheet to show the images but if you can see the graphics that’s fine.
If your layout is as above, the loading image should either display quickly and green text will say similar to “Thanks for the vote” or the image won’t even show if your server and connection are very fast and you’ll just see the confirmation message.
The script falls back to updating the database manually and reloading the page if AJAX doesn’t work on your browser which is good.
I know some here have said they changed the cookie check for a session check, I hope they one day post this version for all to benefit as this would be cool!
The Old Man
December 26th, 2006
So I have the script working perfectly on my site. The only problem I have is that the script doesn’t work for AOL users. Does anyone else have an issue with this? I’ve tested it on all browsers and many different ISPS - the only one that doesn’t work is AOL. I don’t know if this is an IP issue (AOL members share proxy IPs and their IPs constantly change) or just an issue of AOL not supporting the script. Any fixes?
December 26th, 2006
Hi,
I got this script working and it’s working fine the only problem is i am getting one too many stars. This is the example address: http://www.ferizaj.net/video/video1.php?vid=123
Thanks
December 27th, 2006
Hello,
I’m french and this script is very nice ! But he doesn’t works in my website, the rate is good but results restart always in 0 ? why ???
http://www.studio-trackmania.com/index11.php (in bottom)
December 28th, 2006
Please if any nice guy help me in creating the ajax rating system. i am looking for good response.
Kashif Mushtaq
kashif_mushtaq2008@hotmail.com
December 29th, 2006
Hello!
Guys i have tried the rating system, it does not shows the answer on click please help me,
waiting ....