« Ajax Rating Plugin to Rate Entries and More | Main | Comment Thresholds in Movable Type »

Customizing Ratings - Ajax Rating Advanced Features

In this article I will cover some of the more advanced features of the Ajax Rating plugin. Ajax Rating is rating plugin for Movable Type that makes it easy for readers to rate entries, comments, and more. If you haven't read about Ajax Rating yet, you should read this first, and then come back to read this article afterwards.

Covered in this article:

Custom images for star and thumb raters
Using custom raters
Dynamically updating numeric ratings and vote counts
Setting up comment raters
Rating non-MT objects

Custom images for star and thumb raters

Whether you are using Ajax Rating or Ajax Rating Pro, you can use alternative images for rating items. For star/point raters, the image must be named "starrating.gif". The image should be a "three state" image. For example, here is the default image that comes with Ajax Rating (design credit to Ryan Masuga):

Note that the image has 3 stars, appearing one on top of the other. As such, the height of the image should be 3 times as long as the width. The default image, above, is 30 pixels wide by 90 pixels high. The star at the top is the "empty star", the star in the middle is the "hover star" (the color of the star when you hover your mouse over it), and the bottom star is the "current rating star". Of course, the images don't have to be "stars" at all -- you could use images of hearts, checkmarks, boxes, or bananas. As an example, Ajax Rating comes with an alternative star image called 'starrating16x16.gif' that looks like this:

Note that this image is 16 pixels wide and (16 times 3 equals) 48 pixels high. if you want to use this image, you can rename it 'starrating.gif'.

After you have the image you want, make sure it is named starrating.gif and then upload into the /mt-static/plugins/AjaxRating/images/ directory on your server.

The final (but important) step is to browse to the Ajax Rating settings for your blog and enter the width on your new image into the "Star Icon Width" field. Save your settings and then rebuild the Ajax Rating javascript and styles index templates. Finally rebuild all your pages with star raters.

To use custom image with Thumb Raters (Pro feature), the process is much easier. The only rule is that you have to name your images "up.gif" (+1 point) and "down.gif" (-1 point). You make them any size that suits your needs. Upload the new images to the /mt-static/plugins/AjaxRating/images/ directory and you are done (no need to rebuild any pages).

Creating Custom Raters

The previous section explains how to customize the look of the raters that appear when you use the convenient <MTAjaxStarRater> and <MTAjaxThumbRater> tags. You are not limited to those raters, however. You can create your own custom raters.

For example, here is a simple rater that consists of a "Vote For This Entry!" text link:

<a href="#" onclick="<$MTAjaxRaterOnclickJS points="1" type="entry"$>">Vote For This Entry!</a>

The above example illustrates the key elements of rating link. Set the href equal to "#" and include an onclick= argument. The special MTAjaxRaterOnclickJS tag helps you fill the javascript required to capture the vote. They key argument here is the "points" argument -- use this to specify how many points get assigned when someone clicks that link.

To expand the above example, here is a 5 point rater using text links instead of images:

<a href="#" onclick="<$MTAjaxRaterOnclickJS points="1" type="entry"$>">1</a> <a href="#" onclick="<$MTAjaxRaterOnclickJS points="2" type="entry"$>">2</a> <a href="#" onclick="<$MTAjaxRaterOnclickJS points="3" type="entry"$>">3</a> <a href="#" onclick="<$MTAjaxRaterOnclickJS points="4" type="entry"$>">4</a> <a href="#" onclick="<$MTAjaxRaterOnclickJS points="5" type="entry"$>">5</a>

Tip: if you want your customer rater to disappear after a vote, surround in a div or span element with an "id" in the following format "thumb{type}{id}", replacing {type} and {id} with the type and id of the object being rated. For example:

<span id="thumbentry105"> ...rater goes here </span>

Dynamically updating numeric ratings and vote counts

Often you will want to display numeric representations of ratings and vote counts on your pages. Consider the following example, which shows box a star rating and the average rating and vote count:

  • Currently 3.7/5
  • 1
  • 2
  • 3
  • 4
  • 5

Rating: 3.7/5 (303 votes cast)

Notice when you make a rating with the above rater, the average rating and vote count numbers get updated dynamically. The trick to doing that is to surround those numbers in "span" tags. Here the template code for the above example:

<$MTAjaxStarRater type="entry"$>
Rating: <strong><span id="ajaxrating_entry_<$MTEntryID$>_avg"><$MTAjaxRatingAverageScore type="entry"$></span></strong>/<$MTAjaxRatingEntryMax$> (<span id="ajaxrating_entry_<$MTEntryID$>_cnt"><$MTAjaxRatingVoteCount type="entry"$></span> votes cast)

First looking at MTAjaxRatingAverageScore, the "id" of the span must be in the format id="ajaxrating_{type}_{id}_avg". For an entry with an id of 105, that would be id="ajaxrating_entry_105_avg". Using MT template tags in this example, you can do it as follows:

<span id="ajaxrating_entry_<$MTEntryID$>_avg"><$MTAjaxRatingAverageScore type="entry"$></span>

For MTAjaxratingVoteCount, the process is the same, but the id ends in "_cnt" instead of "_avg". So the template code becomes:

<span id="ajaxrating_entry_<$MTEntryID$>_cnt"><$MTAjaxRatingVoteCount type="entry"$></span>

If you wanted to dynamically update MTAjaxRatingTotalScore (not shown in above example), the id should end in "_ttl":

<span id="ajaxrating_entry_<$MTEntryID$>_ttl"><$MTAjaxRatingTotalScore type="entry"$></span>

Setting up comment raters

With Ajax Rating Pro you can rate comments and other objects. Setting up comment raters is similar to entry raters. While you can use star raters or thumb raters, many people will prefer to thumb raters for rating comments, so my example will focus on these.

To add a thumb comment rater, place the following in suitable place in a <MTComments> container:

<MTAjaxThumbRater type="comment">

(Optionally, you could include a report_icon="1" argument to display a third button, that will enable readers to report comments to entry authors)

Rating non-MT objects

With Ajax Rating Pro, you can even create raters for non-MT objects. For example, suppose I have five photos in my sidebar, and I want people to be able to rate them. The rules for rating non-MT objects are as follows:

  • choose a unique "type" of object (don't use the reserved names like 'entry', 'comment', etc.)
  • create a unique numeric id for each specific object you want to rate.

In the sidebar photo example, let's choose the type "sidebarphoto" and give each photo a numberic id from 1 to 5. For the first photo, I would use the following code to display a star rater:

<$MTAjaxStarRater type="sidebarphoto" id="1" max_points="5"$>

...and the second photo would be:

<$MTAjaxStarRater type="sidebarphoto" id="2" max_points="5"$>

... and so on.

Also note that the discussion above about dynamically updating ratings and vote counts also applies to non MT objects -- just be sure to use your chose "type" and "id" values in the span ids.


The features above are just a few advanced ways to use Ajax Rating. To get Ajax Rating, or to learn more, click here.

Look forward to the next article (soon) on Ajax Rating: Setting Comment Threshold Viewing.

Rate this entry:

  • Currently 3.7/5
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 3.7/5 (303 votes cast). Powered by the Ajax Rating plugin.

TrackBack

TrackBack URL for this entry:

Comments (43)

Hi there Mark,

Well done with the rating plug-in, I've been tearing my hair out trying to make something like my blog.

Is there any way to get the rating to feed back to the posting order - the higher rate an item gets the closer to the top of the list it moves?

I've been trying a few things with tag but no luck yet.

Any ideas?

MB

Hi Matthew,

The "Pro" version of Ajax Rating has this feature. For example, you can use the <MTAjaxRatingEntries> tag to list entries ranked by average rating, total score, or number of votes.

:lol: :lol: really cool

Noah McCollam [TypeKey Profile Page]:

we just recently purchased the pro version but can't see any good examples of using the <MTAjaxRatingEntries> tag. Can you post an example or two?

Hi Noah,

The <MTAjaxRatingEntries> works the same same as <MTEntries. As such, here are some examples.

Example: Display a list of the top 5 rated entries, sorted by average score:

<ol>
<MTAjaxRatingEntries sort_by="average" show_n="5">
<li><a href="<$MTEntryLink$>"><$MTEntryTitle><\a></li>
</MTAjaxRatingEntries>
</ol>

Example: Display a list of 10 "hot" (recently popular) entries, sorted based on number of votes:

<ol>
<MTAjaxRatingEntries sort_by="votes" show_n="10" hot="1">
<li><a href="<$MTEntryLink$>"><$MTEntryTitle><\a></li>
</MTAjaxRatingEntries>
</ol>

Note that you can use any standard MTEntry tags within MTAjaxRatingEntries.

Another example would be to create a page that looks very similar to typical blog home page, but instead of the most recent entries, you would display the most popular entries. One way to do this would to copy and past your "Main Index" template into a new index, and then replace MTEntries with MTAjaxRatingEntries.

I hope these examples give you some ideas. Please let me know if you have any questions, or if you would like more examples.

We're running the full compliment of the Pro version at Wizbang Politics and everything but the comment ratings at Wizbang Blue. Check the "Hot" menu item at the top for listings of the top rated stories. That's just a different index template with the MTAjaxRatingsEntries tags instead of the MTEntries tags.

We'll be doing more advanced work with the ratings in the very near future...

Sean F:

I am having a problem with the stars showing up the right of the article in Safari and Firefox. They are all outta wack. Anybody know what's happening?

Sean, can you be more specific -- what do you mean "up the right of the article"? Can you post a link to page with a rater?

Sean F [TypeKey Profile Page]:

It's actually on an internal server so you can't view it.

I'm guessing it might be because the plugin is nested within a div in our template. Perhaps taking it out and reformating the mt template with no div's would work.

Basically, the problem is the star icons do not display in the correct locatin in Firfox and Safari. They are pushed from their intended location of beneath the article to a right side-bar on the site.

Sean, again you haven't given me enough information to be very helpful, but it sounds like you may be on the right track with the nested divs thing. Note that the starrater itself is contained in its own div -- take a look at the HTML source of this page to see the format it takes. You may need to take this into consideration when styling your pages to get the layout and positioning you want.

Lance Arthur:

I'm experiencing a problem using the MTAjaxRatingEntries sort_order="ascend" instruction.

The results page turns up empty. sort_order="descend" (top rated to lowest rated) works as advertised, but replacing 'descend' with 'ascend' - no such luck. Is this a bug? I'm using the following code:

This is the 'descending' test page:
http://www.lancearthur.com/clients/CCA/archives_rating.html

And the 'ascending' test page:
http://www.lancearthur.com/clients/CCA/archives_rating-a.html

Help!

Thanks!

Hi Lance,

Yes, it's a bug. I have just fixed it in a new version.

Please contact me and let me know who is licensee for the copy of Ajax Rating Pro that are working with, so I know where to send the new version.

Thanks for finding this bug! No one has mentioned this one yet, I guess few people are doing "lowest ranked" lists. ;)

Lance Arthur:

Hi, Mark,

Thanks for the quick fix on the other matter - I have, I guess, a feature request. Is it possible to sort the Rated results more than simply showing all rated results? What we want to do is show ratings by entry by category, because we're asking visitors to rate resources rather than posts. So within a resource category, we'd like to show what books, for example, were rated highest vs. what schools or what organizations, etc.

Lance this is a good feature request for Ajax Rating Pro.

Just to make sure I understand, using MT terminology, this feature would enable you to "list the top ranked Entries from the 'DVDs' category"? In future, a category= filter could be added to the MTAjaxRatingEntries tag and support could be added to automatically respect category context when the tag is used in a Category Archive template.

Carlo [TypeKey Profile Page]:

I have a problem installing it on MT4.0. Once it creates the tables and all, it shows me an error when trying to create the templates. Does anyone else have this issue?

Following your instructions, I have installed the plugin in my educational blog (MT 3.34 on Yahoo server) and it appears fine.
I have inserted the tags in the body and the links in the head in the main and in the individual index.
It registers the vote and publishes the thanks text, but it doesn't store the data.
Uploading from the main page the individual entry and vice versa, no vote are reported.
Can you help me?
Thank you in advance an regards
Lucio

lucius, it sounds like you may have your MT and your blog on different domains or subdomains -- this can sometimes cause browsers' security features to disallow "cross-site scripting". If an AJAX call is made to a domain other than the same one as the page, some browsers will disallow it as a security issue. Are you seeing any javascript errors to that effect (On firefox, I find that I have to open the Tools>Error console to see these errors).

One approach, that I prefer, is to setup apache such that all requests to /cgi-bin/ point to the same directory, regardless of what virtual domain you are using. I have this in my apache2 config:

ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"

This is actually the default on my Rackspace dedicated server.

The benefit is that now:

http://www.domain1.com/cgi-bin/mt/mt.cgi
http://sub.domain1.com/cgi-bin/mt/mt.cgi
http://www.domain2.com/cgi-bin/mt/mt.cgi

..all point to the same MT install and "just works". In addition to
avoiding cross-domain scripting limits, it also lets to post comments,
trackbacks using the Blog URL, and display mt-search.cgi results using
the blog domain, etc.

First of all, thank you for your kind answer.
I can't control neither the .htaccess file nor the alias setting in the httpd.conf: Yahoo hosting service has some advantages in terms of reliability, but serious limits with respect to the general configuration.
The Firefox console doesn't contain a JavaScript error referring to the plugin.
So I have tried a new fresh installation with MT4 and no subdomain.
You can see it here
The problem is continuing.
Perhaps an error in my templates?
Or the option "rebuild after a vote" set to "no rebuilds"?
Or the db stores of the votes?
What do you think about?
Best regards
Lucio

Carlo [TypeKey Profile Page]:

I have the same exact issue. My MT installation is at http://backend.mysite.com (no need for cgi-bin folder) and my blog is at http://mysite.com/gallery/

I do have access to my .htaccess file. Can I do anything with that so I can fix this issue? I have the same deal.. you can vote but then the votes aren't saved.

Every other plugin works without a problem so maybe there's a quick fix for this small issue. Something that wouldn't break any other cgi stuff MT uses on my templates.

Carlo [TypeKey Profile Page]:

I tried a movabletype installation and a blog in the same domain, and it didn't work that way either.

Carlo [TypeKey Profile Page]:

Does AjaxRating rely on any variables the custom MT templates create? I have custom templates will it work too?

Carlo [TypeKey Profile Page]:

In the end I decided to move my movabletype installation to a folder in the same domain. Now it works. Now.. do you have plans to make this plugin work with dynamic publishing? I know everyone would love that feature.

Anyway.. awesome plugin! Thanks for the hard work!

Carlo,

I am glad you got it working.

Ajax Rating has supported dynamic publishing from day 1. It just works.

Carlo [TypeKey Profile Page]:

Hmmm, I kept getting smarty errors when using AjaxRating in my dynamic templates.. so I thought it didn't support dynamic templates. Anyway, I installed version 1.1 and it works, but when I try to install the templates I get this error: Loading template 'HASH(0x9a7d1c4)' failed.

Carlo [TypeKey Profile Page]:

Ok, the templates are installed but once I open the page the stars don't appear unless i hover over them and it isn't saving votes.

Carlo [TypeKey Profile Page]:

A small update: I tried making the templates static and the empty stars do appear now, but still it won't save the votes.

Carlo [TypeKey Profile Page]:

Update: after trying to work around all of the problems I discovered something. When I uploaded the new files it didn't upgrade the database tables (so that was the issue with it not saving votes, I don't know why that was an issue.. but when I executed the SQL query manually from PHP My Admin the problem was solved).
The issue with the empty stars not appearing still persists. You can view the problem here: http://www.teoriaunderground.com/bandas/62/
The stars won't appear unless you mouse-over them :S it's very wierd cuase they do appear if I make my templates static. :S

carlo, the tables should be installed automatically.

Is your MT4 install a "fresh" one, or did you upgrade from a 3.3x version of MT? If it is an upgraded install, did you have Ajax rating installed before upgrading to MT4?

Any other details about your install would help (version of MT, perl, mysql, etc.)

I am looking into the star issue on with dynamic publishing...

Carlo [TypeKey Profile Page]:

I had a fresh install of MT4.01 beta 2. Anyway, I've been looking into the issue and I doubt it was an issue with the ajax rating plugin right now. I'm beginning to think it was a problem with my database, cuase I installed an extra version just to test out plugins and the tables were in fact created automatically. So I guess that rules out any bug with your plugin.

The only issue is the star display for dynamic publishing.. other than that everything is working great! Amazing plugin Mark! I wish I could get the pro version.. but i don't have that kinda of money.. hehe. Thanks for the reply!

Carlo, thanks for your help here. Both the dynamic issue and the database thing were bugs in the plugin, which I have now fixed in version 1.11. You can use the same download link, it now points to the updated version.

Carlo [TypeKey Profile Page]:

Ah great Mark! I really appreciate the hard work you do for putting out this great plugin. This is a must on my blogs! Awesome work!

Hi Mark,
after the last update the plugin works fine.
Thank you very much
lucius

Carlo [TypeKey Profile Page]:

Mark, is there someway to not use the and actually manually insert the code it produces. I like to keep my template code clean, but once MT actually outputs my pages the code generated there isn't aligned and all. I know it's meaningless... but I always like to keep my code clean and ordered :p

Anonymous:

Ok.. the code snippet didn't render. This is what I meant I want to not use:

Anonymous:

MT AjaxStarRater type="entry"

jEFF:

Mr. Carey,

I installed the ajax rating v1.1 plugin on an MT 4.0 blog and have had troubles with persistance of the vote count. (refresh, back to 0)

It turns out that the Windows 2003 shared ASP.NET server plan, hosting my site did not support AJAX - duh.

I can move my site to another plan that includes AJAX, however, support personnel are asking if I need their standard "medium trust environment" or if the component requires a "full trust" server.

Recommendations?
TIA.

dram [TypeKey Profile Page]:

That's good job! GREAT!

QuiQue [TypeKey Profile Page]:

Hi Mark!
Thanks for the great work with your plugins, I just got AjaxRating running on my MT4 Blog and I have the same problem as Carlo above, the votes don't get stored when I refresh the page.

In my server the cgi-bin folder is not inside the root folder called httpdocs. Should I just drag and drop the cgi-bin folder there?

I also translated the rater into spanish but I'm still missing one thing, the "Thanks for voting!". I just can't find it.

I apreciate your help!

Randy [TypeKey Profile Page]:

Hi Mark!

Add my praise to the list of folks for your work on this plugin. But I'm having the same issues that Carlos and QuiQue are noting. Once the page is refreshed or republished, the votes are reset to zero.

I'm running MT4.1 (fresh install at 4.0, and upgraded to 4.01, 4.01a, then 4.1) on a hosted Linux server from 1&1. I'm not running the blog in the root folder of the hosting, but in a folder called "/mt" under the root. PERL version is 5.6.1. MySQL version 5.0. Apache is version 1.33.3 under cgiwrap or suexec (mt-check.cgi wasn't sure which). Have confirmed with 1&1 that my hosting package DOES include AJAX support.

Another interesting issue is that when I load the blog in FF2, I'll get the pop-up saying I've already voted on a particular post, but that's not happening in IE7 (yes I have pop-ups allowed for the blog site in IE7). But the votes aren't appearing on page refresh either in FF2 either.

Any ideas (other than what you've posted here already) on what could be going on. Email me if you need anymore information or have questions about my set up. I REALLY would like to get this plugin working since it's the ONLY ratings plugin that even tries to work under MT4.1!!!

Randy [TypeKey Profile Page]:

Sorry, forgot a couple of things...

Plugin version is 1.16 (Basic), and the settings are at default (Star/Point Rating, 5, 30, No Rebuilds). Have tried other settings for "Rebuild After a Vote" and that has no affect on vote retention after a page refresh or replublish.

Randy [TypeKey Profile Page]:

Okay, something strange just happened. I went and changed the "Rebuild After a Vote" to "Rebuild Indexes Only", then saved the changes, did a full republish (I don't use any dynamic templating) and then voted on a couple of my posts then refreshed the page. THE VOTE COUNT REMAINED. So it looks like I solved my own problem.

Anonymous:

Hi, Mark --

I can't tell for sure from the documentation, but using the Pro version, is it possible to rate both a post and comments on that post?

dug [TypeKey Profile Page]:

Hi Mark,

Great plugin indeed :-)

I've only just installed and haven't really had the time to shake it out yet, but i can sense a problem around the corner:

My sites tend to use a fair amount of jQuery scripts (see jquery.com) and word on the lists is that prototype and mootools don't play nice with jQuery.

I haven't looked at what the js is doing but what would it take to get a set of jQuery scripts for this plugin?

Post a comment

Gift idea: Buy Seinfeld DVD box set, complete 9 seasons!