WOT widget

Adding ratings to your website or blog

Originally discussed on the WOT Blog published on Thu 05 Jun 2008 by Sami

Some of you may have noticed the rating symbols shown next to external links on our website and the small tooltip that links to the target site's reputation scorecard. Now you can add these to your website as well using the small web widget we created.

To add the widget to your website, simply insert the following snippet to your site's source code and let the widget take care of the rest:

<script type="text/javascript"
src="http://api.mywot.com/widgets/ratings.js"></script>

We have also included some options that let you customize where and how the ratings are displayed. This makes it possible to add ratings only to parts of your site, such as links posted in blog comments, for example.

Controlling where ratings are shown

Ratings are added to all external links on the page unless instructed otherwise. You can limit the ratings to only some of the links by defining one or more options as follows:

var wot_rating_options = {
option_1: value,
...
option_N: value
};

Widget options:

selector

Defines a CSS selector. The widget adds ratings for any link that matches this selector.

Example: If your page has a HTML element with an id attribute "comments" and you want to limit ratings only to links inside that element, set the selector option as follows:

var wot_rating_options = {
selector: "#comments a[href]"
};

exclude

Defines a regular expression. Ratings are not shown for links where the hostname matches this expression.

Example: If your page has links to the domain example.com and you don't want to show ratings for these links, set the exclude option as follows:

var wot_rating_options = {
exclude: /^(.+\.)*example\.com$/i
};

exclass

Defines an element class. Ratings are not shown for links that belong to this class. This option has the default value "wot-exclude".

Example: If your page has links matching the selector option above who belong to the class "norating" and you don't want to show ratings for them, set the exclass option as follows:

var wot_rating_options = {
exclass: "norating"
};

exchildren

Defines a CSS selector. If the link matching the selector option has one or more child elements matching this selector, ratings are not shown for the link. This option has the default value "img", which removes ratings from image links.

Example: If you don't want to show ratings for links that have a child element of type img or div, set the exchildren option as follows:

var wot_rating_options = {
exchildren: "img, div"
};

updateinterval

Defines an interval in milliseconds. If your page has dynamically added links and you want ratings to appear for them too, you'll need to define how often the widget should look for new links and update the ratings.

Example: If you want the widget to check for missing ratings once a second, set the updateinterval option as follows:

var wot_rating_options = {
updateinterval: 1000
};

Example: Blogger

We created a sample blog that shows how to add the widget to your Blogger pages.

1. Click the "Customize" link on your blog. 2. Click the "Edit HTML" link on the Layout page. 3. Scroll down the "Edit Template" field until you find the </head> tag. 4. Copy and paste the following snippet just before the tag:

<script type="text/javascript">
var wot_rating_options = {
selector: ".post-body a[href], .comment-body a[href]"
};
</script>
<script type="text/javascript"
src="http://api.mywot.com/widgets/ratings.js"></script>

This adds ratings to your blog posts and user comments. If you only want to show them for user comments, set the selector option to ".comment-body a[href]".

Questions?

If you have any questions about using the widget on your website, post a comment on the blog article.