Rating widgets are a great way to get instant reader feedback on your blog posts, web pages, photos, music or any other content that you create. We provide two main types of ratings:
Star Rating Widget — The star rating allows visitors to rate your content on a scale of 1 to 5.
Nero Rating Widget — The Nero rating offers a simple “thumbs up” or “thumbs down” rating.
Rating Embed Code
This code should be added to the end of your page, after any ratings on the page.
Setting a custom image for your rating
You can override the star image for any rating by specifying the URL of your new image on the Rating Type page.
The rating uses a single image for all states. You must create your image in the same dimensions as the size you choose for your rating. Replacement images for small stars are 16px, medium stars are 20px and large stars are 24px. If you look at the image for the red star below you will see how they’re used to convey different ratings:
The stars above are all in one image. The stars in the left column are used for displaying the rating and the stars in the right column and are used when a person moves their mouse over the rating. You can also use just one column of stars if you’d like.
As an example, we can make one with the Crowdsignal favicon. The Crowdsignal favicon looks like this:
Now we need to make a full rating, a half rating and an “off” rating all in the one image. The resulting image will be 32px wide and 48px high like the sample below:
The resulting rating widget will look like this:
Note: You may experience a blinking effect if your image is hosted on Dropbox.
Use variables to tell ratings apart
- unique_id (Mandatory)
This parameter is very important. Let’s say you have an online store and you want to use just one rating widget to rate all of the products in your store. The unique id field is the parameter that will distinguish between different products, so in here you could place the product id or something unique to the product you want to rate. Similarly, if you wanted to track different ratings of blogs posts you would place something like the blog post id in this value. Ideally you would generate this unique_id in your code. If you don’t put something unique in here all products in your shop would have the same rating. e.g.,
"unique_id" : "product1229"
- Title (Optional)
To help make your reports easier to understand, you can add a title to the rating. This should be linked to the unique_id above. So using the example of the online store, you could place the title of the product you are rating in here. e.g.,
"title" : "4S iPhone leather cover"
- Permalink (Optional)
Again to help make your reports easier to understand, you can place a link to the content you are rating here. Again using the example of the online store you could place a link to that particular product page here. e.g.
Installing your rating multiple times on same page
Installing your rating widget multiple times on the same page requires an extra parameter: item_id. You only need to load rating.js once. As an example, here’s how you’d add that extra parameter on a page about ice-cream.
The page will have ratings above and below pictures of delicious ice-cream, so we need to add ratings for each flavour at the top and the bottom. The results page for this rating will show how people clicked on the individual flavours in each area (top and bottom) of the page.
In the code above, notice that we’ve used the item ids [flavour]_top and [flavour]_bottom. You can have as many instances of the rating on the same page as you like, as long as the item_id values are unique on your page. The item_id can be any text you like as long as it’s unique.
The report for this rating will look like this:
Please note: you only need to load rating.js once, and it should be loaded after all the ratings at the end of the page.