Rating widget options

Rating widgets are a great way to get instant reader feedback on your blog posts, webpages, photos, music or any other content that you create. We provide two main types of rating:

Star Rating Widget — The star rating allows visitors to rate your content on a scale of 1-5.

Nero Rating Widget — The nero rating offers a simple, “thumbs up” / “thumbs down” rating.

Create a new rating widget

You can create a rating widget to add a star or nero rating to your site. You can also customize your rating by replacing the star with any image you like.

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 Edit Ratings 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:

star-red-sml

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 used for the hover state, when a person moves their mouse over the rating, it uses the stars in the right column. You can also use just one column of stars if you do not want to have a hover state.

Let’s make one with the Polldaddy favicon. The Polldaddy favicon looks like this:

pd-ico

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:

pd_rating

The resulting rating widget will look like this…

Note that you may experience a blinking effect if your image is hosted on Dropbox.

Installing your rating

To place your new rating widget on your website, hover over the title of your new widget in your dashboard and click on Collect Votes:

dashboard-rating-edit

If you have a WordPress.com site, you can embed the rating using the WordPress.com shortcode. Click on the WordPress option, copy the shortcode we supply, paste it into the location you’d like to see it on your website:

ratings-share-wordpress

To embed using the JavaScript option, click on it, copy the JavaScript code we supply, paste it into the location you’d like to see it on your website:

ratings-share-javascript

Use variables to tell ratings apart

In the JavaScript code, there are four parameters called id, unique_id, title, and permalink in the settings variable:

<div id="pd_rating_holder_39"></div>;
<script language="javascript">
PDRTJS_settings_39 = {
"id" : "39",
"unique_id" : "default",
"title" : "",
"permalink" : ""
}; </script>
<script language="javascript" src="http://i.polldaddy.com/ratings/rating.js"></script>

The JavaScript code works fine as it is, but to get the full effect please consider adding values to the unique_id, title, and permalink parameters. Note that the id parameter must not be edited.

  • 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. http://example.com/product.php?id=1229

Installing your rating multiple times on same page

Installing your rating widget multiple times on the same page requires an extra parameter: item_id. Here’s how you’d add that extra parameter, using our example from above:

<div id='pd_rating_holder_39_top'></div>
<script language='javascript'>
PDRTJS_settings_39_top = {
'id' : '39',
'unique_id' : '39_top',
'title' : '',
'permalink' : '',
'item_id' : '_top'
}; </script>
<div id='pd_rating_holder_39_bottom'></div>
<script language='javascript'>
PDRTJS_settings_39_bottom = {
'id' : '39',
'unique_id' : '39_bottom',
'title' : '',
'permalink' : '',
'item_id' : '_bottom'
}; </script>
<script language='javascript' src='http://i.polldaddy.com/ratings/rating.js'></script>

In the code above, notice that we’ve used the item ids _top and _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 to your page. Also, the value of item_id can be any value. Each item_id value will be used as a suffix, or an appendage to parts of the code. You need to add this suffix to the container id attribute, the rating JavaScript variable name, and the unique_id value to allow us to diferentiate the rating in the reports.

Polldaddy Tweets
%d bloggers like this: