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.
February 03rd, 2007
hi everyone, has anyone figured out a surefire way to fix the “hanging” issue when the user votes? here’s an example....
http://www.grademycollegetown.com/rating/index.php?poi_id=1
February 03rd, 2007
Thx for grate script. After some modifications and a little of pain :) itegrated it with my phpbb based site and user system.
February 03rd, 2007
Hello, once I fixed all my issues, do you know it would be possible to make, for example that the items in the playlist at the right get arranged by votes? I mean if a video has an average of 4.9 gets at the top and an 0.1 gets at the bottom!.
It would be great if someone ones or could help me to do it (I can pay you, but not very much i’m a student hehe)
February 04th, 2007
D’oh! Now it doesn’t display properly on MSIE6.0
http://browsershots.org/png/full/64/6469a29a9a717583f6da2f8a0ae25fed.png
Do you know why?? Please anyone help :(
The website is http://www.chetos.es and it *should* display as this:
http://browsershots.org/png/full/4a/4a647d0fd69a0809d13bc3f60eaa86c5.png
February 04th, 2007
This is fantastic!! Works solid cool!
February 04th, 2007
(stupefait) looks nice how u have placed that on your site.
(JinRoh) about the arranged by votes thing that could be done with some php and sql to order them by votes is that the only page you have with the votes and links to play teh video on the left.
About the stars over lapping the text could be just the css or were the code is placed and how its coded if you still need help jst ask and do u have msn to i can help u over ther its easyer.
February 04th, 2007
RE[276. Joe ] => :
Major idia: that with phpBB one shouldn’t and often couldn’t use “echo” instructions, so I devided _drawrating.php function on 2 parts: 1st one - calculations in php file, and 2nd one is output in phpbb template file.
February 04th, 2007
Hello, Joe, please could yo help me with the problem with MS IE 6.0? I don’t have IE6 so I can’t try for my self. My MSN Messenger is --> JinRoh_AT_JinRoh_DOT_org
Thanks for your help
February 04th, 2007
Hmm!! I read that IE6.0 doesn’t display “properly” the that I am using to allocate correctly the stars, maybe that’s the problem??
Please a css-guru knows how to fix? :D Thanks
February 04th, 2007
HI (stupefait) cool do u think i could see the source code of the template and the _drawrating.php maybe usefull for 1 of my sites. Im no good with javascript im going to learn it soon but in the meen time do you think i could use what you have done to make it that only loged in user can vote and hav you set it up so it uses usernames not ips etc
(jinroh) iv added you to msn so if your on tomorow ill try and help you. :)
February 05th, 2007
Is it possible to get transparent images of the stars and working graphic?
February 05th, 2007
Well I’m still requesting the transparent stars but heres something we can all use.
If you want to change your loading graphic this website will make one for you, for free and its instant!
http://ajaxload.info/
I also wrote a php function to automatically calculate the CSS where you need to multiply. If anyone is interested let me know and I’ll package it up for distribution.
February 06th, 2007
Dwilkinsjr, you can do a transparent background if you want (use photoshop, check my website to look an example)
By the way, when is the “loading graphic” displayed? Because I have never seen it (i’m using firefox)
February 06th, 2007
RE[280]. Joe {in the meen time do you think i could use what you have done to make it that only loged in user can vote and hav you set it up so it uses usernames not ips etc}
I tried many different version with different restrictions on voting
TO deal with USERID we should inserte new field
‘IDS’ in TABLE exactly the same type as ‘IPS’
In template I entered code:
<!-- BEGIN rating_ID_exist -->
Currently {RATING_CURRENT}/{RATING_UNITS}
{RATING_STARS_LIST}
Рейтинг: {RATING_CURRENT_1}/{RATING_UNITS} (Ð’Ñего проголоÑовало: {RATING_COUNT})
{RATING_NO_GUESTS}
<!-- END rating_ID_exist -->
</pre>
<!-- END of RATING MOD -->
IN PHP file
// RATING MOD BY SHULGINRU
require($phpbb_root_path . ‘_config-rating.’.$phpEx); // get the db connection info
$rating_units = 10;
$rating_stars_list = ‘’;
$rating_voted_class =0;
$rating_id = $entry_id;
$rating_ip_id = $userdata[’user_id’] + 1000000;
$rating_no_guests = !($userdata[’user_id’] + 1); // id = -1 for guest
$rating_ip = $_SERVER[’REMOTE_ADDR’];
$query=mysql_query("SELECT total_votes, total_value FROM $tableName WHERE id=’$rating_id’ “)or die(” Error: “.mysql_error());
$numbers=mysql_fetch_assoc($query);
if($numbers)
{
$rating_count=$numbers[’total_votes’]; //how many votes total
$current_rating=$numbers[’total_value’]; //total number of rating added together and stored
// determine whether the user has voted, so we know how to draw the ul/li
//$rating_voted=mysql_num_rows(mysql_query("SELECT used_ips FROM $tableName WHERE used_ips LIKE ‘%".$rating_ip."%’ AND id=‘“.$rating_id.”’ “));
$rating_voted2=mysql_num_rows(mysql_query("SELECT used_ids FROM $tableName WHERE used_ids LIKE ‘%".$rating_ip_id."%’ AND id=‘“.$rating_id.”’ “));
if($rating_voted2 || $rating_no_guests)
{ $rating_voted_class =1; }
else
{
for ($ncount = 1; $ncount ‘.$ncount.’‘;
}
}
$ncount=0; // resets the count
$template->assign_block_vars(’rating_ID_exist’, array() );
}
// END OF RATING MOD
and later in php file one must add
//
// Send general vars to template
//
$template->assign_vars(array(
......
.....
//rating function by shulginru
‘RATING_ID’ => $rating_id,
‘RATING_UNITWIDTH’ => $rating_unitwidth,
‘RATING_UNITS’ => $rating_units,
‘RATING_COUNT’ => $rating_count,
‘RATING_TOTALUNITSWIDTH’ => $rating_unitwidth*$rating_units,
‘RATING_CURRENT_WIDTHFORMAT’ => number_format($current_rating/$rating_count,2)*$rating_unitwidth,
‘RATING_CURRENT’ => number_format($current_rating/$rating_count,2),
‘RATING_CURRENT_1’ => number_format($current_rating/$rating_count,1),
‘RATING_STARS_LIST’ => $rating_stars_list,
‘RATING_NO_GUESTS’ => ($rating_no_guests)?’ГолоÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð´Ð¾Ñтупны Ð´Ð»Ñ Ð·Ð°Ñ€ÐµÐ³Ð¸Ñтрированных пользователей‘:’’,
‘RATING_VOTED_CLASS’ => ($rating_voted_class)?’class="voted"’:’’
);
And as we need to send one more paramentr we must add one field in JavaScript Function
var ratingAction = {
‘a.rater’ : function(element){
element.onclick = function(){
var parameterString = this.href.replace(/.*?(.*)/, “$1"); // onclick="sndReq(’j=1&q=2&t=127.0.0.1&c=5’);
var parameterTokens = parameterString.split("&"); // onclick="sndReq(’j=1,q=2,t=127.0.0.1,c=5’);
var parameterList = new Array();
for (j = 0; j ‘;
xmlhttp.open(’get’, ‘rpc.php?j=’+vote+’&q=’+id_num+’&t=’+ip_num+’&u=’+ipid_num+’&c=’+units);
xmlhttp.onreadystatechange = handleResponse;
xmlhttp.send(null);
}
Originally I wasn’t thinking about sharing this code with community and it was designed for very specific site based on phpBB.
February 06th, 2007
pardon some russian language in the code provided above
‘RATING_NO_GUESTS’ => ($rating_no_guests)?’...‘:’’,
send notification that
‘RATING_NO_GUESTS’ => ($rating_no_guests)?’Voting available for registered users only‘:’’,
February 06th, 2007
Someting happened with the text I entered above: once again
In template I entered code:
(sorry, this has been deleted - ryan)
February 08th, 2007
How modify this script, that after give a raiting script open next picture?!
Example:
http://www.hotornot.com/
Section:
select a rating to see the next picture.
February 16th, 2007
Hi could anyone help me set this up in Expression Engine.
Any help would be very appreciated.
Thanks
February 19th, 2007
Hi,
good work. I just changed your script a bit and fixed few bugs. Check it out on http://www.designfest.eu
February 19th, 2007
Hey all. Just found this rating bar and think it is great.
I have seen a couple questions and only one type of answer to keep bots/cheaters from voting over and over.
The bots part is easy if the bot follows the rules (not all do) ...
Add rel="nofollow" to your voting links in _drawrating.php
But, cheaters can copy the link and keep putting it into their browser (or call it from a script) and keep voting. We need to make sure that the referer is our host…
At the top of db.php and rpc.php, add:
if ($_SERVER["HTTP_REFERER"] != ‘http://’ . $_SERVER["HTTP_HOST"] . ‘/’ &&
$_SERVER["HTTP_REFERER"] != ‘http://’ . $_SERVER["HTTP_HOST"] . ‘/index.php’)
exit("Are you trying to cheat?This can only be called directly from the voting page");
That puts up a page with a cheater message. Or, you can just redirect them to your main page by replacing the exit line with:
header(’Location: http://’ . $_SERVER["HTTP_HOST"]);
February 21st, 2007
In the .ratingblock class on the css:
Why is the with set to 50%?
Whats the reason for that?
If I change that with, all kind of weird things start to happend.
February 21st, 2007
its great but the problem is u have to enter the first value in the database then it works.
i have spend a lot of time on it but at last i find the soulution
February 23rd, 2007
HI!
Sorry for my English ;)
I’m experiencing problem with MS IE 6.0
Reading your comments I couldn’t find solution.
Demo site is http://proxygen.kiev.ua/
Be kind, help me;) I need masters’ help:)
Thanks in advance.
Regards, ZeFiR.
February 23rd, 2007
how do you auto add IDs to the DB?...nothing is working for me..please help!
February 24th, 2007
the rating bar is working for mediawiki 1.8.2 and higher:
see http://www.leerwiki.nl
February 28th, 2007
Hi Ryan, Thanks a lot for this great script.. Keep it up, man.
Needed quite a bit of tweaking with the urls, but ultimately got it to work.
March 03rd, 2007
does anybody have any idea what could be stopng the ajax from working on my site? the install is working fine and works perfectly on my test page http://www.scitalks.com/testindex.php however when i use the same code in the actual site it reverts to doing a page refresh http://www.scitalks.com/indexJG.php does anybody have any idea what could be stoping the javascript both index files are in the same level of the same directory and include the javascript in the same way. Please help!!?!!
March 03rd, 2007
With more research and a post jinron in another forum i have discovered that it was the onload fuction of the body tag that kills the ajax part of this rating system. not a huge deal as i was just preloading images so i used css instead but just wondering if anyone else has come acrost a solution for this problem. it doesnt matter what code i put in the onload it breaks the ratings so it has nothing to do with the function i was calling
March 03rd, 2007
I can’t figure out why the rater is just displaying text here:
http://juicewire.net/public/view/49
And shows the stars on this page:
http://juicewire.net/public/view/full/49
Both use the same install…
I don’t know what could possibly be causing a conflict.
March 03rd, 2007
I got it working nevermind. I have another quick question. Is there an easy way to have multiple sizes of the stars for different pages without having multiple installs?