Wednesday, July 18, 2007

Adding application ratings to Facebook Applications

I have a few Facebook applications which have a modest number of users (Easter Egg, Four Secrets, One Lie and My Days) and it started to annoy me that Facebook does not have a way for users to rate applications.

Well, now they do.

A Free Service


I've put together a little service that allows any Facebook application developer to have their app rated by users and display the rating on their application's About Page. To see how this works take a look at the About Page for My Days. At the bottom there's a section where the current application rating is shown, and the user is given the chance to vote on the app.

All the voting takes place on my server, and I've managed to create HTML that the About Page will accept that dynamically updates the voting as people vote.

Adding rating to an application's About Page


If you have a Facebook application and want to have voting on your app., then simply add the follow HTML to the app. About Page text at the bottom:

<hr>
Rating: <div style="height: 16px; width: 85px; background-image: url(http://l8tr.org/ratings/rating.php); background-repeat: no-repeat"></div>
Rate this app: <a href="http://l8tr.org/ratings/rate.php?r=1">1 star</a>, <a href="http://l8tr.org/ratings/rate.php?r=2">2 stars</a>, <a href="http://l8tr.org/ratings/rate.php?r=3">3 stars</a>, <a href="http://l8tr.org/ratings/rate.php?r=4">4 stars</a>, <a href="http://l8tr.org/ratings/rate.php?r=5">5 stars</a>

Here's what that looks like when the About Page is shown:



Adding rating to an application's Canvas Page


To add app rating to the Canvas Page of your application (so that users can rate from within the app) you add the following HTML:

<hr />
Rating: <div style="height: 16px; width: 85px; background-image: url(http://l8tr.org/ratings/rating.php?app_id=YOUR_APP_ID); background-repeat: no-repeat"></div>
Rate this app: <a href="http://l8tr.org/ratings/rate.php?r=1&app_id=YOUR_APP_ID">1 star</a>, <a href="http://l8tr.org/ratings/rate.php?r=21&app_id=YOUR_APP_ID">2 stars</a>, <a href="http://l8tr.org/ratings/rate.php?r=31&app_id=YOUR_APP_ID">3 stars</a>, <a href="http://l8tr.org/ratings/rate.php?r=41&app_id=YOUR_APP_ID">4 stars</a>, <a href="http://l8tr.org/ratings/rate.php?r=51&app_id=YOUR_APP_ID">5 stars</a>

Replacing YOUR_APP_ID with the application ID (i.e. the number on the app's About Page) of your application.

View the top applications


Anyone can view the top applications by clicking this link.

Warning to fraudsters


A note for fraudsters: behind the scenes I'm monitoring how the voting is taking place and where the links are coming from, even how they were inserted. Don't mess with this, or risk having your application blacklisted. It would be a pity if trying to game the system resulted in your application's rating disappearing completely :-)

4 comments:

Timos said...

I like the idea - but it would be better if you could just roll over the stars to set the rating - kinda like in netflix. I do not want to waste space with the text.

John Graham-Cumming said...

Timos, I agree, but Facebook severely restricts the permitted HTML on that page making it very hard (I think impossible) to do the sort of styling you are thinking of.

John.

Zach Allia said...

make it a fb app.. so users can look at the results easier

John Graham-Cumming said...

Zach,

Good idea, I'll do that.

John.