Blogger, HowTo's
 

Star Rating for Blogger

We are proud to announce that we’ve just released the Star rating gadget for Blogger.
You can now enjoy the full power of Rating-Widget’s Rating System to add beautiful star rating for Blogger posts – all in less than 5 minutes, as easy as clicking a button. Ain’t it amazing or what?!

Update on October 24th, 2013

Simply go to http://rating-widget.com/get/rating/blogger/#editor, customize the rating style, language and layout. Then, click the Add to Blogger button and that’s it! If something doesn’t work, use the FAQ and Troubleshooting section below the Add to Blogger button. If you follow this, no need to read the rest of the post.

Design Your Rating Style

Go to the Rating-Widget.com and easily setup the language, styling and layout of your thumb or star rating.

Rating System Settings

Add the Ratings to Blogger

  • Click on the big “Get Widget” button.Rating-Widget's Get Widget Button
  • Then, follow the instructions to get your unique-user-key. The reason you need one is for the system to recognize your unique Blogger account so it will show your Blogger star ratings and not others.User-key Generation
    Btw. Don’t worry about the code window – you do not need it.
  • After the key generation, you’ll find the familiar “Add to Blogger” button – simply click it.Add Gadget to Blogger Button
  • This will forward you to Blogger’s “Add Page Element” page. Leave the title empty, and click on the “Add Widget” button.Add Star Rating Widget
  • All what left to do is clicking on the “Save arrangement” button.
    Can you believe it?! WE ARE DONE!Blogger Layout PageBtw. you might notice a new gadget with “HTML/JavaScript” title. This is the Rating-Widget’s rating system code that was automatically added to your Blogger.
  • Open your blog and Voilà – your Blogger posts are ready to be rated with our beautiful Rating-Widget’s thumb or star ratings.Star Rating on Blogger Posts

As one of the earliest blog publishing platforms (Wiki – Blogger), Blogger keeps rapidly growing and taking a major cut of the market. Since its acquisition by Google at 2003, dozens of rating system tutorials have been published to facilitate the need. Our vision at Rating-Widget is to provide a Beautiful Rating System with Super-Simple Implementation. I believe that we finally nailed our vision into Blogger. You don’t need to have any web development skills like AJAX, jQuery and PHP. Simply design the ratings with our WYSWYG editor, and click the “Add to Blogger”.

FAQ / Troubleshooting (Updated on May 2, 2013)

I followed every step but it just don’t work?

  • Open your blog’s template and click on EditHtml:Blogger Template Section
  • Put the mouse cursor anywhere inside the code area and click Ctrl+F to start the search functionality. Type 
    <b:includable id='post' var='post'>

    in order to find the main post template container.Blogger Post Template - Html Editor

  • Then, expand the template by clicking the small arrow on it’s left, next to the line number and search for the meta element: 
    <meta expr:content='data:post.id' itemprop='postId'/>

    Blogger Post ID Meta - Html Editor

  • This meta tag is required in order to match each rating with its corresponding unique post ID, so if you can’t find it, simply add it and save the template.

Is there any way to customize the location / positioning of the ratings?

Definitely YES! We understand that you want to customize your ratings location to look AWESOME on your blogger. This why we’ve added a special anchor you can add anywhere in your template and the ratings would be added right before this anchor. Simply add

<b class="rw-rating-container"></b>

to your template and watch how the magic happens.

Posted by
 

Related cool posts

198 Comments

 

  2. Pingback: Rating-Widget for Shopify Launch - Rating-Widget

  4. AXL

    Hi, I have the same problem, same vote for all the post on the blog, i perfectly follow the instructions, help please?

     
    Reply ↓
  5. Jimmyjimmy

    Hi, I added the code to my template (not use the add to blog function cause it did not work). But get the same vote for all post. What can i do?

     
    Reply ↓
  6. Brent

    Be advise that this gadget does NOT work within Internet Explore 8 on my XP Computer, which many are still using!!! When I visited Outside Blog, mentioned above, the gadget is display when using Firefox and Chrome, But NOT IE8!!! Just thought You and everyone else should know.

     
    Reply ↓
      1. Brent

        Thanks so much for your prompt reply, My DOCTYPE is…

        The same as it is for Ousider’s Blog @ http://filmskihitovi.blogspot.com/ Gussing this is Google Blogger Default for there Blogs??? And that is why Your Gadget it’s not working with IE8 along with Oh So Many Other Things, Like the Google Translator Gadget!!! Hoping that this can get this resolved??? For I do have alot of Blog Fans still using IE8 (Brent)

         
        Reply ↓
        1. Vova Feldman Post author

          Try to modify your DOCTYPE into strict mode. Use Blogger’s template editor and replace it with:
          < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

          Please let me know if now it works on IE8.

           
          Reply ↓
          1. Brent

            Thanks for the suggestion Vova, but I really don’t think this will work, even if I tried it and the reason I’m saying this is because Your Star Rating right here on Your Own Blog doesn’t work when visiting it via IE8, but it does with Firefox, Safari for PC and Chrome. I’m so sorry for the bad news and hoping you have access to a XP Computer with IE8 so that You Can Fix Your Own Blog before trying to advise others to fix their Google Blogs. Wishing You Only The Best Of Luck On This One 🙁

             
          2. Vova Feldman Post author

            Oh… thanks for the heads up. We’ve just recently re-designed the blog and forgot to update the default WordPress DOCTYPE. I’ve just updated the DOCTYPE and it works fine on IE8 & IE7 🙂

             
          3. Brent

            Well what ever you think you did to fix the problem here on this blog to get Star Rating to work via IE8, I’m sorry to say, it is still NOT Working. But the good news is that it is still working with Firefox, Chrome and Safari. And while I’m still going to use it on my Blog, I’m just going to post a disclaimer on My Blog stating this Blog Best Viewed Not Using IE8.

             
  7. Poxi

    i put this widget on my testing blog…it doesn’t work…beside my blog have a lot of css style..this may cause the problem..

     
    Reply ↓
  8. Roger

    I´d like to use my own image-sprite, but the method you guys describe in at the documentation page won´t work. How can I do it?

     
    Reply ↓
    1. Vova Feldman Post author

      Your Blogger’s template don’t have footer element which is the anchor for the ratings location. Please follow the 2nd troubleshooting bullet at the end of this post: “Is there any way to customize the location / positioning of the ratings?” and it should do the magic 🙂

       
      Reply ↓
  10. MFauzi

    may i ask….why the widget does not work on the theme generated by Artisteer otherwise it works on the theme of the original blog?

     
    Reply ↓
    1. Vova Feldman Post author

      Follow the troubleshooting at the end of the post. It resolves 99% of the issues. If you still doesn’t manage to resolve it, please share your blogger’s url here and I’ll check it myself.

       
      Reply ↓

  11. Pingback: Interview with Entrepreneuer Vova Feldman - GotInterviews

  13. Greg

    Dear Vova, looks great and well done, I have read all post and comments, I followed all instructions but could not be able to make it even appear, even after checking your troubleshooting parts. I even tried to add directly in my post settings this but nothing, then I erased it but kept your script widget on my blog. Any solutions ? Thanks
    http://www.grossiste-lunettes.net (this is an Ecommerce blogger site)

     
    Reply ↓
  14. Greg

    Thank you Vova, I fixed it myself, I add to add the code in the Includable post var area, I was a little confused cause I found the all code but in the mobile-post area only. It works great ! Good widget, now I will be able to justify all my rich snippets.

     
    Reply ↓
  15. Outsider

    Sorry for the late response. Problem was that I changed a template a bunch of times so some lines affected this change. I just reverted template to default, introduced this change and everything worked fine. After this I changed a template and still it works without any problems. Hope that this helps

     
    Reply ↓
  16. Roger

    I solved my problem and got the widget to show my own image-sprite. I think you guys should provide more examples of codes in the documentation page to work with situations like that, so that it would be easier for the user to customize the widget. Besides the image-sprite, i did some other changes that I had to figure out how to implement on my own, since there´s no explanation on them. And I´m no script expert at all.

    Anyway, this widget is really great. If you compare it to the others like polldaddy, you guys have the edge. Maybe the only thing missing is a widget to show the highest rated posts, or the most rated ones. That would be cool.

     
    Reply ↓
    1. Vova Feldman Post author

      Hey Roger, did you check our Documentation page? We have an example just for the custom image sprite: http://rating-widget.com/documentation/#rw_api_example_custom_image

      Please share what didn’t work and how did you solve it for the other readers.

      With regards to your suggestion, we do have a Top-Rated posts widget, but it’s currently supported only for the WordPress plugin. I’ve just added it to the TODOs list of the Blogger Gadget. Thanks!

       
      Reply ↓
  17. Misha

    I follow the instruction and this not appear .. follow the FAQ, the part of the code not appear too in the HTML section, please help :\

     
    Reply ↓
  18. Mervin

    Very nice widget makes my site look nice. Id like to add it more than one place on the site, so far ive not been able to. Is this possible and how do i go about doing it. Id like it to appear beneath the posts in the various categories on my site. I have posted a pic to show where id like it to be. I post some of the code from my blog maybe that can help in some way.

    Code…. ( ‘+posttitle+’‘+daystr+”+removeHtmlTag(postcontent,summaryPost)+’… Read more ‘;document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='‘+posttitle+’‘+daystr+’|’+pcm+'[I WOULD LIKE WIDGET HERE]’;document.write(trtd)}j++}}function…)

    Pic.. http://4.bp.blogspot.com/-UWGZWwzeDFo/UcY2tC9o8SI/AAAAAAAAOrA/4JfuG0klk68/s1600/Widget+help.jpg

    Website… http://www.dancehallanthemz.net

     
    Reply ↓
    1. Vova Feldman Post author

      Hi Mervin, apologies for the late response. I’ve checked your site and noticed that you’ve already managed to do that (at least that’s what I understand from your screenshot). Am I right?

       
      Reply ↓
    1. Vova Feldman Post author

      I’ve opened your site and I see the ratings working correctly. Please try to clean your browsers cache and re-load again. Let me know if that worked.

       
      Reply ↓
  20. Maestro

    unbelievable that people who commented looong after me gets a reply and i dont for whatever reason. Just looking for some help thats all. It would be appreciated!!

     
    Reply ↓
  21. Juliana Melchior

    I’m either really, really dumb, or just very tired, because I can’t get this to work 🙁
    I followed all of your instructions, and when it didn’t work, I followed the other instruction, no luck.
    I personalized it like I wanted, I generated the key and then I clicked “Add To Blogger”. I added it, saved the arrangement, and opened my blog to see if it worked, it didn’t.
    I kept reading, I tried to find what you told us to find, I found it, I expanded it, Didn’t see the code that you put here, so I added the darn thing. Still didn’t work, so I decided to check you code with mine, just too see if it looked the same, but it’s completely different. I have a massive headache right now, so trying to figure out what’s going on by myself is out of the question. I was wondering if there was anything you could do to help me!
    Thanks x

     
    Reply ↓
  22. Uri Gobey

    To the creator,

    Firstly thanks for this great tool….

    I have installed the code and it is working fine but for some reason it is showing the same rating for all posts whether on the homepage or in the individual posts, I always see the same rating for all. If I change one then all change. Surely an ID needs to be set for each of these and how do I do this? I didnt use the Add to Blogger option as it didnt end up showing it anyway so I manually inserted the code. Obviously it needs an ID, can you let me know how to do this please?

    http://isradocu.blogspot.com

     
    Reply ↓
    1. Vova Feldman Post author

      Hi Andrew, the reason it wasn’t working in your posts pages was because your entries class was ‘entry’ instead of the common ‘hentry’ class. Anyhow, I’ve modified our script to recognize it as well. Please refresh your browser’s cache and you’ll see the ratings (example: http://www.votemypets.com/2013/07/mouse-golf.html). With regards to your main page, the reason it’s not appearing there is because your template don’t have any footer. Simply add the following element into your template, exactly where you want the rating to appear at: <b class=”rw-rating-container”></b>
      Let me know if that worked.

       
      Reply ↓
  26. melian23

    Hello i just added this to my blog and i would like to know if there is any way to change his position. I would like it on the right side under the title. Thank you

     
    Reply ↓
  27. Melian

    Thx for the answer but i don’t know how to do that sadly .. i tried to but that code somewhere in my template but it didn’t work. Could you tell me what i need to put and where please. Thank you
    Also i want to ask if this is the rating for google … those stars that appear in google when you search for the adress, i hope you understand what i mean.

     
    Reply ↓
    1. Vova Feldman Post author

      1. The other way to specify the location of the ratings would be adding the following tag into your template, exactly where you would like the ratings to appear:

      You can also read about it in the troubleshooting section.

      2. Currently we do not support Google Rich-Snippets for our Blogger Gadget. But it’s a work in progress and will be released later this year.

       
      Reply ↓
  38. SvenP

    Hi,

    first i added the code to blogger like described. after that i had to copy the following row to my sourcecode:
    only this one worked for me. now i have individual ratings for each post.

    is there already a date for the rich snippet integration with schema.org?
    my blogger blog: http://www.fotografie-tipps-tricks.de/

    thx

     
    Reply ↓
  40. Nishant

    Hi, is this system work for every blogger theme? I have a custom blogger theme and it is not working there. I tried it on sample blogger themes and it worked there..
    you can see my blog – bestptclisting.com , hopefully, you will find some way. I tried both methods and it was not showing for me.

     
    Reply ↓
        1. sandeepsabir

          I also want same. Because, it looks awkward if all the post in the home page have no rating. If there is ratings, then only it is good on home page.

           
          Reply ↓
          1. sandeepsabir

            It is ok, it is working fine. But I am giving a suggestion. If the rating not appear in the home page it is better. because in my home page there is 10 posts and all the posts showing 0 ratings. So it looks awkward.

             
  43. Pieter Smeets

    Thank you! Looking great!
    Got it working in three easy steps.
    Question 1: Until the widget fully loads there is a black square in the top left of the page. Once the widget appears the square disappears. It doesn’t interfere with anything it just looks ugly. Did I do something wrong?
    Question 2: I tried to get multiple instances of the widget in one post via the id code but I cannot get more than 1 to show. My posts generally consist of ten images and I would like visitors to be able to rate all separately. Would that be possible at all?
    Thank you for your assistance in these matters.

     
    Reply ↓
    1. Vova Feldman Post author

      Your post template is using “h-entry” class which is not the standard type. Simply open your template editor and search for “post h-entry”. Then, modify it to “post h-entry entry” (just append the class name entry). Afterwards, move the meta element with itemprop=’postId’ to be the first element of the div you’ve just modified its class name. If that’s not clear you can add my account [vova AT rating-widget DOT com] as a blog admin and I’ll do it for you.

       
      Reply ↓
    1. Vova Feldman Post author

      If you don’t know how to modify your template I can do it for you, but you’ll have to add me [vova AT rating-widget DOT com] to be an admin of your blog first.

       
      Reply ↓
  47. HEBERON

    Hello!
    I like your gadget and I’m trying to add it to my blog but it doesn’t work.
    now add the line “meta” but is still not solved.
    I already followed the troubleshooting instructions but it doesn’t work.
    my blog is http://www.heberon.blogspot.mx
    Thanks for your help!

     
    Reply ↓
    1. Vova Feldman Post author

      I’ve just checked your blogs. Both of them are missing the postId meta element. Please check the troubleshooting section to resolve this issue. Let me know if it worked.

       
      Reply ↓
    1. Vova Feldman Post author

      Thanks for the heads up. It’s not related to the maintenance – it’s a new bug 🙂 Anyways, we are working on solution as we speak. Thanks for your patience.

       
      Reply ↓
      1. Randy

        Vova, I have the same problem, as in my ratings showed up and then they were gone lol hopefuly you can figure it out…love the rating system!!

         
        Reply ↓

  52. Pingback: padd

  53. Pingback: Star Rating for Blogger | Rating-Widget | Blogg...

  55. Mervin

    Im looking to change my template and trying to get the widget to work with the new template (using test blog) but im running into some problems. The widget it showing up under the first few posts but when I click on ‘load more posts’ which is one of the features of my new temp, the widget fails to appear under these posts. Also it doesnt show up on post pages. If you have a look here. http://www.dancehallanthemz.net you’ll see its working fine. But not on my test blog with new temp. http://www.danthemz.blogspot.co.uk. If you can offer any help what so ever id really appreciate that. Thanx in advance

     
    Reply ↓
      1. Maestro

        Hi Ive installed the widget on my test blog but it only shows up on a few posts on the home page. Also the ratings on the homepage and post pages are totally different. Eg if I was to rate a particular post on the homepage it wouldnt show that rating on the post page. I have a custom template. If you can offer any help id really appreciate that. Thanx

         
        Reply ↓
          1. Vova Feldman Post author

            It’s always the same problem. The upper posts have the postId metadata tag, while the lower posts which are included in widgets don’t. Once you’ll add the postId metadata the ratings will appear. Just follow the troubleshooting.

             
          2. Maestro

            Hi thanx for your replay. I have tried including this code but to no avail. Is it possible you can add it for me please. Im at my wits end. I can ad u as a admin. Thanx

             
    1. Λόγιος Ερμής

      There is a small fix as i have noticed, showing now the rating system as it should, but same time it asks to log in with Facebook each time you rate an article….this is a bit annoying as you understand….why is this happening?

       
      Reply ↓
    1. Vova Feldman Post author

      Hi Pam. We did some digging for you and actually find a solution to prevent the ratings from showing on static pages. Open your Blogger’s template editor. There, search for ratingwidget in the code.
      Now, replace the following code:
      with the code wrapped with the required page type criteria:

      Let me know if that worked.

       
      Reply ↓
  60. pam

    is there any way I can add both thumbs up and star ratings to the blogger? right now, it only allows one or the other, not both! i want to show both types of ratings (thumbs and stars) side by side for each blog post.. thanks

     
    Reply ↓
  61. Felipe Huszar

    I cannot manage to make the star rating work at my blog. It used to work until somewhat november, but now, no luck. Could any1 lend me a hand?

    Btw, the widget creator interface is diferent from those from the screenshots!

    Thanks in advance for the help.

    Felipe Huszar

     
    Reply ↓
    1. Vova Feldman Post author

      Your postId meta item is currently outside the post hentry item. Simply modify your template and move right after

      . Let me know if that worked.

       
      Reply ↓
      1. Cristian

        Hi, how can I delete the thumbs up or down from the comments? I’m just interested the gadget star ratings, no thumbs up or down, then, can I delete thumbs from comments?

        Excuse me for my bad language, but, I’m not english

         
        Reply ↓
        1. Vova Feldman Post author

          If you would like to deactivate the comments ratings, simply go to your Blogger’s Layout page and click on the Edit link just below the RatingWidget Gadget. Then, add the following JavaScript line:
          window._rwscHide = true;

          Just before:
          window._rws = window._rws || [{

           
          Reply ↓
  64. Cye82

    I would like to know if this is possible and how i can achieve it please. I would like the widget to appear on my home page with medium size stars and the ‘rate this’ div showing right and then have the same instance of that rating widget in a different style in my floating social bar like u have to the left of this page. Any help is appreciated and thanx for this nice widget.

     
    Reply ↓
  66. Matteo

    Hi, thank you so much for this useful widget but… in my case it simply doens’t work. When i click “Add to blogger” button, blogger open the page “Add page element”, I can select in which blog i want the widget and then I click the blue button “add widget”. But an error page appear, with the specification “Sono stati riscontrati i seguenti errori:
    widget.content: Il campo è obbligatorio e non deve essere lasciato” that it is something as “There are following errors: widget content: fileld required”.

    Thank you for your Help

     
    Reply ↓
    2. Vova Feldman Post author

      We’ve added new instructions to http://rating-widget.com/get/rating/blogger/ in case that “Add to Blogger” automated process don’t work. Here’s the new instructions you should follow on the site:
      If from some reason the the “Add to Blogger” opens a new page without RatingWidget’s logo it means that Blogger’s automated process is temporary broken. Simply click the Show Source Code button above and manually copy the code into the “Edit Content” section of the opened page.

       
      Reply ↓
  69. Matteo

    Thank you for you beautiful widget. I have some questions:

    – how can I remove “We reccomand” section from the widet?
    – only if this in NOT possible… I’m using your widget in 2 different blogs with very different contents… but in “we reccomand” section appear posts from both blog!! So, for example, in my music blog appears “we reccomand: how to loose weight” (my secondo blog is a fitness blog”!! I wish to display posts only from the specific blog.
    – How can i add stars also in the homepage thumbnails?

    Thank you in advance

     
    Reply ↓
    1. Vova Feldman Post author

      Hi Matteo, to remove the recommendations section you’ll have to upgrade to one of the paid versions. In order to correctly use the ratings on different blogs please create two different accounts on this page: http://rating-widget.com/get/rating/blogger/. With regards to your homepage thumbnails, I don’t know how is your blog’s template is structured, but it would probably require some custom template editing. I suggest to use the following links:
      http://rating-widget.com/documentation/
      http://rating-widget.com/get/rating/

       
      Reply ↓
  71. Ali

    HI ,
    I want to put the number of voters in code to appear in Google search results

    for example

    4.50 Stars
    5
    1
    54

     
    Reply ↓
  73. henry

    Hi, I don’t see any “Meta expr content….” in the ” <b:includable id='post' var='post'
    with my blogger template.
    Pls help me.

     
    Reply ↓
    1. Vova Feldman Post author

      I’ve just investigated your Blogger’s code and your posts are missing of a footer component. Simply add the following html element in your post’s template exactly where you want the rating to appear:

      Please let me know if that worked.

       
      Reply ↓
  76. Blake Beckford

    Hi there, I followed all instructions, but cannot get this to work? i am only testing a blog at the moment, but will need to be live along side a web site next week …. any help, much appreciated.

     
    Reply ↓
  79. Kornelino

    I like this widget, thank you for this:) I impatiently wait on the top rated widget and on possibility to clearing all ratings from one post.

     
    Reply ↓
  80. Kliman

    So, the rating widget is very useful:) Could use possibility to display average rating close the post title, but without possibility of vote – as it is on this blog.
    Greetings

     
    Reply ↓
  81. Romek

    I very like this widget. I only would like to know if it will be free forever, or maybe in future you do it with extra charge, like graddit? I like to know it, because I can not pay for it – I don’t earn on my blog and I cant pay for any widget, so if your Rating-Widget is going to be a charge, I have to choose another rating system. I am waiting for answer.
    Greetings – Romek

     
    Reply ↓
    1. Vova Feldman Post author

      We do support Rich-Snippets but it’s NOT included in our Blogger integration due to the complexity of dynamic code modification in Blogger.

       
      Reply ↓
  89. Venus in situ

    Hi! I want a heart like rate. (it´s just a heart to indicate that the person like the post on blogger), how can a do? I can´t search it on internet D:

     
    Reply ↓
  91. Irina

    Seems like working but the star pictures (themes) don’t appear 1. in the preview on the rating-widget website 2. on my blog. I have the lastest version of the Google browser, Win10.
    So eventually I can’t see the pictures, only numbers.

     
    Reply ↓