Most popular this week: Star ratings rich snippet on Google SERP with Graddit (for Blogger).

Thursday, April 19, 2012

How to duplicate rating information using javascript

As a response to the question from the previous post I'm going to explain how to duplicate rating information using JS callback function (in Blogger). So, what we want to do:
- show ratings below the posts (as usually);
- duplicate rating information and show it above the posts (without ability to vote).

Steps:

0. Make a backup copy of the template;

1. Open template editor (don't forget to select "Expand Widget Templates" checkbox);

2. Find ratings widget call and add parameter "callback=previewRating", something like this:
...class_star_vote=ffbs_star_aimg_vote&callback=previewRating&views=yes&average=yes...

3. At the desired place of the template write a div that will hold ratings duplicated information:
<div expr:id='&quot;graddit_preview_rating_&quot; + data:post.id'>Rating: </div>
for example, you can place it just before post body (before <data:post.body/>)

4. Somewhere (preferably on top) in your template write callback function, like this one:
<script language='javascript'>
function previewRating(key, id, stats, average, amount, votes, data, views) {
var div = document.getElementById("graddit_preview_rating_" + id);
if (div != null) {
var avg = Math.round(average);
var tmp = div.innerHTML;
for (var i = 0; i &lt; avg; i++) {
tmp += "<span class='ffbs_star_set'>&amp;#9733;</span>";
}
for (var i = avg; i &lt; amount; i++) {
tmp += "<span class='ffbs_star'>&amp;#9734;</span>";
}
div.innerHTML = tmp;
}
}
</script>

5. Save the template. You're done, ratings should be now showing right after title (before post body) of each post.

As you see, callback function is a powerful tool that gives you unlimited control over your ratings.

Reminder: the code above should be used with blogger templates only, it will not work with a different template system; you should adapt it to the templater or for pure HTML just remove redundant special characters. Let me know if you faced any problems with that.

Rate this posting:
{[['']]}

You might like:

18 comments:

  1. Hi amazing widget this is,
    Is it possible to use this feature to show raitings under each post title on the homepage like a screen shot of raiting without the ability to vote so only shows ratings and page loads fast
    Thanks

    ReplyDelete
    Replies
    1. That is exactly what the function does - displays stars under titles. See how it works here: http://blog-perevodov.blogspot.com/. But it doesn't decrease the load time, as it works with the data that has already been loaded.

      Delete
  2. hi
    i have a custom blogger template, im having trouble doing this tutorial im stuck on step 3.
    basically i want this to show on the labels link have a look at this page
    http://www.bengalipiffs.blogspot.co.uk/search/label/Females?&max-results=16
    so i want this to show above or bellow i don't mind where but next to the post title on the label page for each box, so on step 3. where exactly do i put the:
    div expr:id='"graddit_preview_rating_" + data:post.id'>Rating: div

    ReplyDelete
    Replies
    1. Well, you never know for sure where to put that, you'll have to experiment. Add something simple (I usually do !-1-!, !-2-!, etc.) at the places you think might be right, then save template and check where your text appears. If proper place found - this is it. If not, continue to try. You also might want to refer to official blogger help on all the tags available in the templates: http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270.

      Delete
    2. hi
      i have experimented and found the propa place which is div class header but
      i have problem when i put that code there only the word raitings shows but theres no starts next to it but if i put the code after it works perfect have look at my site know i put it on top
      http://www.bengalipiffs.blogspot.co.uk/
      works perfectly but when i put on label page
      http://www.bengalipiffs.blogspot.co.uk/search/label/Females?&max-results=16
      only the label words shows but no stars, please help thanks alot.

      Delete
    3. It means that the place you found is not good for label page. Are you sure sample text (!-1-! or whatever) also was showing on label pages?

      Delete
    4. on label page it was showing only the word raiting but no picture stars next to it

      Delete
    5. I can't see anything now (removed?). Possibly a JS error, I need to see it to be able to advice.

      Delete
    6. have a look know
      http://www.bengalipiffs.blogspot.co.uk/search/label/Females?&max-results=16

      Delete
    7. Ok, I see. To be able to duplicate ratings you need to load those ratings first. I mean you should load the widget with callback function name passed to it, and then that function will draw stars after "Rating: " label. Currently ratings are not called from label pages, there are no requests to graddit (at least I don't see) on label pages. I guess you don't need both preview stars and real stars on labels page, in this case you can hide widget with some CSS, but you'll have to figure that out, how to make widget appear on normal pages, but not appear on label bages.

      Delete
    8. i want to show duplicate rating on my label page you see and keep the stars widget on blogger pages so at the moment i tryed to follow this method on label page but it only shows rating and no stars like i said, is it possible to put dulpicate on label page and dont know how to use call back functions can u show me with pastebin.com please
      thanks alot

      Delete
    9. Well, it's not that easy. To show how it should be I'll have to take your entire template, put it on test blog, populate it with fake articles and then try to implement ratings on label pages. And it's almost midnight here where I live, so not today. In the meantime you can upload your latest template (after all your experiments) to pastebin and give link to it here, I'll try to check it as soon as possible.

      Delete
    10. hi
      i have uploaded the template to pastebin its:

      http://pastebin.com/4Ra8QhY0

      or you can download it here as blogger template

      http://hostingtemplate.googlecode.com/files/B%20Tube%20Advantage-gallerytemplates.rar

      take your time and
      thanks alot your a genius mate

      Delete
  3. any solutions on how to get the graddit duplicate raitings on post page or the label or home pages it only works on page post header for some reason

    ReplyDelete
    Replies
    1. It's all about proper conditions in your template and accurate handling in JS, it's not that easy to advice without actually digging into your code. I'm planning to launch a site or blog where I'd keep some templates with graddit ratings and other widgets pre-installed, I'll include ratings duplication there too, but it's not going to happen very soon.

      Delete
  4. i really want this
    i've tried it... but it didn't work... maybe i did some mistakes... i dont really understand "Somewhere (preferably on top)"

    if you see on my homepage http://www.filmeuy.com/. i just copy all the graddit code... its work... but how to disable voting just for the code on my homepage?

    ReplyDelete
    Replies
    1. I don't see that you're using callback for ratings and that you have previewRating in your code. You can check http://mlnpics.blogspot.com - there I'm using this method to disable voting on the homepage.

      Delete
  5. hi

    i just checked the mimipics template

    the reason this didnt work is because you forgot to mention some code at step 3

    this is the code for step 3 for this tutorial, i just tried it and it works

    <div expr:id='&quot;graddit_preview_rating_&quot; + data:post.id'/>
    <div class='ffbs_rate' expr:id='data:post.id' style='display: none;'>{[[&quot;&#9734;&quot;,&quot;&#9733;&quot;]]}</div>
    <script expr:src='&quot;http://www.graddit.com/rate/eng/10/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;callback=previewRating&amp;stats=&quot;' type='text/javascript'/>

    ReplyDelete