Saturday, August 15, 2009

js-kit-rating widgets Install ?

How do I reset ratings/scores on a page?

You cannot reset an existing rating or score counter. However, you can assign a uniq attribute with a unique value to the ratings on a page, and this will create a different instance of ratings/scores:

<div class="js-kit-rating" uniq="/unique/new/uniq/"></div>

My item has received plenty of ratings/scores, but it does not show up in the Top or Hot tabs under the (i) button. What is wrong?

To participate in mini-navigator's (the "(i) button") output, the Ratings widget needs to have all uniq, permalink and title attributes to be defined:

<div class="js-kit-rating" uniq="/unique/item/id/" permalink="" title="My Item's Title"></div>

How can I get Ratings working on Blogger?

The process is as follows:

  1. SAVE AND BACK UP YOUR TEMPLATE (Customize -> Layout -> Edit HTML -> Download Full Template).
  2. Under "Edit Template" subtitle place a checkmark against "Expand Widget Templates".
  3. In the template locate the <div class="post-header-line-1"/> or similiar and insert the following code right after it (and before <div class="post-body">)<div style="float:left; margin-right:3px;"></div>

    <div class="js-kit-rating" expr:uniq="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title">


  4. Locate the </body> element in the template and add the following before it:

    <script src=""></script>

How can I get Ratings working on Classic Blogger?

You should place the following code:

<div class="js-kit-rating" uniq="/<$BlogItemNumber$>" permalink="" title="<$BlogItemTitle$>"></div>

<script src=""></script>

after the title code:

<div class="head"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>

How can I get Ratings working on WordPress Server?

For WordPress server, locate your template (index.php) in your themes directory. Edit index.php and add the following code after "class=post":

<div class="js-kit-rating" style="margin: 0px"

permalink="<?php the_permalink(); ?>"

uniq="/<?php the_title(); ?>"

title="<?php the_title(); ?>">


Next edit footer.php, locate </body> in the template and add the following before it:

<script src=""></script>

Same ratings/scores on different pages

If you want to rate or score an object which can appear on multiple pages (an item in your shopping cart or a blog article), put its unique permanent uniq on your site into the uniq attribute:

<div class="js-kit-rating" uniq="/blogEntry42"></div>

<script src=""></script>

Multiple instances of ratings and/or scores on one page

You can rate multiple items on the same page. Just put the Ratings

's with unique uniq attributes where the ratings or scores should appear:

<div class="js-kit-rating" uniq="/shopping/item/1"></div>

<div class="js-kit-rating" uniq="/shopping/item/2"></div>

<div class="js-kit-rating" uniq="/shopping/item/3" view="score"></div>

<div class="js-kit-rating" uniq="/shopping/item/4" view="score"></div>

... rest of html code ...

<script src=""></script>

Using your own star graphics for ratings

In the "combo" and "split" modes you can replace starlet images with your own art by using imageurl and imagesize attributes. The URL specified in the imageurl attribute should contain five pictures:

  • star.png,
  • star-half.png,
  • user.png,
  • user-half.png, and
  • gray.png

The first two are for community rating icons (), the following two are for the user's own rating (), and the last one is for a placeholder .

For example we have a set of mirrored stars at To use them on our website we would add the following code to a page:

<div class="js-kit-rating"



<script src=""></script>

You can see the result on the left. Please feel free to use our mirrored stars or create your unique rating graphics.

Changing the size of thumbnails ("score" view)

You can choose from three thumb sizes: "small" (10px X 12px), "normal" (12px X 15px) and "large" (15px X 18px).

<div class="js-kit-rating" view="score" thumbsize="small"></div>

<div class="js-kit-rating" view="score" thumbsize="normal"></div>

<div class="js-kit-rating" view="score" thumbsize="large"></div>

<script src=""></script>

The default value is "normal". You can also replace the standard graphics with your own design, as described in the next tip.

Using your own thumb-up/down graphics

In the "score" view mode you can replace the standard thumbnail graphics with your own design by using imageurl and imagesize attributes.

<div class="js-kit-rating" view="score" imageurl="" imagesize="16x15"></div>

<script src=""></script>

Note: The imageurl attribute needs to point to a single image file containing all four icons in the correct order. The best way to create it is by using our Thumbnail Generator. Use it to upload two or four replacement images, and the Thumbnail Generator will not only generate a compliant image file in PNG format, but also construct a

tag with the corresponding imageurl and imagesize attributes.

Displaying top rated/scored pages

Put the "Top rated topics" on your page by using the following code:

<div class="js-kit-top" title="Top rated topics"></div>

<script src=""></script>

For further details see the Navigator service.

Integrating Ratings with Comments

See how Ratings widget can integrate with JS-Kit's Comments widget.

Use a permanent URL for each object (blog post, article, etc.)

Use permalinks for articles and posts which can be addressed on your site by multiple alternative URLs. By specifying the permalink attribute in the

element associated with the object you ensure that Navigator service collects the data correcty and links to the existing URLs.

<div class="js-kit-ratings" title="Cool Stuff" permalink=""></div>

<script src=""></script>

Note: this attribute should not be confused with the unique attribute but used in conjunction with it.

Display custom titles in Navigator

Navigator's Top and Hot lists show entries by displaying their actual uniqs on your site or their permanent URLs (if specified with the permalink attribute). If you would like a more readable title for your objects, you can use the title attribute.

<div class="js-kit-rating" title="My Title" permalink=""></div>

<script src=""></script>

How do I hide the (i) button?

You should set "menu" attribute to "no":

<div class="js-kit-rating" menu="no"></div>

<script src=""></script>

Stumble Delicious Technorati Twitter Facebook
If you enjoyed this post, make sure you subscribe as an Reader!


Post a Comment

← Newer Post Older Post → Home

Recent Posts

Recent Comments

Follow Me - Advertise your site at! Submit your site and get tons of traffic! - Advertise your site at! Submit your site and get tons of traffic!