From Facebook Developer Wiki

This page has been locked to prevent editing.

You can view and copy the source of this page:

The other star rating system posted seems to have trouble with certain browsers in FBML 1.1, so I got this to work in all browsers quite nicely. You can check it out in action at: http://apps.facebook.com/nutshotnetwork/ (look for the 5 faces (stars) below the video) {{sample code|http://www.nutshotnetwork.com/images/screenshot.jpg|<nowiki> Here's the code: <form id="rating_form" class="rating_form"> <input type="hidden" name="nutshot" value="<c:out value="${nutshotData.fbEpisodeKey}" />" /> <div id="rating_section" style="position:absolute; left:320px; top:400px;"> <div style="position:absolute; left:0px; top:0px;"> <ul class="star-rating"> <li class="current-rating" style="width:<c:out value='${userPercentage}' />%;">Currently 2.5/5 Stars.</li> <li><a clickrewriteform="rating_form" clickrewriteid="rating_section" clickrewriteurl="<c:out value='${hostedAppUrl}' />/rating.htm?starRating=1" href="#" title="I feel stupider from watching this." class="one-star">1</a></li> <li><a clickrewriteform="rating_form" clickrewriteid="rating_section" clickrewriteurl="<c:out value='${hostedAppUrl}' />/rating.htm?starRating=2" href="#" title="That was just sad." class="two-stars">2</a></li> <li><a clickrewriteform="rating_form" clickrewriteid="rating_section" clickrewriteurl="<c:out value='${hostedAppUrl}' />/rating.htm?starRating=3" href="#" title="Haha that was funny." class="three-stars">3</a></li> <li><a clickrewriteform="rating_form" clickrewriteid="rating_section" clickrewriteurl="<c:out value='${hostedAppUrl}' />/rating.htm?starRating=4" href="#" title="Milk and corn out my nose funny." class="four-stars">4</a></li> <li><a clickrewriteform="rating_form" clickrewriteid="rating_section" clickrewriteurl="<c:out value='${hostedAppUrl}' />/rating.htm?starRating=5" href="#" title="I just wet my pants laughing." class="five-stars">5</a></li> </ul> </div> <div style="position:absolute; left:140px; top:0px; width: 200px"> Average Rating: <c:out value='${averageRating}' /> </div> </div> </form> And the styles (where the magic happens): .star-rating, .star-rating a:hover, .star-rating a:active, .star-rating a:focus, .star-rating .current-rating{ background: url('<c:out value="${hostedImagesUrl}" />/face.gif') left -1000px repeat-x; } .star-rating{ position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; } .star-rating li{ display: inline; } .star-rating a, .star-rating .current-rating{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; } .star-rating a:hover, .star-rating a:active, .star-rating a:focus{ background-position: left bottom; } .star-rating a.one-star{ width:20%; z-index:6; } .star-rating a.two-stars{ width:40%; z-index:5; } .star-rating a.three-stars{ width:60%; z-index:4; } .star-rating a.four-stars{ width:80%; z-index:3; } .star-rating a.five-stars{ width:100%; z-index:2; } .star-rating .current-rating{ z-index:1; background-position: left center; } </nowiki> }} [[category:Code Example]]

• Template:! (protected)
• Template:Sample code
• Template:Screenshotplz

Return to Main Page.