Graddit presents rating widgets for your websites, blogs and comments. There's a number of predefined widgets on this page you can choose from.
Copy and paste generic widget code and corresponding styles into you pages. There's also code prepared for use for Blogger and Blogger comments:
Instrunctions for Blogger you could find below, but first here's explanation of some of the parameters.
Important parameters
<div id='rate' class='rate'>{[["☆","★"]]}</div> | This div element contains information about the symbols used to display rating: "☆" is empty star, "★" – filled star; It can also contain any valid HTML element, like images or spans. id of the div is important, as it's passed to the server (see below). | ||||||||||||||||||||||||
<div id='stats'></div> | This div element will contain text with the number of votes, views and average rating. Its id is also passed to the server, but you can omit the whole div, in this case the previous div (rate) will be used instead. | ||||||||||||||||||||||||
| |||||||||||||||||||||||||
You can also pass the following parameters:
| |||||||||||||||||||||||||
This gives you the full control over the rating widget. | |||||||||||||||||||||||||
- Select a widget and copy code from a Blogger tab.
- In the settings of your blog select Design tab (in old interface; in new interface it'll be Template tab), save old template (Backup/Restore button), Edit HTML and select "Expand Widget Templates":
Old Blogger interface New interface 
- You can backup your template now if you haven't done it yet - select all, copy and save into a file. In the template text find string "<data:post.body/>" and paste widget code after it. If there's more than one such string you might need to try it first: add some string (like '!!!'), save and check if that is the place where you want your new widgets to be displayed; than remove !!! and paste widgets code. You can separate rating from the text with one or two new lines with <br/><br/>, like this:
- Add the following line into <head>...</head> section of your page:
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" /> - Save the template and check that rating appeared under all the posts in your blog. If you don't want it to be shown on main page of the blog, but only when one opens a post, you should change widget code line
"<b:if cond='data:blog.pageType != "static_page"'>"
to
"<b:if cond='data:blog.pageType == "item"'>" - To add rating to all the comments in your blog take widget code from Blogger Comments tab and put it after line <data:commentPostedByMsg/> in the template.
Rate beat on the right hand side of the main page shows the latest rated records among all the sites using rating widget.
You can also see the statistics of all rated records of a certain website. You can administer your widgets and see more detailed statistics here.
Below there's an example of how rating may look like in your blog.
Rating widgets for websites, blogs and comments,
Rate this posting:
{[['
']]}
']]}You might like:
how do i add my own rating instead of users? Thanks
ReplyDeleteWhat exactly do you mean by "my own rating"? If you want to not allow user to change rating it'd be better to use static images. But I like the idea though, I'd probably add a parameter "maxvotes", so that users might not vote more than a certain amount of times and if you'll set it to 1 and vote yourself, you'd get what you want (if I understood you correctly). Check the updates.
ReplyDeleteThank you. Very nice. I added the appropriate Blogger Code and styles, but they are not seen when using Internet Explorer. I can see it perfectly using my Android Phone, however.
ReplyDeleteThank you.
www.ChimpDoctor.com
IE makes me sad sometimes. Thanks for the feedback, I'll figure out what's wrong with the ratings in IE.
ReplyDeletehello my friend...very good job and i am using five stars which works excellent... i have a question: Is there a way to display in the sidebar the top rated posts by users? or in another page of my blog to have the top rated posts? thx in advance
ReplyDeleteHello MathHandler. In short, yes it's possible.
DeleteFirst, you can get statistics on stats page:
http://all-rate.appspot.com/eng/stats - type in URL of your blog and check what it shows
Second, you can setup a separate page on your website (or blog). On that page you need to make a JS call like this:
<script type='text/javascript' src='http://all-rate.appspot.com/stats?url=http://fruitfulbookmarks-ru.blogspot.com/&callback=callbackStats'></script>
where ?url=... should be URL of your blog or website, it'll show you the same table as all-rate stats page mentioned above, but to make it working you need also to copy 3 JS functions from http://all-rate.appspot.com/js/common.js and make them available on that page (by copying them entirely on a page or in a separate js file which you include in HTML):
- callbackStats
- getURLData
- callbackURL
You can have your own realizations of these functions to make stats look like you need and reorder rows as you need - this is also the way how you can make a sidebar (tough, yes :)). One thing to remember that it shows only the records having 1 or more votes, the reason for this is that if you'll show all the pages with ratings, it'll also show you previews (like when you're writing new blogger post which is not yet published) - you don't want them to appear on stats, as stats is currently completely public. Also, you can avoid a page to be added to stats if you call widget with &top=no parameter in URL. And one more thing: I see your profile is closed to view by public, probably so is your blog - this does mean my script will not be able to read titles of your pages and instead of titles you'll see something like "access denied" (URL will remain though). To change this'll need to modify those 3 functions.
I'll definitely make a nice-looking customizable sidebar after I will define how to arrange records in this "top-rated" widget. Which is better: page with 1 5-grades or page with 2 4-grades; page with 10 1-grades or page with 2 3-grades. I need to invent (or steal) some formula taking into consideration all possible kinds of ratings I have. Currently it's only amount of stars to consider, but later there'll be more parameters.
I want to do exactly the same thing. Ranking of the highest ratings in the sidebar.. but I don't know much about js. Is there a tutorial for this? or a widget?
DeleteCheck these two postings:
Deletehttp://fruitfulbookmarks-en.blogspot.com/2012/05/best-posts-widget-with-thumbnails.html
and
http://fruitfulbookmarks-en.blogspot.com/2012/11/how-to-sort-blogger-posts-by-popularity.html
It dosen't work correctly if someone have star ratings and polls on each post. When I make this tops sidebar it shows incorrect average rating (different than on each posts).
DeleteFor eg. on post "98" it shows (rating:3.8 | votes: 6 |views: 118), on sidebar it shows post "98" (6). Same here https://manage.graddit.com/account/tops on preview when I chose criteria "average rating" it shows 6 instead of 3.8.
Got it. I'll modify it to exclude polls from tops sometime soon.
DeleteAnytime soon? Is there some kind of temporary solution?
DeleteIt was fixed and polls should be gone from tops by now. Still see them? URL example would be helpful.
DeleteHere you can check how it looks:
Deletehttp://mlodewino.blogspot.com/p/top.html
post 131 should be 4.5 instead of 5
post 84 should be 3.4 instead of 5
I can send you on email my graddit account secret key if you want check it there.
For some reason you have duplications: same pages but different rating IDs (with rating_ prefix and without). I'll provide an option to delete wrong ratings in admin, so that you could do it yourself.
DeleteI deleted all ratings. I waited a few days for new one. I have made new top and it still shows wrong ratings.
Deleteeg.
http://mlodewino.blogspot.com/p/top.html
post 14 should be 2,7 instead 5
It seems there was an error that forced tops to use rating of the latest vote, not the average. Should be working fine now. To wipe the tops cache you can log in and just save corresponding top.
DeleteStill something wrong.
Deletehttp://mlodewino.blogspot.com/p/top.html
-post 103 should be 5 instead 5.4 (how there could be avarge 5.4 if max is 5?)
-also it try to make avarge from my info page (not post)
-post 78 is 3 and should be 3.7
-post 96 is 4.07692307692 instead of 3.3
I'll check that.
DeleteRating more than 5 come from the old history when polls counted as regular ratings. I've update those history records manually, so it should work now. Also, there's fix for wrong ratings.
DeleteThanks. It's working fine now.
DeleteWhy some ratings are displayed like this:(4.73076923077) and other normal, like this (4,7). Is there way to force all to display one decimal place?
Well, initially these values were not intended to be displayed to users, it's an admin thing. I'll format the output.
DeleteThis comment has been removed by the author.
ReplyDeleteHello,
ReplyDeletehow to show this widget in selected posts only?
You need to take code from Generic tab and add to your post (not template!) - if you're asking about blogspot. If it's a regular page then take Generic code and put it into HTML code of that page.
DeleteAnd yes, every time you'll have to get back to http://graddit.com and take Generic code for every new post/page or invent new rating ID yourself. Another way (for blogspot) is to copy Blogger code into the template as described and also put the desired conditions into that template, but the blogger templates aren't very flexible, so it depends on what you want.
DeleteIs there any way to add partial stars?
ReplyDeleteLike 4.5 stars? It's one of the planned enhancements, but not earlier than a month or two, I need to implement few account management features first.
Deletehi this is very useful tools for blogger and i wonder how to change the sizes of the stars to my desire sizes.
ReplyDeleteYou can change it with styles: copy the styles from http://graddit.com/css/graddit.css into your template/html page and change corresponding elements size; or deploy css file to a free hosting and change styles in the file, include that new file in the HEAD section. If you need an advice on styles give me the link (here on send to fruitfulbookmarks@gmail.com") and describe what exactly you want.
Deletewhat abt get a callback for just one post with stars? I only want to show the rating feedback at the top of my post and the voting at the bottom? or be able to show both voting at the top and the bottom of the post. This is for blogger.
ReplyDeleteIs it for a post page (containing only one post)? If so, it should be possible to add in the template as many ratings as you want, even if that will be the ratings with the same IDs. Also you can pass name of a JS callback function and then process ratings data as you want in this function: show results on top of a post, for example, but you might need to change the template. Give more details (maybe a drawing) and I'll try to advice you how to do it.
Deletebasically I have a summary preview of each post on the front page; at the top of each post, there is title, date and comment and I want to add the ratings there and I also want to add it at the end of the post so that after a reader is done reading he/she can also access it at the bottom.
DeleteSo I want it to either show the stars (the result of the stored ratings) or the stars that can be used for voting at the top of each post. and to only show stars that can be used for voting at the bottom of each post.
I've tried to use your code twice in one post page but it only shows once.
DeleteTo add 2 ratings at the same page you should have different div IDs and pass them to rating script, meaning in code instead of ...div expr:id='data:post.id'... it should be something like this:
Delete...div expr:id='data:post.id-top'...
and
...div expr:id='data:post.id-bottom'...
and these IDs (with -top and -bottom) should be then passed in the parameters, something like this:
&id=" + data:post.id + "-top"
Because of the specific character of the blogger templates it can be not very trivial to do. I wouldn't recommend doing this, instead I would add a separate div on top of each post (in the template), for example with id='top_rating_stats' and write a callback JS function that will get ratings data and then dynamically insert stars in this div. I understand it's kind of high-level explanation, I'll try to prepare a tutorial and post it in this blog.
okay thank you. I look forward to the tutorial.
DeleteHi, the tutorial is ready: http://fruitfulbookmarks-en.blogspot.com/2012/04/how-to-duplicate-rating-information.html
DeleteLet me know if it doesn't work. Live example (sorry, it's different language, but should help with understanding of the concept): http://blog-perevodov.blogspot.com
Can this ratings be used in the Google SERPS ?
ReplyDeleteDo you mean rich snippets, that Google is using to show the stars on the search results page? Basically these snippets is just HTML code built into your pages. Currently widget is all javascript, meaning it's loading data from the server when your page is already loaded. When google search crawler downloads your page it sees only the JS calls. I heard their engine is smart enough to run some JS, but never tried it. I was going to implement snippets and have some experiments to figure out how google works with dynamically loaded snippets, but honestly saying I'm pessimistic about it. Another possibility I see is to get rating information on the server side (of your server), cache it, generate snippets and send it to user as a part of HTML, but it can work only if you manage your own server (or have a hosting) and run your website there. I'll investigate on it and write a post on how to work with snippets.
DeleteTried JS. Just as I thought, Google isn't picking up the snippets created by JS. I'll try some other tricks a bit later.
DeleteIt can now be used in Google SERP: http://fruitfulbookmarks-en.blogspot.com/2013/04/star-ratings-rich-snippet-on-google-serp.html
DeleteHi, your widget is nice and useful. I have one problem with the number of stars (I'm using blogger): the first time I add your code to my blog I changed the number of star to "3" but now if I try to change another time that number in the code the n° of stars on my blog remain 3 . Can you help me?
ReplyDeleteThank you.
Once rating is created and stored in the database you can't change the number of stars. Possible solutions:
ReplyDelete- leave desired number of stars (5?) in the template; all new posts will appear with that number of stars; old posts will display 3 stars.
- there's a trick you can use: each rating has an ID, for blogger that ID is posts ID, see the widget code: ...http://graddit.com/rate/rus/5/" + data:post.id + "?stats=...; you can add some letters before or after - that will change rating IDs and you'll see your stars, like this: ...http://graddit.com/rate/rus/5/giveme5stars" + data:post.id + "?stats=...; you'll lose existing votes/views/rating info though.
- I'm going to implement an interface that will allow to manipulate ratings in admin panel; not going to happen soon...
Many thanks!
DeleteThis comment has been removed by the author.
ReplyDeleteThis is a great GREAT widget!! Thanks a lot!
ReplyDeleteI'm having problems with the stars and stats, I can't put them in diferent lines (in blogger), like this:
*****
(rating: | votes: )
I thought a simple "br/" would do it... I hope you can help me, thanks!
I'm talking about the yellow stars code btw..
DeleteIf you want stats (that rating/votes) on another line you need to have a separate div for stats. I've changed template for this blog to move stats below stars, so you can open source of the page and see how it's done; you can also check red stars code on graddit.com, it has separate stats div. In short:
Delete1. add div like this one:
<div expr:id='"graddit_stats_" + data:post.id' class='ffbs_stats'></div> and separate it from previous code with <br/>
2. send its id to the widget with stats= parameter, like this:
...&stats=graddit_stats_" + data:post.id + "&...
Thanks to your question I found duplications in my code (not affecting the functionality though), I'll fix it soon. You know what, if you'll come few days later I'll add stats div to yellow stars code too, so that you could take it from there and just put <br/> between main div and stats div.
Thanks a lot!! I made those changes and works fine! Looks better this way, it's more flexible to add some css style.
DeleteI'll come later to see the new code.
Just a suggestion since you are modifying the code, it would be nice if it's even more flexible so anyone can add diferent styles to labels and numbers. I don't know how your code works exactly but maybe with diferent div for each elemnt would work.
Again, THANKS A LOT!!
I made changes and yellow stars now have separate div for stats.
DeleteRegarding styles and divs-for-everything concept. I believe this is not necessary for a couple of reasons:
1. Most of the users don't need this; having additional elements and styles will make widget heavier while I'm thinking how to make it lighter.
2. In fact you can have different styles for anything you want - you just need to use callback parameter that allows you to call your own javascript function that will get all the data you need (like id of container element, number of votes/views, etc.), so you just need to implement the desired behaviour there. You can refer to this post for details: http://fruitfulbookmarks-en.blogspot.com/2012/04/how-to-duplicate-rating-information.html
nice one it works :) please visit http://r4ndomshit.blogspot.co.uk
ReplyDeleteNice. Next step is start using related posts and best posts widgets provided by Graddit! Also, do remember that you can use any thumb-up/down images to match your template.
DeleteHow can i have multiple individual 5 star rating widgets in a homepage?
ReplyDelete3 things you need to know:
Delete1. Each rating has it's own ID; open http://www.graddit.com, expand any Generic code tab and you'll see that in the call line there's something like this: ...src='http://www.graddit.com/rate/eng/5/r29jtd?... - this "r29jtd" is rating ID; refresh the page and it will be different. You need to pass different IDs for different ratings;
2. There should be HTML container where widget will be displayed; again, check the code - you'll see there's <div id='rate' class=... div with id="rate" is a container; you should have different containers for each rating (with different ids);
3. Same thing for stats container; good thing here is that you can remove stats at all and stats will be displayed in rating container automatically.
So, to have many ratings on the same page you need to place on your page code similar to this (yellow stars):
<div id='rate_1' class='ffbs_rate'>{[['<img src="http://img.graddit.com/img/star.png"/>']]}</div>
<div id='stats_1' class='ffbs_stats'></div>
<script type='text/javascript' src='http://www.graddit.com/rate/eng/5/r29jtd_1?id=rate_1&stats=stats_1&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&info=info&info_delay=2'></script>
<div id='rate_2' class='ffbs_rate'>{[['<img src="http://img.graddit.com/img/star.png"/>']]}</div>
<div id='stats_2' class='ffbs_stats'></div>
<script type='text/javascript' src='http://www.graddit.com/rate/eng/5/r29jtd_2?id=rate_2&stats=stats_2&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&info=info&info_delay=2'></script>
<div id='rate_3' class='ffbs_rate'>{[['<img src="http://img.graddit.com/img/star.png"/>']]}</div>
<div id='stats_3' class='ffbs_stats'></div>
<script type='text/javascript' src='http://www.graddit.com/rate/eng/5/r29jtd_3?id=rate_3&stats=stats_3&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&info=info&info_delay=2'></script>
etc.
P.S.we're not talking about Blogger platform, right? Blogger will work automatically if you use proper template constructions.
Thanks, worked like a charm. One other thing. How can i get rid of the feedback option on the red star widget?
DeleteOh, and i realized that every time i refresh on ie it will allow it to vote again? Yes i'm not using it for a blog.
DeleteTo get rid of feedbacks remove <div id='ffbs_feedback' class='ffbs_feedback'... element and ...&feedback=... parameter.
DeleteI'll check IE issue.
Hi,
ReplyDeletei have a customized template and the star rating system is not working.
I tried every position of (there are 4) but everytime nothing show up.
When i copy the generic code into a html widget, the stars show up. unfortunately the visitors can only rate for the main page, so it is not for the individual blog posts.
where is the right spot to put the blogger code?
i hope you understand my question, my english is not the best.
Best don
What was the base template which you customized? You can try all these places with some small piece of text (like "!!!") to see if that appears somewhere in you posts (try to open individual posts too, not just main blog page).
DeleteYou can specify URL parameter in the script call (...&url=http://path_to_post...), in this case when user votes it will count against that page. That is probably not what you want if you expect ratings to appear on each post of your blog.
thanks for your answer.
Deletei just tried find the right positon with the small pieces of text. it appeared nowhere:-(
neither on the main page nor the individual post pages.
thats my page: http://www.viralvideocenter.com
maybe it isn't possible to combined it with this template?
i want to place your rating star system above each post.
To answer your question I need to try the template. I understand that the template is this one: http://www.mastemplate.com/2012/06/johny-crottube.html, right? I'll try it and let you know.
Deletethats the template i am using;-)
Deletea solution would be awesome. i tried it the whole day without any results:D
Worked for me, check this: http://ffbs-widgets-2.blogspot.com/2012/09/post-3.html
DeleteComplete template: http://pastebin.com/TW1g90FF, Graddit widget lines 813-815 (and styles on line 5). Don't forget to save your template first before trying anything.
Hope that will help.
yeeeeah, it works. thank you very much. i think my mistake was, that i saved this line: <link type="text/css" rel="stylesheet... above </head> and not after <head>.
Deletenow it looks great:-)
Have a nice day.
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHow can I change the size of the stars?
ReplyDeletethere are several ways to change size of the stars:
Delete1. use your own stars; check the widgets code, you'll see the stars URLs:
<!--{[['<img src="http://static.graddit.com/img/star.png"/>']]}--> - you can change them;
2. customize graddit.css and use your own customized version;
3. change the above code like this:
<!--{[['<img style="width: 30px; height: 30px;" src="http://static.graddit.com/img/star.png"/>']]}-->
The examples are done for Generic code; let me know if you have issues adopting this to Blogger platform.
Forgot one more: in the parameters there are css classes to be used:
Delete...&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&...
so instead of using customized graddit.css you can add your own styles and pass their names to script.
how can i delete thumbs down? i just wanna use thumbs up. thank you.
ReplyDeleteTake thumbsup code and change the number of "stars" to 1 in the script call like this:
Delete...graddit.com/rate/eng/1/...
should work.
i tried it but it works on some posts but not all of them i couldnt understand :/ can you check it please? thank you. http://sarkionerileri.blogspot.com/
Deleteexample; it works on this: http://sarkionerileri.blogspot.com/2012/10/play-win-morning-light.html
Deletebut not on this: http://sarkionerileri.blogspot.com/2012/10/taylor-swift-begin-again.html
thanks again.
Service gets, stores and uses in future number of stars that was passed to it the very first time for a particular rating. In your case it was 2 initially and this value got stored for some of your posts. I dropped it to 1 for all of them and kept the number of votes and views. You still can see issues with some of your posts because of caching. It will drop in few hours or immediately when somebody votes for such posting. Soon it will be working properly for all of your postings.
Deleteoh thanks i suppose its ok. thank you very much for this widget its really realy awesome. you can remove my comments :)
ReplyDeleteGlad it worked. I remove only spam comments, all other comments can be useful for other people.
DeleteHi! me again :) I was reading all previous comments about duplicating the stats info to show it in the same post in blogger. But is there a way of duplicating everything? I mean if I put the stars at bottom and the top of the post, is there a way to allow voting in both places? And of course using the same ID. Thanks!
ReplyDeleteYou can duplicate code and for bottom and top parts set different DIVs ids (and keep same rating ID) and it will display same ratings on both parts, but you'll have to write lots of JS to synchronize voting and stats (when user clicks on top rating you'll also need to update bottom ratings stats and disable voting). My suggestion: don't do it :)
DeleteUse successfully Rating widgets on my blog but faced a problem with the stats when I try to enter the statistics (https://manage.graddit.com/account/eng) addresses this problem
ReplyDeletehttp://dl.dropbox.com/u/3475149/Pictures% 20Sharing/problem.png
And something else in internet explorer does not show the stars
My blog is:
http://www.lovefortechnology.net/
thank you very much
Accessing stats with Google Chrome? Accept the certificate (proceed on that page on the screenshot) and if page appears blank after that you'll need to click on the shield in the URL address bar and allow loading unsafe content. This is an issue with the certificate and I'll try to solve it in the nearest future, but for now this is the solution. I'm also aware of the issues with IE when stars are not showing, will try to solve it with delayed ratings load option.
DeleteIE should work better now.
DeleteThank you for your response intended to cover direct, which of course solved my questions and you outlined.
ReplyDeletevaggelis
How to align whole widget to the center?
ReplyDeleteWrap the whole thing with <center>...</center> tag.
DeleteHello,
ReplyDeleteI added star-rating widget, like this
" Rate this : star (rating: 0 | 0 votes | 0 views) "
and i want to delete the number of views, is it possible ?
Thanks,
> and i want to delete the number of views, is it possible
ReplyDeletePossible. In the parameters line replace views=yes with views=no.
it's okay, thanks for you quick help.
DeleteI am having a problem with the code. The error message is:
ReplyDeleteError parsing XML, line 1248, column 98: The reference to entity "stats" must end with the ';' delimiter.
How can I fix this.
There must be something missing in the code. Which widget did you try? Did you modify the code?
ReplyDeleteI tried the graddit widget. I didn't modify the code at all. Copied and Pasted.
Delete> I tried the graddit widget
DeleteI understand, but which one? Yellow stars, red stars, thumbs up/down, arrows, quickpolls? You can also post your entire template to pastebin and I will check it.
Oh. The yellow stars. I can't access pastbin from where I am but if you email me, blackbookcleveland@gmail.com I can email you the template. Thanks.
DeleteWow what an amazing widget!! I am using the yellow star raiting how do I make the stars hover when I drag the mouse over it and also I'm having trouble with account management log in first I generate token and logged in and customised the top rated post then I logged out then I tryed logging in again but wount work so I generate another token know all my stats rating gone. Why!
ReplyDeleteWhat exactly you want to do on hover? If that's not the default action you can customize it with callback function. Regarding management of the account, give me the URL of your blog, I'll check your registration.
DeleteThis comment has been removed by the author.
Deletehey fruits isit possible to have 2 raiting widgets on the same page posts like a star raitings and a thumbs up and thumbs down raiting as well, is this possible?
ReplyDeleteYes, it's possible, in the widgets code you'll need to set different IDs for DIV elements and rating IDs (by adding thumb_ prefix, for example). Also be aware that two ratings can mess up your tops and related posts (if you're using these widgets). To avoid issues with tops pass top=no parameter with the rating you're not willing to see in tops.
DeleteOk I will try that and let UNO how it goes also fruits can I add the poll widget as well so I want all 3 widgets tell me if this is okay, thanks
DeleteIt's ok, but you'll need also poll_ prefix added to the IDs; polls should not appear in tops. Also you might want to remove all the stuff from widget code that has "labels" (except for one of your widgets) - these labels are there to save labels of your posts to be used in related posts widget. It will work, I guess, but it will be saving them 3 times increasing loading time of your pages.
Deletehow do i add poll prefix show me where to change please
Delete<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div style='width: 300px;'>
<div expr:id='data:post.id' class='ffbs_rate'>{[['Bad'],['Average'],['Awesome']]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://graddit.com/rate/eng/3/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&url=" + data:post.url + "&class_star=ffbs_poll&class_star_set=ffbs_poll_set&class_star_vote=ffbs_poll_vote&type=poll"'></script></div></b:if>
Something like this (didn't test):
Delete<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"poll_" + data:post.id' class='ffbs_rate'>{[['Bad'],['Average'],['Awesome']]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://graddit.com/rate/eng/3/poll_" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&url=" + data:post.url + "&class_star=ffbs_poll&class_star_set=ffbs_poll_set&class_star_vote=ffbs_poll_vote&type=poll"'></script></div></b:if>
Also do remember that if you want to change number of options in the polls you have to change default number 3 that is passed (see the code) to whatever you want (and add options too, of course).
Deleteok first im going to add the thumbs widget i already have the 10 stars widget so i only want the thumbs widget on the post pages and not on the tops so this is the code i will use like you said let me now if this is correct for the thumbs then il add it thanks
Delete<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"thumb_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://static.graddit.com/img/thumbup_small.png"/>'],['<img src="http://static.graddit.com/img/thumbdown_small.png"/>']]}</div>
<script type='text/javascript' expr:src='"http://graddit.com/rate/eng/2/thumb_ " + data:post.id + "?id=" + data:post.id + "&labels=labels_" + data:post.id + "&url=" + data:post.url + ""'></script></b:if>
and how do i pass top=no parameter where shall i put this
show me
thanks
Looks valid. top=no you can set anywhere after ?, for example at the end:
Delete...url=" + data:post.url + "&top=no"></script></b:if>
hey fruit i tryed this code but nothing showing up mate only the blank writing rate this post
DeleteIs code still in your templates? Could you remind me which blog are you trying it on?
Deletehi fruits sorry about the late reply
Deleteyes i stil have the code in the template here is the link to one of the site posts
http://bengalipiffs.blogspot.co.uk/2012/11/rumel-ahmed.html
so basickly i already have the 10 starts rating and i wish to add the thumbs rating just on the post pages with no tops
let me know why this dosnt show up onlt shows rate this post writing
heres full code i used
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"thumb_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div class='ffbs_rate' expr:id='data:post.id'>{[['<img src="http://static.graddit.com/img/thumbup_small.png"/>'],['<img src="http://static.graddit.com/img/thumbdown_small.png"/>']]}</div>
<script expr:src='"http://graddit.com/rate/eng/2/thumb_ " + data:post.id + "?id=" + data:post.id + "&labels=labels_" + data:post.id + "&url=" + data:post.url + "&top=no"' type='text/javascript'/></b:if>
ok, you're almost there, now you need:
Delete- add thumb_ prefix to the div id ... div class='ffbs_rate' expr:id='"thumb_"data:post.id'...
- add thumb_ prefix to the div id passed to server ...?id=thumb_" + ...
- also remove labels patemeter (...labels=labels_...&url=) from the second code (for thumbs), it will speed up load time a bit.
i have followed your intructions it dosnt work now the page dosnt load up it freezes
Deleteheres the full code
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"thumb_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if>
</div>Rate this posting: <div class='ffbs_rate' expr:id='"thumb_"data:post.id'>{[['<img src="http://static.graddit.com/img/thumbup_small.png"/>'],['<img src="http://static.graddit.com/img/thumbdown_small.png"/>']]}</div>
<script expr:src='"http://graddit.com/rate/eng/2/thumb_ " + data:post.id + "?id=thumb_" + data:post.id + "& + data:post.url + "&top=no"' type='text/javascript'/>
</b:if>
also can u make me the code and go here
http://www.blogcrowds.com/resources/parse_html.php
paste the code you made and this site will parze the html for you so it will apprear on blogger comments so paste the code and copy the parsed code and come back here and post it to this message
thanks
I don't see issues with this code. I guess the page freezes because the top widgets you added there are trying to call gradditLoadTopPosts function that is node defined. Remove callback=gradditLoadTopPosts from your tops code, it shouldn't be there on the regular posts pages.
Deletehi
Deletei removed the gradditLoadTopPosts from sidebar tops
but still page freezing not loading
any suggestions
regards
I see you removed rating widgets code completely and still pages are not loading. To be sure if it's graddit widgets causing the problem remove also tops and see if that fixes the problem. In JS console I see that you have multiple issues coming from code that is not relatede to graddit (lightbox and relatedposts). Remove widgets one by one and see which one brakes yor blog.
Deletei removed the original star raiting and all the sidebar tops and still freezing
Deletethen i removed the lightbox javascript still page freeze then i remove related post javascripts and still freeze, even if all 3 of these are removed the page still freezes regardless so i take it must be the code then, know i have removed the code because it freezes my site, let me know what i can do to get the thumbs
thanks mate
Just add the code with thumb_ prefix in all 3 places. With such problems I would suggest to use a test blog with the same template to see first if things work.
Deletehi sorry about the late reply
Deletei am still trying to work out how to use both the thumbs and ratings on the same blog on same pages but i have followed all of your instructions but still dosnt work it seems the thumbs code makes the blog pages dissapear i have tested the code you mentioned above this comments but still on a test blog just with the code you gave it makes blog dissapear so its differantly somwthing wrong with the code with thumbs_prefix, can you kindly test out these codes on a test blog to make them work on same blog please i have tryed but i cant seem to work it out,
let me know
thanks
Well, that probably means there was an error in the code I gave as I didn't test it. I suggest you to not overload your blog with the widgets as it slows it down. I'll try to implement it on a test blog, but not before I implement more important stuff, so it's not going to happen in the nearest weeks.
Deleteokay i had a look at the code you gave carefully and there was errors it took me about 2hours to work this out after playing around with the codes here is the correct code thumbs up
Deletethis time page dosnt dissapear everything loads good apart from the raiting widgets does not show up
please have a look please fruits and let me know once you have tested this thanks
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"thumb_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div class='ffbs_rate' expr:id='"thumb_" + data:post.id'>{[['<img src="http://static.graddit.com/img/thumbup_small.png"/>'],['<img src="http://static.graddit.com/img/thumbdown_small.png"/>']]}</div>
<script expr:src='"http://graddit.com/rate/eng/2/thumb_" + data:post.id + "?id=thumb_" + data:post.id + "&labels=thumb_" + data:post.id + "&url=" + data:post.url + ""' type='text/javascript'/></b:if>
helo fruits
Deleteany news on multiple ratings??
thanks?
I had no issues implementing it on my test blog here: http://ffbs-widgets-2.blogspot.com
DeleteComplete template can be found here: http://pastebin.com/AnMfdZ8e
See lines 1598 and below.
you sure know what your doing
Deletethank you
it worked now
i copied your same code from pastebin
chers bro now i have 2 ratings
thanks again
Wassup fruit, very nice widget bro. I'm trying to use it but running into problems. I'm kinda amature with code so don't really know how to fix it. Any help will be greatly appreciated. This is the error message i'm getting!!
ReplyDeleteError parsing XML, line 2020, column 88: The reference to entity "stats" must end with the ';' delimiter.
url to my blog if that helps. www.dancehallanthemz.net
Thanx in advance
Maestro
Which exactly widget you tried? Try one more time, make sure you copied code completely and found proper place for it in your template. If doesn't work, try another widget. Copy your template and paste it to http://pastebin.com, so that I could check it. Also, I couldn't open your site.
DeleteThank you very much.
ReplyDeleteCool.
DeleteI used to blog. www.traditionofthailand.blogspot.com
It worked. Thank you.
Hello fruitfulbookmarks,
ReplyDeleteFirst of all; thank you for this great addition to my website!
I got two questions about adding this to my website:
1. Verification of my website is not working ( http://www.thefluks.com/p/graddittoken.html ). Could it be possible to add this manually?
2. I would like to remove the statistics for the mouse over. Since you might want visitors to use this product, I would like to write a post or link manually to your website. Is that possible?
Thanks in advance!
Hi
Delete1. there was an issue, should be working fine now, try one more time (you'll need to update token on your page);
2. it's ok;
Hello fruitfulbookmarks,
DeleteThank you for the quick response!
Concerning my questions:
1. I just tried it again, but it looks like it sticks on "verify..." (on a test blog it worked yesterday!)
2. Do you know how to do that? And do you know if it is possible to have this one enabled for comments too in the future? Should I remove this part? " + "&stats=ffbs_stats_""
Hope you can help me out!
PS: If you ever need help testing or something, let me know! I'm willing to help :)
1. What browser are you using? Try another browser.
Delete2. delete info=info&info_delay=2; stats is for votes/views/average inline statistics; didn't get what you want to do with the comments;
Hello fruitfulbookmarks,
Delete1. I tried firefox, IE and chrome, so that should not be the problem haha..
With my test-blog I could log in now, but I still can not seem to register with my 'real website'! :(
You have any other ideas? Is it possible to change my testblog account to my real website maybe?
2. Never mind, figured this question out!
Thanks in advance again!
It's not possible to change it with a test blog or any other blog. Could you please post a screenshot? I want to see what you're entering (I was able to request verification for your site, so it's strange that it keeps failing for you). Also, JS console output would be very helpful, I just want to find the issue. If nothing helps I will do it manually for you. Just change verification token to "iswearitsreallyi" and I'll create an account.
DeleteThank you!
DeleteI understand you want to work out potential bugs or problems now (if any of course).
The screenshots are uploaded here: http://www.thefluks.com/p/graddittoken.html.
On this page I changes the verification code to "iswearitsreallyi", but still can not submit it.
Hope you can help me out again..! Would really like this to work!
Greetings,
TheFluks
I created an account for you. Where should I send login and password?
DeleteWow, perfect!
DeleteSo, you could create it the usual way?
Please email it to: "ownageworld @gmail.com"!
Alternatively you could post it on http://www.thefluks.com/p/graddittoken.html (Comments are moderated by me).
Thanks in advance for the fast responses and the help!
Greetings,
TheFluks
Sent to email.
DeleteHey!
ReplyDeleteThe widget looks great, but I can't get it running - I can't find string "" - it just doesn't exist in my blogger template and I am using a standard Awesome Inc. layout provided by blogger, slightly customised. Is there any other string I should search for that would indicate a place where I put the code?
This comment has been removed by the author.
DeleteThe string I meant was the < data: post. body/> obviously
DeleteDid you tick "Expand Widget Templates" checkbox? Search for "post.body" (no space).
DeleteYeah, that's it, thanks!:)
ReplyDeleteWorks nicely now when I open a post. Unfortunately, it doesn't show on the main page, before opening the post. None of the strings from point 5 works - no matter which one I put there it still doesn't show on the main page. Any idea why?
This may be the condition you're using:
Delete<b:if cond='data:blog.pageType != "static_page"'> - to show on both places
<b:if cond='data:blog.pageType == "item"'> - to show only when you open a post
I have the static_page one and it doesn't show. I tried both and none works for both places. I just chose the widget, chose "blogger" and copy-pasted it and the default is static_page.
DeleteThen I can't tell you. You'll have to explore your template structure.
DeleteHi! Thanks a lot for this code. Very useful. I'm wondering if there's a 'portuguese' language version for this. I tried to change the code from 'eng' to 'por' or to 'pt' but it doesn't work. If you want you can translate 'rating' to 'classificação', 'votes' to 'votos' and 'views' to 'visualizações' and then release it to us.
ReplyDeleteA greeting from Portugal!
Hi. Translation is easy, you need to follow instructions described here: http://fruitfulbookmarks-en.blogspot.com/2012/06/how-to-translate-graddit-rating-widget.html
Deletehello Sir,
ReplyDeletefirst i have appreciate your all work about 'Rate this Post' you have done Really Great Job.
and second i just want to ask a Question and My Question is how i can Add "Most Rated Articles" Widget in Blogger's Blog? Please Contact me Soon If there Any Possibility about this Widget. Waiting for your Kind Response ..
Kind Regards
Wajeeh
Wajeehleo@facebook.com
Hi. Did you try this? Ratings from Graddit: related posts and tops (scroll down top Tops section).
DeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
DeleteIs it possible to configure this apply a rating to the actual comments user leave and not just have it appear on the comment page below the post? In other words can the rating appear next to the comments left by users in order to rate them directly? The instructions indicate using the "Blogger Comments" code, but that only yielded the appearance I described above… regardless great script, just what was needed so far.
ReplyDeleteYes, it's possible and yes, you need to use Blogger Comments code. You should locate proper place in your template in order for ratings to appear near each comment. Have you tried to set it after <data:commentPostedByMsg/>?
DeleteYes actually, and to no avail. It is entirely possible that something got missed, but it was tried a second time without result. An example of usage can be found here: bavardagewithmulberry.blogspot.com. The posting section works flawlessly, and thank you for that. Perhaps you can spot the error, as the Blogger Comments code was left in the template at what is believed to be the proper place. Cheers for your time…
ReplyDeletePost whole template to pastebin.com and I'll check it.
DeleteThis comment has been removed by the author.
DeleteI can't define any issue with the presented code, but I can't see that ratings are called when I open a post with comments. Have you removed the code from the template? If not, you probably picked a wrong place for the widget call. Try something simple insted (text like "!!!") and see if that appears near the comments.
DeleteThis comment has been removed by the author.
ReplyDelete> If I place "!!!!!!" next to "data:commentPostedByMsg" I show no results next to comments
Deletethis is it, that means you chose a wrong place, probably you have more data:commentPostedByMsg entries in the template, try them all.
Hi Friend,
ReplyDeleteI am trying to add this widget since long time but every time it is showing
Error parsing XML, line 1506, column 98: The reference to entity "stats" must end with the ';' delimiter.
I have tried HTML code - Star code from http://www.graddit.com/ratings-widget...Further, i tried to add other rating style then also it is showing same error.
Will you help me out ??
My blog is http://itsmywalls.blogspot.in/
Thanks in advance.
Please paste your entire template XML (with the ratings widget code) to http://pastebin.com and give a link to it here. Or send it to support@graddit.com and I'll check it as soon as I have time. Don't forget to tick "Expand Widget Templates" checkbox before copying the code.
DeleteHello. It's not possible for 2 reasons:
ReplyDelete1. googlecode is not meant to serve as a webserver that you need for server-side scripts. The scripts being copied to googlecode will not work;
2. even if you have a server / hosting (which is not free, by the way) I'm not sharing the scripts;
What you can do in order to speed up loading process is to get faster hosting for the images (stars). Have the pictures on a server that works faster for you and change the corresponding paths in the widget code.
Greetings and congratulations for your contribution with all these widgets.
ReplyDeleteI have installed the rating widget and i have been using it without any real problem until the last month.Now,there are great delays in the page's loading time.I did't change anything and some speed tests in the internet shows me that one factor of these delays is graddit.
What have changed?Is anything i am doing wrong?
My blog is garmovies.blogspot.gr
Thanks in advance.
Yes, there are delays due to high number of blogs using widgets - servers' performance sometimes isn't enough to handle all requests. I'm currently working on optimizations. What you can do now to make your pages load faster is to implement delayed widgets load (after page was loaded completely). I would probably write a post soon describing how you can do this.
DeleteHere it is http://fruitfulbookmarks-en.blogspot.com/2013/03/non-blocking-ratings-widget-load.html - non-blocking widgets load.
DeleteI made all the changes and i have noticed that the page loads faster.Definitely,graddit doesn't delay it any more.I will keep an eye on it.
DeleteThank you for your instant response and help.
Just take non-blocking code from Blogger tab here: http://www.graddit.com/ratings-widget. IDs stay the same, so you will not loose your ratings stats.
ReplyDeleteI tried to install but not works here...
ReplyDeleteYou see my email? Reply me
Describe the issue here.
Deletehello bro i have just installed this plugin and working great only one problem i'm facing right now page views is not working only showing 1 view when i refresh many times.
ReplyDeleteIt's not supposed to add views every time you refresh the page; it tries to count unique views. Also, there is caching that can lead to lower numbers, but they will go to normal eventually.
DeleteHi, i'm getteing this error: Fejl ved parsing af XML, linje 1884, kolonne 104: The reference to entity "stats" must end with the ';' delimiter. - Why is this happening?
ReplyDeleteHard to say, usually happens if you take wrong code or put it in a wrong place. It's also possible that there's an error in the code. Save the template to pastebin.com and give the link here.
ReplyDeleteThe issue is fixed, thanks for reporting.
DeleteYou're welcome. Here's the answers:
Delete2) You can show as many stars as you want, and you're right - you need to replace 5 with 10. But it will not work for existing, already created ratings. Once you make a request it stores the number of stars and uses it no matter what value you pass later. You can fix it. Register here (generate the key to register, follow the instruction), then go to Statistics tab and there you would be able to delete old ratings with 5 stars, read more here.
3) That's a planned enhancement: to allow read-only ratings and ratings with predefined ratings.
4) Are you asking about callback function parameters? You can read about it here and here and refer to http://www.graddit.com/js/graddit-extras.js for live examples. Or describe what would you like to do and I will tell you if that is doable.
5) I had a donation button, but nobody donated, so I moved to subscription plans, you can see them on Prices page. What it gives: no ads in ratings votes popup + some features like stars on Google SERP, fair cross-linking (implemented, but not yet announced) + most of the new functionality I'm going to develop will be open for subscribers only.
If you want to change the number of stars for existing ratings you must use ☠
DeleteIf you just change 5 to 10 it will show 10 stars for all new posts and 5 for all old posts that have already been shown at least once
Although there's a time during the day when graddit service experiences higher loads, non-blocking code should not stop your other stuff from loading. I checked your pages, everything seems fine with the code. Besides, there's a short timeout, meaning if ratings can't load in few seconds they drop connection to prevent pages from being stuck waiting on graddit.
ReplyDeleteCurrently subscribers are not separated from free accounts, but I like the idea, I will implement it and will offer subscribers dedicated servers with better performance.
free gamesand software
ReplyDeletehttp://fullypc-games.blogspot.com/
hi there i am not able to see that widgets on my blog > www.topthisweek.com. I have followed the whole process but it is not appearing..??
ReplyDeleteNeed Help
Probably put it in a wrong place in your template. Check how many data:post.body/ tags you have in it, try them all one by one. Remember to have a backup copy first.
DeleteCheck this
Deletehttp://star-rating-widget.com/
Checked. Sorry, my friend, for this widget it's too early to compete with graddit ratings :)
DeleteThis comment has been removed by the author.
ReplyDeleteIs it possible to use as a Turkish? Thank you http://ooyunx.blogspot.com
ReplyDeleteSure you can. Read this: http://fruitfulbookmarks-en.blogspot.com/2012/06/how-to-translate-graddit-rating-widget.html
Deletethanks
DeleteHi,
ReplyDeleteI have the same problem than several abose : Erreur d'analyse XML, ligne 1706, colonne 96 : The reference to entity "stats" must end with the ';' delimiter..
I am sure I well copy and paste the code. I tried with several and I have always this message. I tried to add a ";" but ir changed nothing. Do you have any fix for that ?
Best regards.
Are you sure you chose Blogger Platform and not Generic or Tumblr before taking code? You can take the entire template code (with error), put it to pastebin.com and leave a link here and I will review it as soon as I can.
DeleteGood day,
ReplyDeleteI'm from Ukraine, so I'm sorry if I will make a mistakes. When I was searching in google "rating for blogger" , I saw that your blog page had rating with stars in the search result in google, how can I do that ? Does grabbit have that widget ? Sorry if you have already responded on that question.
Yes, graddit has it. Articles:
Delete- in English
- по-русски
Wow, thank you so much Evgeny, I will try to add that snippet. And sorry for off-topic , how did you add "reply" for comments, I tried to add that function, but I couldn't. Evgeny thank you for your great 2 blogs, good job.
DeleteOne of these tutorials should work: eng, rus.
DeleteHi Evgeny,
ReplyDeleteSorry to bother you again, but since blogger updated it's format, I needed the hack for dynamic views again. And somehow, it still does not verify on my website... (Maybe because of the custom link? (TheFluks.com)). I tried every possible option again! Would it be possible to send me the login and password again?
Sorry for the trouble and thank you again for your help!
I was not planning to support dynamic views, that is taking too much time.
DeleteYour token page does not contain token itself, that is why you can't get verification.
Check this site Easy to add Rating widget for blogger http://star-rating-widget.com/
ReplyDeleteYou spammed already in this post: http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html?showComment=1377353516262#c2233361324150238304
DeletePlease stop it or you'll get ban.
Hello Evgeny
ReplyDeleteI've installed the first addendum
http://www.graddit.com/ratings-widget
But did not appear good, lacking Style file
Can you help me to show up well and change the background color Black
Use this stylesheet http://static.graddit.com/css/graddit.css
But without found
Here is an example
http://b9b.blogspot.com/2013/10/Play-Game-Zuma.html
Thank you
Hello
Delete1. you have duplicated graddit.css entry in your template, remove one
2. in widget code you are using your own classes for some DIVs, those classes are not in graddit.css, you need to support them yourself. Start with adding "display: inline-block;" for each of *_bar classes.
Thank you Evgeny for answer
DeleteBut I copy the code from here
http://www.graddit.com/ratings-widget
I tried in every way and did not succeed
But I see a difference between your code and the other code
Conducted research on the _bar and did not find any one of them
You can give me the code or Style?
It's so good
ReplyDeletewill try it later
Sorry for the inconvenience
hi
ReplyDeleteisit possible to add some css on the view count as i cannot find a class, how can i do this
Chers
div.ffbs_stats is what you need to customize.
DeleteOr find ffbs_stats in the parameters (in ratings code) and replace with your class name.
Да похоже убирать это гаджет надо,блог сильно нагружает,да страшная морда рекламная только посетителей отпугивает!!!
ReplyDeleteОформите подписку, чтобы убрать рекламу; используйте асинхронный код (есть галочка на странице, где вы брали код), чтобы загрузка виджета происходила в фоне и не тормозила страницу.
Delete