Add SELECT Manually to Web Pages

Summary

Here is a description of how to manually add SELECT rating facilities to your own web pages.

You can also add SELECT automatically to your web pages using the AddSELECT program.

Example of part of a Web Page with SELECT added:

Links which will ask people to rate when they click on them (try and click on one of them):	Rating of this web page:
Arctic Life in Greenland
Environmental Threats to Arctic Life
Example of an invitation to rate a web page in the web page itself:
(Awful) (Mediocre) (Average) (Good) (Great)

Example of a simple web page before adding SELECT and after adding SELECT.

(A) Invite People to Rate Your Links

Make a backup copy of your web page.

Add the following code in the <HEAD> of the HTML page:

<SCRIPT type="text/JavaScript">

                function rateWindow(server, url, title, service) {

                r = 'http://'+server+'/select/rate?a=srate&s='+service+'&uri='+escape(url)

                +'&ti='+escape(title);

                rW = window.open(r,'rateWindow','toolbar=no,scrollbars=yes,resizable=yes,width=600,height=150');

                rW.focus();

                }

                </SCRIPT>

Change all or some links in your web page as follows:

Example of link before adding SELECT show-rating-on-links:

<a href="http://foo.bar/mylink1.html">See 
                this</a>

The same link after adding SELECT show-rating-on-links:

<a href="http://foo.bar/mylink1.html" 
                onClick="javascript:rateWindow('you.rated.it', 'http://foo.bar/mylink1.html', 
                'See this', 'general');">See this</a>

Alternative: Do this automatically using the AddSELECT program

(B) Show Ratings on your own Links

Make a backup copy of your web page.

Change all or some links in your web page as follows:

Example of link before adding SELECT:

<a href="http://foo.bar/mylink1.html">See 
                this</a>

The same link after adding SELECT:

See this</a> &nbsp;

                <img src="http://we.rated.it/select/rate?a=get&cs=general/contents&icon=dice&uri=http://foo.bar/mylink1.html" 
                

                width=15 height=15 align="absmiddle" 

                lowsrc="http://cmc.dsv.su.se/select/white1x1.gif" alt="Rating">

Alternative: Do this automatically using the AddSELECT program.

(C) Invite People to Rate Your Pages

Make a backup copy of your web page.

Add, at some suitable place in yor web page, the following code:

<!-- start of rate itself code -->

                <div align=center><hr width="75%">

                <font face="Verdana,Arial,sans-serif,Geneva,Helvetica" 
                size=3><b>Give your own rating of the quality of this 
                web page:</b>

                </font><br><font face="Verdana,Arial,sans-serif,Geneva,Helvetica" 
                size="2">

                <a href=""

                onClick='

                window.open("http://you.rated.it/select/rate?a=srate2&contents=1.0&service=general&uri=" 
                + document.URL, "displayWindow", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=200"); 
                return false'>(Awful)

                <img alt="Awful!" width=15 height=15 vspace=2 align=middle 
                border=0

                name=dice1 src="http://we.rated.it/SELECT/icons/dice1.gif">

                </a>&nbsp;&nbsp;

                <a href=""

                onClick='

                window.open("http://you.rated.it/select/rate?a=srate2&contents=3.0&service=general&uri=" 
                + document.URL, "displayWindow", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=200"); 
                return false'>(Mediocre)

                <img alt="Mediocre" width=15 height=15 vspace=2 align=middle 
                border=0

                name=dice2 src="http://we.rated.it/SELECT/icons/dice2.gif">

                </a>&nbsp;&nbsp;

                <a href=""

                onClick='

                window.open("http://you.rated.it/select/rate?a=srate2&contents=5.0&service=general&uri=" 
                + document.URL, "displayWindow", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=200"); 
                return false'>(Average)

                <img alt="OK" width=15 height=15 vspace=2 align=middle 
                border=0

                name=dice3 src="http://we.rated.it/SELECT/icons/dice3.gif">

                </a>&nbsp;

                <a href=""

                onClick='

                window.open("http://you.rated.it/select/rate?a=srate2&contents=7.0&service=general&uri=" 
                + document.URL,

                "displayWindow", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=200"); 
                return false'>(Good)

                <img alt="Good" width=15 height=15 vspace=2 align=middle 
                border=0

                name=dice4 src="http://we.rated.it/SELECT/icons/dice4.gif">

                </a>&nbsp;&nbsp;

                <a href=""

                onClick='

                window.open("http://you.rated.it/select/rate?a=srate2&contents=9.0&service=general&uri=" 
                + document.URL, "displayWindow", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=200"); 
                return false'>(Great)

                <img alt="Superior" width=15 height=15 vspace=2 align=middle 
                border=0

                name=dice5 src="http://we.rated.it/SELECT/icons/dice5.gif">

                </a>&nbsp;

                </font></div>

                <!-- end of rate itself code -->

Alternative: Do this automatically using the AddSELECT program.

Choice of Rating Icons

When using SELECT, you can choose between three types of rating icons:

Icon	Size	Name	Description
	15x15 pixels	dice	Small, unobtrusive dice.
	34x6 pixels	startrans	Small, unobtrusive row of stars.
	64x12 pixels	amazonstar	Large, more visible row of stars.

Each rating icon is provided in three shadings, where a darker shading indicates that the rating is based on the ratings done by more people.

The code examples on this page will use the dice icons. To use "startrans" or "amazonstar" simply change the string "dice" to "startrans" or "amazonstar" everywhere in the code examples above.

MTH/DSV Select Home Page SZTAKI Select Home Page PVL Select Home Page