Star rating system on your blog

How to install star rating widget to your blog or web site? You will find guide in this article. First we will take a look at free star rating and recommendation system outbrain.com. Outbrain.com is a content ranking and recommendation widget for blogs, RSS, magazines and news. Second, we will show how to implement outbrain star rating on blogger (this widget can be installed on the other blog platforms too). In the third section you can learn about blogger reactions feature and blogger star rating feature which exists only in draft mode.

Star rating widget - outbrain

One option is to use star rating and recommendation widget which you can find on web address www.outbrain.com. Outbrain star rating widget can be easily installed to different blog platforms (Typepad, Blogger, Wordpress, Drupal) and to FeedBurner RSS feed. Star rating system is very straightforward to install on blog. In second section you can find example of installing outbrain rating system on blogger. It can be installed on web sites too, by embeding generic java-script code on your site.

Outbrain star rating widget loook like this:

Outbrain star rating widget is composed of 5 star rating part and recommendations part. In star rating part you can see how many visitors rated page and average rating. In recommendations part there are personalized recommended links selected by outbrain rating system. You can exclude recommendations if you like.

If you are registered to Outbrain rating system service you can track rating of every post in your blog:

Installing Outbrain rating widget on blogger

• Register on www.outbrain.com (you can install rating system without Registering on outbrain site but then you will not have blog reports)


• Sign in to outbrain site and click on "Claim your blog"


• Enter blog URL, chose Yes for Install rating widget, Select your blogger platform and select language
  
  
  


• On Add Page Element click on Add Widget button and your blogspot blog have outbrain rating star widget on every post

Maybe you will need uninstall instructions for outbrain star rating widget for blogger:

• From your Dashboard:
  Click Layout >> Edit (on Ratings by Outbrain) >> Remove Page Element

if ratings still appear in blogger


• find and remove code :
  
  

  <b:widget title="Ratings by outbrain" type="HTML">



This code can be found on the layout tab in the "Edit html" section. Remove this code.

Blogger star rating and reactions feature

Blogger have its own five star rating feature. This feature exists only in blogger drat mode. To use blogger draft mode you should login on web address http://draft.blogger.com.

This feature didn't work well on my blog. There was problem with loading, one time it worked and another time did not.

Guide to use blogger star rating feature:

• log in blogger draft mode


• click Layout --> Page Elements in "Blog Posts" click on Edit
  
  



• in Configure Blog Posts page check "Show Star Ratings" checkbox
  
  
  

Blogger reactions feature

Blogger also have reaction feature. With this feature visitors can check one of offered reactions and blog owner have feedback.

Instructions for installing blogger reactions widget:

• click Layout --> Page Elements in "Blog Posts" click on Edit


• in Configure Blog Posts page check "Reactions" checkbox (with click on Edit you can enter your preferred blog reactions separated by coma, for example on picture blog reactions are : bad, good, excellent)
  
  


• click save and now you have reactions widget on every post

My experience with reactions feature is positive. It works very good without problems, while blogger star rating feature have difficulties and is still in draft mode.

jQuery image preview

Here you will learn how to dynamically preview image on your web page with help of jQuery. The image preview shows up when user put mouse pointer over the link. After mouse pointer lost focus on link, image preview disappear. Take a look at image preview demo to better understand what we call web image preview.

Demo of jQuery image preview

• The Sunset

When visitors cursor hovering over "The sunset" link, an image preview shows up. After mouse pointer is moved off, image preview disappear. Now we will discuss how to install preview image on your page or blog (there are more javascript effect tutorials on my blog).

On this blog you can find how to alternate image after onclik event.

For those interested in changing image when onclick event occurs with jQuery I leave the link.

Guide to implement jQuery image preview on your page

• Your page should point to external jquery library and to imgpreview plugin
  

  <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
  
  <script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" type="text/javascript"></script>

• We need some HTML code, one unordered list with one list item. This list item must have link to image
  

  <ul id="first">
  <li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a>
  </li>
  </ul>

• Add jQuery code which instruct that when mouse pointer is over unordered list (ul) with id "first", method imgPreview is called. This method shows the image.
  

  <script type="text/javascript">
  $(document).ready(function(){
  $('ul#first a').imgPreview({
  imgCSS: { width: 100 }
  });
  });
  </script>

  
  
  
  • imgCSS: { width: 100 } - width is determined.
  
  
• And that's it, demo works!!!

Sample code of HTML page for image preview

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" 

type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$('ul#first a').imgPreview({
imgCSS: { width: 100 }
});
});
</script>
</head>

<body>
<ul id="first">
<li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a></li>
</ul>

</body>
</html>

To find more about imgPreview plugin visit page of it's creator James Padolsey.


Preview image for blogspot / blogger users

Blogger users should write all jscript code in one line or can call external javascript file .

For more information you can take a look at :

• jQuery in blogger post
or
• Javascript in external file

Sample of image preview working code in blogspot (in one line to avoid <br> tags):

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script><script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){$('ul#first a').imgPreview({imgCSS: { width: 100 }});});</script><ul id="first"><li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a></li></ul>