Sunday, June 29, 2008 | 38 comments Categories: , ,

Add Star Ratings to Blogger posts

This was one of the mistakenly added feature around a month ago when the Blogger team did not intend to sneak it out. But now Blogger has added Star Ratings for each of your blog posts and you can use them at your blogs. The basic reason to add this feature beneath your blog posts is to show the popularity of the post.

This was one of the features added by Blogger in its 26 June updates, and is also available through blogger in draft. The rating system consists of two parts one part displays the average ratings of the post till now and the second one has the feature through which you can add your rating. Try it an the bottom of this post :)

How To Install Star Rating System For Blogger:

For Default Template Users:
The Installation is pretty simple for those who use the default templates of Blogger.Just follow these instructions to get it working.
> Log in to Blogger in Draft
> Go to Layouts > Page Elements (it is default when you open Layouts tab)
> Click on the 'Edit' Button for the 'blog post' page element
> Select the Show Star Rating box, and align it where you want to place it, using the arrange items preview.
> Save and You are done :)
That was a breeze, Isn't it?

But there can be a problem if you are using Custom templates, wherein the Star ratings won't show at all? But not to worry.

IF YOU ARE USING CUSTOM BLOGGER TEMPLATES:

> Perform the above steps.
> Go to Layouts > Edit HTML, and expand widget templates.
> Search for this code : <data:post.body/>
Below this search for <div class='postinfo'>
Paste this code just below the above found code :
<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if> </div>

> Now search for this code: <b:include name='feedLinks'/>
Place this Code just below the above found code:
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

The code should look somewhat like this:
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>

> Save the template and you are done :)

You have the Star Ratings enabled for your blog now. You can Rate this post too below. If you have any queries feel free to ask.

You May also check out - How to add Inline Comment Form to Blogger

Do Comment and To keep yourself updated about Technology Subscribe to our feed

What Next ?

Get updates in your mailbox

Rate this Post - DiggIt!Digg it Del.icio.usBookmark This Page
Leave a Reply

38 comments:

Tried your hack, but it didnt work!

Could you help me out?

My email:

ujsceara@gmail.com

My blog:

ujsceara.blogspot.com

Written by : David Aragon on : Jul 4, 2008, 5:44:00 AM  

David,
I checked your blog, and looked to me that you haven't placed the second code properly onto your blog. I have mailed you regarding how to correct this.

help please?

it doesn't work for me, i'm confused..

blog: www.gotta-shine.blogspot.com

please get back to me on my blog, just leave a comment on any page. it would be appreciate alot.

thank you

sorry, my mistake. it did work!! thank you!!

the star ratings don't show on the main page, but that's because i've enabled the expandable post hack so it's fine.

thank you!

Nevermind, Glad it worked for you :)

Hello
If I do not have ''div class='postinfo'''
in my template, what else should I look for
Thank You
:)

Hi Ptiza,
Welcome to CorpseofAttic.
Regarding your problem:
There is no hard and fast rule for the code to be placed. Just find data:post.body/. This depicts the Content of your Blog post. So if you place the code just after this line, Star Ratings would Appear just after the Blog Post.

So you can actually customize it according to your design theme, and place it anywhere it looks good :)
Happy Blogging

Cheers :))

Nevermind :) My pleasure Ptiza.

Well frankly I'm of the opinion to keep the blog as simple and plain as u can. Adding features although might look cool to you but to new visitors it looks a lot of clutter.

Just be with the KISS rule and go with bare necessities.

Best
Lucy How

I agree Lucy, but few people like the frills ;)

works, thanks,, note: "my template too complex"

Written by : Anonymous on : Jan 28, 2009, 7:27:00 AM  

Nice work and nice share, thanks

You can't search or arrange posts based on star rating so I don't the a point in installing this.

Hi, The star rating isn't showing up for me. Here is my test blog where I tried it out: http://cuntmagtesting.blogspot.com/

Ignore the appearance; it's just a test blog so I don't break my working blog. My actual blog is here, if you're curious: http://dailycuntpunch.blogspot.com/

Any advice would be appreciated. Thanks.

I think it kind of nice. It lets the reader give a way to leave a bad opinion without being 'sassy. It also should let you know what type of posts and comments are reaching your reader. Maybe they prefer long articles (not me) or just short usefull blurps. Anyway, if it used honestly, you can get a better idea of what 'works' or not.

i hve added the code... but i havn't get the star rating.. can u plz help in this issue.
my blog is http://chennaipoint.blogspot.com

Me too. My template doesnt sport the postinfo line.

it is showing nothing to me
http://templates-widgets-softwares.blogspot.com/

Great by using this feature will make our blog more efficient and effective. I will try it.

Is rating is based on per ip - per posts?
What is the best placement for this widget, which could make the visitor to read the content with lots of interest.

Help will be appreciated.

Great, I will try in my blog.

thanks man its working in my blogger but one problem is there ,its see near the title post in right side i want to move it on bottom right side

whats the procedure

my blog is

http://dweaponsclub.blogspot.com/

Written by : Anonymous on : Nov 13, 2009, 10:00:00 PM  

this is a nice add on by google.

That's nice to read you blog as you continually provide great contents not seen on other site. Keep it up your site visitors will love your site a lot.

I have spent quite some time to eventually stumble on your blog post about this topic. Great work.

Hi Gaurav,

Thanks for the nice add-on. Works fine in home page. But if I open any particular blog, then in resulting page, the rating is displayed twice!

http://sunilpadiyar.blogspot.com/
is my blog.

Thanks a lot in advance!

Try http://www.addrating.com. They have a great FREE rating widget, I have tried it for http://innovatwwithgadgets.com

Not work

this not work in my blog plz check and tell me

my id rk.kash26@gmail.com

my blog

hdmegavideomovie.com

Written by : Anonymous on : Aug 10, 2011, 10:08:00 AM  

> thanks for sharing..but this not work in my blog, why..? I have did all of you tell about..

Consider 3d-party services where you have more flexibility, like this one: http://all-rate.appspot.com/eng

Written by : Gene on : Nov 28, 2011, 2:42:00 AM  

Hey man, I did exactly what you said, but its not seeming to work, i'm really trying to get my blog up and running to its full potential, if you could help me out and take a look at my code that would be much appreciated, thanks.
http://beatasaurusrex.blogspot.com/

> BeatasaurusRex
Well, I see you figured out how to use a rating widget, so what's exactly the problem? :)
I see also that some of your posts have more than one rating. Are you manually adding it to each post?

Written by : Gene on : Dec 6, 2011, 8:47:00 AM  

great, works like a charm :)

Can't find those options Layout>edit html expand widgets. Plus is there a way to customize the image instead of a star? Thanks and appreciate your help.

It is difficult to implement it. The simplest method is to get the html rating code from www.ratingcode.com and paste it to rate anything on blog.

not working, though I've checked star rating , but it didn't display on my blog post.
I use default template : Simple

it works :D

thanks ^_^

Post a Comment

Use Real names , No Spam or Anonymous Comments (Commenting Policy)
All Comments are moderated