Release Notes


The Fivestar voting plugin adds a clean, attractive voting widget to views in Elgg. Fivestar is built using the jQuery Star Rating widget.



  • jQuery rollover effects and AJAX no-reload voting.
  • Graceful degradation to an HTML rating form when JavaScript is turned off.
  • Configurable options to allow users to cancel or change their votes.
  • Insert the fivestar widget into any view via configuration options (requires an understanding of Elgg views and html)

Planned features:

  • Configurable star sets.
  • Easier view configuration.
  • Userpoints integration.


Screenshots -


Blog Post


Tidypic photo:

Fivestar tidypic



Fivestar polls


Adding to views:

Adding or removing the widget from your views is done via the Fivestar settings. The text box under 'Add fivestar to a view:' is used to add 1 view per line. The configuration can be complicated and requires an understanding of Elgg views and html. Firebug can be a big help.


The widget is inserted by intercepting the html that is about to be displayed to the user. The html is then parsed using a dom library and the widget is inserted into the specified div, span etc. A handful of view configurations are included by default. To remove the widget from a view just delete the appropriate line in the config.


A sample line in the config looks like:


view=object/blog, tag=div, attribute=class, attribute_value=contentWrapper singleview, before_html=<br />


This a comma delimited list of key/values and breaks down as follows.

  • view: The Elgg view that we want to insert the widget in.
  • tag: The tag we want to insert into. This can be a div, span, etc.
  • attribute: This will usually be id or class and helps to further identify the correct tag.
  • attribute_value: The value of the id or class specified by the attribute.
  • before_html: Additional html that is added before the widget for styling.
  • after_html: Additional html that is added after the widget for styling.



Update 1.0.2:

  • Updated Fivestar to prevent anonymous voting. Anonymous users can see the current rating but they will not be able to vote.
  • Updated Fivestar settings page to make managing views a little easier.
  • When changing votes is not permitted, users who have voted will not be able to interact with the fivestar widget. Previously they could submit a vote and then get a message back saying they cannot vote again. Now they will not be able to submit a vote.


Update 1.0.1b:

  • Fixes a bug with the default view settings that prevented users from seeing the fivestar widget on any view.


  • hi i have used this plugin in Elgg 1.5 it is not working.

    Note : i have installed the lateset jquery files.then also it is not working.

    anybody know the reason?

  • Could you elaborate a little more on the not working part? What do you see, what don't you see etc.

  • For Example, I have enable this in my pages section.

    have set this like

    view=pages/pageprofile, tag=div, attribute=class, attribute_value=contentWrapper, before_html=<br />

    i am able to view fivestar()  js function in my page
    but not able to view the rating star section.

    I got the following lines in elgg1.6 but not in elgg 1.5 .

     <div class="fivestar-ratings-50">
            <form id="fivestar-form-50" style="width: 200px" action="" method="post">
                                                    <input type="radio" name="rate_avg"   value="20" />
                                                                        <input type="radio" name="rate_avg"   value="40" />
                                                                        <input type="radio" name="rate_avg" checked="checked"  value="60" />
                                                                        <input type="radio" name="rate_avg"   value="80" />
                                                                        <input type="radio" name="rate_avg"   value="100" />

                                                    <input type="submit" value="Rate it!" />

            <br />
                <span id="fivestar-rating-50">3</span>/5 stars (<span id="fivestar-votes-50">1</span> votes)

        <script type="text/javascript">
                fivestar(50, '532fca7eb4a47e693b25e59000758b05', '1254550286')


    Please guide me.



  • ie) i have got js codes but not able to view the rating star section

  • On your elgg 1.5 site do a view source on a page that should have fivestar like blogs and copy the header section (everything between <head> </head>) to a reply here.

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&gt;
    <html xmlns="" xml:lang="en" lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="ElggRelease" content="1.5" />
        <meta name="ElggVersion" content="2009031301" />
        <title>Skouta: Pages home</title>
        <script type="text/javascript" src="elgg/staging/javascript/commonfunctions.js"></script>
        <script type="text/javascript" src="elgg/staging/javascript/formvalidation.js"></script>

    <!--    <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-1.2.6.pack.js"></script>
        <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-ui-personalized-1.5.3.packed.js"></script>-->
         <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery.form.js"></script>
        <script type="text/javascript" src="elgg/staging/_css/js.php/1254485153?js=initialise_elgg&viewtype=default"></script&gt;
        <script src=";v=2.x&amp;key=ABQIAAAA78nZXhgoDHWeDCjCGjCZiBR6yGbX3xNqH3KqEv32bmBbQqzhshSSIeTZhnp6-1Nu2fjFD8ao6qe5_A" type="text/javascript"></script>
    <script type="text/javascript" src="elgg/staging/javascript/pdmarker.js"></script>

    <script type="text/javascript">
    window.onload = onPageLoad;
    var map;

    var icon = new GIcon();
    icon.image = "";
    icon.shadow = "";
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);

    function onPageLoad() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(49.28124, -123.12035), 17-5);
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            marker = new PdMarker(new GLatLng(49.28124,-123.12035));
            var html = "Visit <a href=''>Pallavakkam, chennai<\/a>";
            if (true) {
                marker2 = new PdMarker(new GLatLng(20.25, -123.10), { title: "title", icon: icon });
                marker2.setTooltip("Another Tooltip");
                var html = "Visit <a href=''>Pixel Development<\/a>";
            document.getElementById("actual").innerHTML = "(actual: " + getGoogleMapsVersion() + ")";

    function getValue(objId) {
        obj = document.getElementById(objId);
        if (obj)
            return obj.value;
            return "";

    function setValue(objId, value) {
        obj = document.getElementById(objId);
        if (obj)
            obj.value = value;

    function clear() {
        <!-- include the default css file -->
        <link rel="stylesheet" href="elgg/staging/_css/css.css?lastcache=1254485153&viewtype=default" type="text/css" />
        <link href="elgg/staging/skoutaCss/skoutaCommon.css" rel="stylesheet" type="text/css" />
        <link href="elgg/staging/skoutaCss/skoutaHome.css" rel="stylesheet" type="text/css" />
        <link href="elgg/staging/skoutaCss/registration.css" rel="stylesheet" type="text/css" />
        <link href="elgg/staging/skoutaCss/ie.css" rel="stylesheet" type="text/css" />
        <link href="elgg/staging/skoutaCss/general.css" rel="stylesheet" type="text/css" />

        <link rel="alternate" type="application/rss+xml" title="RSS" href="elgg/staging/pg/pages/owned/admin?view=rss" />
        <link rel="alternate" type="application/odd+xml" title="OpenDD" href="elgg/staging/pg/pages/owned/admin?view=opendd" />
        <link rel="meta" type="application/rdf+xml" title="FOAF" href="elgg/staging/pg/pages/owned/admin?view=foaf" />   
            <script type="text/javascript">
             jQuery(document).ready(function($) {
            <script type="text/javascript" src="elgg/staging/mod/embed/jquery.form.js"></script>
        <script type="text/javascript" src="elgg/staging/mod/fivestar/js/ui.stars.js" ></script>

        <script type="text/javascript">
            function fivestar(id, token, ts) {

                // Create stars for: Rate this
                    cancelShow: 1,
                    cancelValue: 0,
                    captionEl: $("#caption"),
                    callback: function(ui, type, value)
                        // Disable Stars while AJAX connection is active

                        // Display message to the user at the begining of request
                        $("#fivestar-messages-"+id).text("Saving ...").stop().css("opacity", 1).fadeIn(30);

                        $.post("elgg/staging/action/fivestar/rate", {id: id, vote: value, __elgg_token: token, __elgg_ts: ts}, function(db)
                            // Select stars from "Average rating" control to match the returned average rating value
                            $("#fivestar-form-"+id).stars("select", Math.round(db.rating));

                            // Update other text controls...

                            // Display confirmation message to the user
                            if (db.msg) {
                                $("#fivestar-messages-"+id).text(db.msg).stop().css("opacity", 1).fadeIn(30);
                            } else {
                                $("#fivestar-messages-"+id).text("Rating Saved").stop().css("opacity", 1).fadeIn(30);

                            // Hide confirmation message and enable stars for "Rate this" control, after 2 sec...
                                    $("#fivestar-messages-"+id).fadeOut(1000, function(){ui.enable()})
                            }, 2000);
                        }, "json");

                // Create element to use for confirmation messages
                $('<div class="fivestar-messages" id="fivestar-messages-'+id+'"/>').appendTo("#fivestar-form-"+id);

    <script type="text/javascript" src="elgg/staging/mod/custom_index/views/default/canvas/layouts/tabcontent.js">

    * Tab Content script v2.2- © Dynamic Drive DHTML code library (
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at for full source code



    <div id="elgg_topbar">

    <div id="elgg_topbar_container_left">
        <div class="toolbarimages">
            <a href="" target="_blank"><img src="elgg/staging/mod/elggbook/graphics/elgg_toolbar_logo.png" /></a>
            <a href="elgg/staging/pg/profile/admin"><img class="user_mini_avatar" src="elgg/staging/mod/elggbook/graphics/user_icons/defaulttopbar.gif"></a>

        <div class="toolbarlinks">
            <a href="elgg/staging/pg/dashboard/" class="pagelinks">Dashboard</a>
    <ul class="topbardropdownmenu">
        <li class="drop"><a href="#" class="menuitemtools">Tools</a>
          <li><a href="elgg/staging/mod/riverdashboard/">Activity</a></li><li><a href="elgg/staging/mod/form/form.php?id=99">Advert Form</a></li><li><a href="elgg/staging/mod/form/form.php?id=3">Blog Form</a></li><li><a href="elgg/staging/pg/blog/admin">Blogs</a></li><li><a href="elgg/staging/pg/bookmarks/admin/items">Bookmarks</a></li><li><a href="elgg/staging/pg/file/admin">Files</a></li><li><a href="elgg/staging/pg/friends/admin">Friends</a></li><li><a href="elgg/staging/pg/groups/world/">Groups</a></li><li><a href="elgg/staging/mod/form/form.php?id=149">It's 5o'clock somewhere</a></li><li><a href="elgg/staging/mod/form/my_forms.php?form_view=all&id=149">List of 5'oclock video's</a></li><li><a href="elgg/staging/mod/form/my_forms.php?form_view=all&id=99">List of Adverts</a></li><li><a href="elgg/staging/mod/form/my_forms.php?form_view=all&id=3">List of Blogs</a></li><li><a href="elgg/staging/mod/members/index.php">Members</a></li><li><a href="elgg/staging/pg/pages/owned/admin">Pages</a></li><li><a href="elgg/staging/mod/thewire/everyone.php">The wire</a></li><li><a href="elgg/staging/pg/form/admin">User content</a></li><li><a href="elgg/staging/mod/form/form.php?id=48">Video Form</a></li><li><a href="elgg/staging/mod/form/my_forms.php?form_view=all&id=48">Video List</a></li>      </ul>


    <script type="text/javascript">
      $(function() {

            <div class="toolbarlinks2">       
        <a href="elgg/staging/pg/messages/admin" class="privatemessages" >&nbsp;</a>
            <a href="elgg/staging/pg/settings/" class="usersettings">Settings</a>
                <a href="elgg/staging/pg/admin/" class="usersettings">Administration</a>


    <div id="elgg_topbar_container_right">
            <a href="elgg/staging/action/logout"><small>Log out</small></a>

    <div id="elgg_topbar_container_search">
    <form id="searchform" action="elgg/staging/search/" method="get">
        <input type="text" size="21" name="tag" value="Search" onclick="if (this.value=='Search') { this.value='' }" class="search_input" />
        <input type="submit" value="Go" class="search_submit_button" />


    </div><!-- /#elgg_topbar -->

    <div class="clearfloat"></div>

     <div class="Outer">
        <div class="outerCenter">
          <div class="Main">

    <!--<div id="page_container">
    <div id="page_wrapper">

    <div id="layout_header">
    <div id="wrapper_header"> -->
        <!-- display the page title
        <h1><a href=""></a></h1>

            <div class="Header">
              <div class="Logo"><img src="elgg/staging/skoutaImages/Logo.jpg" alt="SKOUTA" title="SKOUTA" /></div>
              <div class="hRow">
                <div class="hColProPrf">
                    <li><a href="elgg/staging/action/logout">LOGOUT</a></li>


                  <p>Logged in as <a href="elgg/staging/pg/profile/admin"><strong>admin</strong></a> </p>
                <div class="hCol4">
                    <li><a href="elgg/staging/mod/form/my_forms.php?form_view=mine&id=3">My Blogs </a></li>
                    <li><a href="elgg/staging/mod/form/my_forms.php?form_view=mine&id=48">My Videos</a></li>

                    <li><a href="elgg/staging/pg/profile/admin">My Profile </a></li>
                <div class="hColProR">
                      <li><span class="lpfInbox"><strong>Inbox :</strong></span></li>
                      <li><a href="elgg/staging/mod/messages/send.php"><img src="elgg/staging/skoutaImages/userIcon.gif" alt=" " width="21" height="27" border="0" /></a></li>
                    <li><span class="lpfInboxNos"><a href="#">2</a></span></li>

                    <li><a href="elgg/staging/pg/messages/admin"><img src="elgg/staging/skoutaImages/emailIcon.gif" alt=" " width="23" height="27" border="0" /></a></li>
                    <li><span class="lpfInboxNos"><a href="elgg/staging/pg/messages/admin">0</a></span></li>

              <div class="searchOuter">
                <div class="smainContent">
                  <div class="mainContent">
                    <div class="smcLeft">
                      <div class="searchDetails">
                        <label>Search:</label> <!-- Search Related Block-->
                        <form id="searchform" name="searchform" action="elgg/staging/search/" method="get">
                        <div class="sdKeywords">

                                                   <input type="text" name="tag" value="Enter Keywords" onclick="if (this.value=='Enter Keywords') { this.value='' }"  />
                      <input name="id" id="id" value="" type="hidden"   />
                        <!--<input name="btnLogin" value="Search" type="button" class="sdbtnSearch" />
                        <input name="btnLogin" value="+ Click here for more search filters" type="button" class="sdbtnMSearch" />-->
                        <input name="btnLogin" value="Search" type="button" onclick="javascript:searchvalidate();"  class="sdbtnSearch" />
                        <input name="btnLogin" value="+ Click here for more search filters" type="button" class="sdbtnMSearch" />
                         </form><!-- End of Search Related Block-->

    <!--</div> -->
    <!-- /#wrapper_header -->
    <!--</div> --> <!-- /#layout_header -->

    <!-- main contents -->
    <!-- display any system messages -->

    <!-- canvas -->
    <!--<div id="layout_canvas"> -->

    <!-- left sidebar -->
    <!-- main content -->
    <div id=""> <!--<div id="two_column_left_sidebar_maincontent">-->

    <div id="content_area_user_title"><h2>Pages home</h2></div>
    <div class="contentWrapper pageswelcome"><p>Welcome to this Elgg pages plugin. This feature allows you to create pages on any topic and select who can view them and edit them.</p></div>

        <div> <!-- removed <div class="search_listing"> fro skouta -->
            <div class="search_listing_icon">
                <div class="icon">
    <img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0"   />
    </div>        </div>
            <div class="search_listing_info">

                <p><b><a href="elgg/staging/pg/pages/view/223/">Contact us</a></b></p><p class="owner_timestamp">Last updated 2 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p>        </div>       

        <div> <!-- removed <div class="search_listing"> fro skouta -->
            <div class="search_listing_icon">
                <div class="icon">
    <img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0"   />
    </div>        </div>

            <div class="search_listing_info">
                <p><b><a href="elgg/staging/pg/pages/view/222/">Advertising</a></b></p><p class="owner_timestamp">Last updated 2 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p>        </div>       

        <div> <!-- removed <div class="search_listing"> fro skouta -->
            <div class="search_listing_icon">
                <div class="icon">
    <img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0"   />

    </div>        </div>
            <div class="search_listing_info">
                <p><b><a href="elgg/staging/pg/pages/view/221/">Privacy Policy</a></b></p><p class="owner_timestamp">Last updated 2 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p>        </div>       

        <div> <!-- removed <div class="search_listing"> fro skouta -->
            <div class="search_listing_icon">
                <div class="icon">

    <img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0"   />
    </div>        </div>
            <div class="search_listing_info">
                <p><b><a href="elgg/staging/pg/pages/view/220/">Terms of Use</a></b></p><p class="owner_timestamp">Last updated 2 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p>        </div>       

        <div> <!-- removed <div class="search_listing"> fro skouta -->
            <div class="search_listing_icon">

                <div class="icon">
    <img src="elgg/staging/mod/elggbook/graphics/file_icons/pages.gif" border="0"   />
    </div>        </div>
            <div class="search_listing_info">
                <p><b><a href="elgg/staging/pg/pages/view/217/">It's 5'0clock somewhere</a></b></p><p class="owner_timestamp">Last updated 5 days ago by <a href="elgg/staging/pg/profile/admin">admin</a></p>        </div>       

    </div><!-- /two_column_left_sidebar_maincontent -->

    <!--</div> /#layout_canvas -->

            <!-- spotlight -->
    <!-- footer -->

    <!--<div id="layout_footer"><table width="977" height="80" border="0" align="center" cellpadding="0" cellspacing="0">
          <td width="591" rowspan="2" valign="middle"><div style="color:#FFFFFF;" align="center">Ad place for 468*80 Banner</div></td>
          <td width="386" height="55" align="right">
            <p align="right" class="footer_toolbar_links">
                    </p>      </td>
      <td align="right"><div align="right"><span class="footer_legal_links style1"><small>Free Template Designed by : <a href="" target="_blank">EDESIGNERZ.NET</a></small></span></div></td>
    </div> --><!-- /#layout_footer -->

    <!--<div class="clearfloat"></div>

    </div>--><!-- /#page_wrapper -->
    <!--</div>--><!-- /#page_container -->
    <!-- insert an analytics view to be extended -->
             </div> <!-- Search outer-->

           </div> <!-- Search Main -->
    <div class="footerMain">
          <div class="outerCenter">
            <div class="footer">
              <div class="footerCol1">
                <h4>Copyright Skouta 2009. All Rights Reserved.</h4>
                <ul class="flMenu">
                  <li class="licol-1"><a href="elgg/staging/pg/pages/view/220/">Terms of Use</a></li>

                  <li class="licol-1"><a href="elgg/staging/pg/pages/view/221/">Privacy Policy</a></li>
                                <li class="licol-1"><a href="elgg/staging/pg/profile/admin">Company Profile</a></li>
                                <li class="licol-1"><a href="elgg/staging/pg/pages/view/222/">Advertising</a></li>
                  <li class="licol-1"><a href="elgg/staging/pg/pages/view/223/">Contact us</a></li>
                  <li class="licol-2 licol-first"><a href="elgg/staging//account/register.php?rt=1">Sign Up</a></li>
                                   <li class="licol-2"><a href="elgg/staging/pg/profile/admin">My Account </a></li>

                                   <li class="licol-2"><a href="elgg/staging/account/forgotten_password.php">Retrieve Password</a></li>
              <div class="footerCol2">
                <h4>Share. Create. Explore</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor dapibus nibh. Suspendisse lorem quam lorem ipsum dolor sit amet, sectetur dipiscing elit. Praesent tempor dapibus nibh.</p>

              <div class="footerCol3">
                <form id="searchformfoot" name="searchformfoot" action="elgg/staging/search/" method="get">
                <div class="rCornerFooter">
                                   <input name="tag" type="text" class="footerCol3input" value="Enter Keywords" onclick="if (this.value=='Enter Keywords') { this.value='' }"  />
                <input name="id" id="id" value="" type="hidden"   />

                <!--<input name="btnLogin" value="Search" type="button" onclick="javascript:searchvalidate();"  class="sdbtnSearch" />-->
                  <input name="btnSearch" type="button" value="Search" class="btnSearch" onclick="javascript:searchvalidatefoot();" />
              <div class="footerCol4"><a href="#"><img src="elgg/staging/skoutaImages/siteby.jpg" alt="Site by" width="65" height="22" border="0" /></a></div>



  • Thats a big post. I just wanted the stuff in the <head> section :)  Anyway, if you look at your jquery includes in your head section the problem should jump out at you:


    <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-1.2.6.pack.js">
    <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-ui-personalized-1.5.3.packed.js">
    <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-1.3.2.min.js">
    <script type="text/javascript" src="elgg/staging/vendors/jquery/jquery-ui-1.7.2.custom.min.js">


    You are loading the old version (jquery-1.2.6 & jquery-ui-personalized-1.5.3) and the new version (jquery-1.3.2 & jquery-ui-1.7.2) at the same time. You cant do that.



  • @divagater - I'm wondering if this approach of specifying the exact attributes of an html element for this plugin to parse and then use the DOM model to add it wouldn't be a bottleneck in performance later on when sites gets heavier.

    By all means you should take all the credit for the creative idea of configuring a plugin like that as I haven't seen that before used in plugins here but it isn't really that friendly and it is not as elegant as "simply" editing the view code of some plugin and just displaying it. (like for the photo rating plugin).




  • @liri

    I appreciate the comments. My philosophy is that the plugin should be self contained and not require editing the code of other plugins. If I followed the approach of the other rating plugins then after upgrading elgg I would have to re-edit all the various views. I don't like that approach. Honestly I think the approach I came up with is more elegant :) Regardless, users have a choice and that is a very good thing.


    As far as being a bottlekneck that seems unlikely to me because the widget is only being added to the objects currently displayed. I could see some slow down possible if there were hundreds of entities being displayed on a single page.


    Folks that aren't sure how to come up with a view config on their own usually just ask in the forums and I post it when I have the time and there are a handful of views for most common things already available.



  • @Divagater

    note taken, thanks.
    is it possible then to take the views approach with your plugin? (i.e to call the rating view from another plugin by explicitly calling it from the other plugin's view)



  • hi thanks for your reply. eventhough i have tried like removed old jquery and only inserted newly one.

    still that rating star not shown.Why?


  • @liri

    Check out the latest release. It will allow you to manually insert the widget.



Billy Gunn

Developer @ Arck Interactive


  • Category: Misc
  • License: GNU General Public License (GPL) version 2
  • Updated: 2014-11-17
  • Downloads: 8154
  • Recommendations: 16

Other Projects

View Billy Gunn's plugins