Rate your Blogger Posts with 5 Star Ratings

Blogger Officially has a Star Ratings Widget, but the Rating Stars provided by Blogger are too small and not so beautiful. Outbrain has come up with an alternate Rating system which can be easily added to any platforms including Blogger.
You can see a Demo of this Ratings Widget at the Bottom of this post.

How to Install Outbrain Star Ratings?

Method 1
  1. Register at the Outbrain Website and Activate your account(check your email after registering)

  2. image
    Select the Recommendation Type (Text / Thumbnail) and Choose Blogger as your Platfrom. Type your blog URL , agree to the Outbrain Terms and Click the Install Button.
  3. You will be prompted to add a Widget to your Blog. Add the Widget and Get back to the Outbrain Website and navigate to My Account > Manage Blogs
  4. If your blog Claim is pending, Click on the Check Now Link
    image
  5. Once you have Claimed your Blog, Go to Settings
    image
  6. These are the Settings that i used
    image
    I have disabled the Recommendations  and Disabled the “Most Popular” Gadget.
Method 2
You wont be able to configure the Widget and you wont be able to hide th Recommendations if you follow this Method.So Follow Method 1 :) This method with some mods can be used to position the ratings gadget and for selectively displaying it.
1. Login to your Blogger Dashboard and go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates”  Option and locate
<p class='post-footer-line post-footer-line-3'>
Or if that is not there then find
<div class='post-footer-line post-footer-line-3'>
Or if that is not there then find
<data:post.body/>
and place the  following code  just below any of these lines[whichever is present in your template].
 <script language='text/javascript'> 
 var OutbrainPermaLink="<data:post.url/>"; 
 var OB_demoMode = false; 
 var OB_Script = true; 
 </script> 
 <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
and Save your template.
2. Now you would be able to See the new Star Ratings Below each of your Blogger Posts

Optional Tweak

If you want to display the Star Ratings on the Post Page only, then Wrap the Ratings code within Conditional Tags like
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <script language='text/javascript'> 
    var OutbrainPermaLink="<data:post.url/>"; 
    var OB_demoMode = false; 
    var OB_Script = true; 
    </script> 
    <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
</b:if>
Also Check out:
1. Official Blogger Star Ratings Widget
2. Reactions on Blogger

Comments

  1. nice plugin bhai

    using in links wali blog

    congrats on getting PR 3 :)
    google PR updated

    ReplyDelete
  2. thanks dear.. congrats for your pr3..

    ReplyDelete
  3. Hey Bro Pls Add My Link To Ur Site ... Let It Be On Both Of Ur Sites Thanx !!!

    ReplyDelete
  4. thanks :-) only white? :-(

    ReplyDelete
  5. Came across this blog from Google search. Really very fast loading and easy to access the posts . The name of this blog suits aptly. Simple tricks . Applied some of the tricks in my blog www.bdcube.blogspot.com.

    ReplyDelete
  6. hi, great blog and great tips. However, do you know a tool like the rater able to rate the comments? And maybe able to show a sorted list with the best comments...
    tks and please gon on with your good job.

    ReplyDelete
  7. @info net

    It is not possible for now..

    ReplyDelete
  8. Phew, I saw this widget a while back but I couldn't find my bookmark anywhere. Thanks.

    ReplyDelete
  9. hello,

    i tried this widget on my blog http://shirdisaibabaexperiences.blogspot.com, it worked for just 5 minutes and then disappeared......i really liked it but now how can i go for that

    ReplyDelete
  10. it is working fine on your blog.. but your recent comments widget is not working properly as you have filled the widget installer with shirdisaibabaexperiences.blogspot.com/ instead of shirdisaibabaexperiences.blogspot.com

    you included an additional / and that is causing the problem..

    ReplyDelete
  11. Hello.
    I have a problem with this plugin. When I put it in my blog, it always show me, that I will be the first, who will rate the post.
    look here please: http://airparo.blogspot.com/
    Can u help me, please?

    ReplyDelete
  12. i tried this widget at my blog --> http://relax-alfahime.blogspot.com/ but it didn't show out. did i miss something?

    ReplyDelete
  13. How to place the ratings plugin below the bookmarks plug-in?

    ReplyDelete
  14. i don't get how you people aren't annoyed by those ads appearing under the ratings. it's one of the main reasons why i'm not using this widget on my blog.

    ReplyDelete
  15. cool..and thanks for the info.
    ------------
    Cool recipes at hand:
    eatfoodrecipe.blogspot.com

    ReplyDelete
  16. I agree with 'Anonymous' I was extremely annoyed by the ads. Bearing in mind my website uses Google Adscense it made it look very clutted so I had to remove it.

    ReplyDelete
  17. amazing rating system thanks for sharing

    ReplyDelete
  18. A very desiring for all blogger.. Come and see my blogspot

    ReplyDelete
  19. i see the ads but i dont see the stars to rate my blog.......

    ReplyDelete
  20. HI I am coming new to blogger help ok friends.

    ReplyDelete
  21. Whoa this is pretty cool. I was seriously un aware of the fact that blogger.co was almost as diverse as wordpress. I'm gonna look into setting up a blogger.com address and play around with it.

    ReplyDelete
  22. I would like to thank you for sharing with us. All the best for the future.

    ReplyDelete
  23. Thanks for this great tutorial! I've always wanted a simple rating system for my blog.

    Anyways, I wanted to let you know that you are still able to customize the widget while still using Method 2 detailed in your article. This is what I did:

    1. Create Outbrain account and insert widget code in blog under Page Element section.
    2. Configure widget properties in Outbrain account (I removed everything except for just the rating stars).
    3. Copy the code under Page Elements to notepad and remove widget.
    4. In template editing mode, paste the code under data:post.body. Because I wanted the widget to appear only in Post Pages, I copied your optional code and wrapped it around the original code. Pasting the code under div class='post-footer-line post-footer-line-3' still allowed the widget to appear but for some reason it would still appear on my Home Page even after wrapping the code.

    If you visit my blog, I only have the star rating system being displayed and it's appearing only on my post pages! Thanks for tutorial, especially on displaying the code on how make the widget only appear in the post pages!

    ReplyDelete
  24. @AnotherWindowsBlog - yup you are right if you add the outbrain identifier to the code in method1, then it will surely work.

    ReplyDelete
  25. How can I put these stars not in the end of the post, but under the title? Please help.

    ReplyDelete
  26. this is great , thankx - it worked for me

    ReplyDelete
  27. Nice! it worked on my blog! woooo give me some 5 stars! :))
    Thanks bloggerplugins! more power
    my blog is
    http://tricks-4-free.blogspot.com

    ReplyDelete
  28. i can´t activate my account there. Seems a trick . They never send me the activation code :/

    ReplyDelete
  29. I would like to thank you for sharing with us
    this is great , thankx - it worked for me

    ReplyDelete
  30. It's always saying CHECK NOW. I clicked this many times but still the same. They already installed the code in my blogger but still Pending. Help

    ReplyDelete
  31. Is there any SEO benefit for these ratings?

    ReplyDelete
  32. could any one help me to put visits counter for each post to my blog ?

    ReplyDelete
  33. With the star rating show up in Google search engine also ? Like GD star rating does ?

    ReplyDelete
  34. @Jennifer - nope, neither this nor the official ratings plugin provided by Google will come up in Google Search. We will have to wait for Blogger to improve it's rating system such that it uses Valid Rich Text Markup. Till then you have not choice :-)

    By the way if you are someone who writes reviews of products, then this post might be useful for you:
    http://www.bloggerplugins.org/2012/01/review-markup-for-blogger.html

    ReplyDelete
  35. *ratings plugin provided by Blogger

    ReplyDelete
  36. Thank for. The reply.... this is what I. Was looking for. I. Will install a star rating then. Try this.

    Thank you soo much

    ReplyDelete
  37. Hello, Outbrain has removed rating stars

    ReplyDelete

Post a Comment