The Fivestar voting plugin adds a clean, attractive voting widget to views in Elgg. Fivestar is built using the jQuery Star Rating widget.
Features:
Planned features:
Screenshots -
Blog:
Tidypic photo:
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.
Update 1.0.2:
Update 1.0.1b:
View Billy Gunn's plugins
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by Raül Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.
Hi Billy thanks for the new release. I have loaded it and it all works fine.
Just a few questions.
I can see the views configuation interface has changed-very nice. What other changes have you implemented?
With the 'add view' facility, can one add fivestar to users profile picture for example?
thanks again :)
Dave
@sleepmonsta
Besides making the views a little more manageable, the voting wiget is viewable but disabled for anonymous users and for users who have already voted (if site admins dont allow users to change their votes).
You can add fivestar to most anything but it takes a little trial and error to figure out what the view is called that you want to add too. Where you want the widget displayed will be up to you however a view config that will add fivestar under the user profile picture on the users profile page could look something like this:
view=profile/userdetails, tag=div, attribute=id, attribute_value=profile_icon_wrapper, before_html=<br />
So go to Fivestar settings, click Add View, copy/paste the view I posted here and click save. If you want some help positioning the widget in a different spot try to be clear on where you want it and I will come up with a config.
~Billy
Hi Billy, Ive added the view config as above and the positioning is perfect; just underneath the profile pic.
Many thanks for this, it's exactly what I've been looking for!
Thanks again :)
Dave
I must be doing something wrong. I still don't see the stars. But I see the text for the vote result.
@Spacetraveler
Are you on elgg 1.5 or are you running the fbconnect plugin? I suspect you are on an older version of jquery that is not supported by fivestar.
Excellent Dave. I am glad that is what you were looking for.
Cheers,
Billy
@Divagater I am on Elgg 1.6 and is not using FBconnect. It could be my Jquery version.
Thanks.
Do a view source on your site and look for the script tags near the top that reference jquery. Post them here.
This is what I found <script type="text/javascript" src="http://soksabai.com/vendors/jquery/jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="http://soksabai.com/vendors/jquery/jquery-ui-personalized-1.5.3.packed.js"></script> <script type="text/javascript" src="http://soksabai.com/_css/js.php?lastcache=1254016871&js=initialise_elgg&viewtype=default"></script> <!-- include the default css file --> <link rel="stylesheet" href="http://soksabai.com/_css/css.css?lastcache=1254016871&viewtype=default" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://soksabai.com/mod/poll/everyone.php?view=rss" /> <link rel="alternate" type="application/odd+xml" title="OpenDD" href="http://soksabai.com/mod/poll/everyone.php?view=opendd" /> <link rel="meta" type="application/rdf+xml" title="FOAF" href="http://soksabai.com/mod/poll/everyone.php?view=foaf" /> <script type="text/javascript" src="http://soksabai.com/mod/chat/chat.js"></script> <link rel='stylesheet' href='http://soksabai.com/mod/elggchat/views/default/elggchat/css.php' type='text/css' /><script type='text/javascript' src='http://soksabai.com/mod/elggchat/views/default/elggchat/js.php'></script><script type='text/javascript' src='http://soksabai.com/mod/elggchat/js/sound/jquery.sound.js'></script> <script type="text/javascript" src="http://soksabai.com/mod/fivestar/js/ui.stars.js" ></script> <script type="text/javascript"> function fivestar(id, token, ts) { $("#fivestar-form-"+id).children().not("select").hide(); // Create stars for: Rate this $("#fivestar-form-"+id).stars({ cancelShow: 1, cancelValue: 0, captionEl: $("#caption"), callback: function(ui, type, value) { // Disable Stars while AJAX connection is active ui.disable(); // Display message to the user at the begining of request $("#fivestar-messages-"+id).text("Saving ...").stop().css("opacity", 1).fadeIn(30); $.post("http://soksabai.com/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... $("#fivestar-votes-"+id).text(db.votes); $("#fivestar-rating-"+id).text(db.rating); // 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... setTimeout(function(){ $("#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> </head>
@Spacetraveler
Elgg 1.6 defaults to jquery-1.3.2 (jquery-1.3.2.min.js) and jquery-ui-1.7.2 (jquery-ui-1.7.2.custom.min.js). You are using jquery-1.2.6 and jquery-ui-personalized-1.5.3 which means you must have a plugin or something that is overriding page_elements/header.php and setting the older versions of jquery and jquery-ui. On a linux system one way to find what is setting the older jquery is to run this command from the root of your elgg install:
find . | xargs grep jquery-1.2.6
Fivestar requires jquery-1.3.2 and jquery-ui-1.7.2.
Nice to see the activitay around this plugin, it is a great feature. I saw someone used it under the profile picture. The following idea popped up.
If the ranking underneath the profile picture means the ranking of that particular person. Than that ranking should be caculated by the avarage ranking that the particular person got for his files, blogs, etc.
Thats a pretty good idea. Honestly I am not much in favor of voting on people as that feels very survivorish to me. I am in big favor of voting on user contributed content though, so giving users a ranking based on their content sits well with me.
I like my plugins to stick to what they do and not try to code in to much extra. However, an option to display some average rating would be alright. Another idea that comes to mind is a tie in to badges that awards a badge based on an average ranking.
Thanks for the comment and suggestion.
Hi Divagater, this looks excellent. Well done. Quick question: will this work for 1.5 installs?
@Cornelius
Not by default because it does not work with the version of jquery that ships with 1.5. If the 1.5 jquery and jquery-ui could be upgraded to the same as with elgg 1.6 (jquery-1.3.2 & jquery-ui-1.7.2) then it should work.
Cheers,
@Divagater, I just want to say thank you, great plugin, and I've updated the Jquery to this plugin's specification and it works like a charm!
How do I add the voting on this video plugin?
Improved version of video plugin
Thanks.
@divagater
is there going to be any kind of option for anonymous voting in the future? on the site that I'm working on, we would like to allow anonymous voting but haven't figured out how to hack that in to your framework (which we really like).
we were considering somthing like randomizing the user that the vote is associated with, but that didn't seem to fly. do you have any suggestions?
thanks.
@zenkalia
The main issue with anonymous voting is vote spam. If users can vote anonymously then they can vote over and over again. Enabling anonymous voting isn't too difficult but would require a little code change to deal with the vote when a user->guid is not available.
Some ways to prevent multiple votes are to allow 1 vote per IP. That is a poor solution as a lot of people are behind proxies. Another is to set a cookie. Effective but easily defeated. Or yet maybe some site admins wouldn't care about multiple votes being cast. Thoughts?
In my group discussion thread, how come I'm getting no stars and then radio buttons on the responses?
Any suggestions?
Thanks.
@Spacetraveler
I will message you an email address. Please do a view source on group discussion thread where you see no stars and then do one where you see radio buttons. Zip both those files and email to me. Name them so that it is clear which is which.
@Spacetraveler
Ok I see the problem. Replies on group topics are also a topic and they cary they same entity guid as the original topic post so then we have a bunch of fivestar forms with the same form ID... not good. I will put up a patch as soon as I can. For now you may want to remove the forum/topicposts view config from fvestar settings.
All the replies on a group topic are annotations. I didn't realize that. At the moment fivestar does not support voting on annotations because the votes are annotations and I don't think ya can annotate an annotation ;)
Just delete the forum/topicposts view from fivestar settings like a mentioned in the last post. The code to prevent adding fivestar to an annotation will be in the next release. Anyone wanting the patch now can edit mod/fivestar/start.php and remove these 3 lines starting on line 89:
if (!$guid) {
$guid = $params['vars']['entity']->entity_guid;
}
Just delete those lines and thats it. No more fivestar widget on annotations.
Cheers,
When i said bookmark, i mean the system Elgg's comes with! it would be great if we can rate and list the most rated links in the bookmark.
@Divagater Thanks that helps.
@io
Here is a view config that should work with bookmarks.
view=object/bookmarks, tag=div, attribute=class, attribute_value=search_listing, before_html=<br />
~Billy