qLabel: Usage

This is a step-by-step guide on how to use qLabel.

Step 1: Install qLabel (optional)

Download all necessary JavaScript libraries and upload them to your own web server, if you don't have them yet. Here is the list of JavaScript libraries you will need:

You can skip this step by loading the libraries directly from the Web.

Step 2: Load the scripts

In the header of your HTML file, add the following lines in order to load the libraries listed in Step 1:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://rdfquery.googlecode.com/svn/tags/v1.0/jquery.rdf.js"></script>
<script src="https://raw.githubusercontent.com/googleknowledge/qlabel/master/src/jquery.qlabel.js"></script>

You can point to the local files instead in case you have set them up in Step 1.

Step 3: Annotate elements with URIs

In your website, annotate the text that refers to an object with the URI for the object. The URI has to be resolvable, provide Linked Data, and contain labels in the languages you are interested in. For more background on this topic, read Tim Berners-Lee's introduction to Linked Data.

Find the URI for the object you are looking for. You can use any URI from the Semantic Web. Two easy searchable and quite comprehensive sources of URIs are Wikidata and Freebase.

Once you have the URI, annotate the element with the given text (if there is no element, put the text into one), e.g. like this:

<span class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q42">Douglas Adams</span>

Do this for all mentions in the text that you want to have translated. The demos offer a few examples of structured data that is easy translatable in many languages.

(The class is not strictly required for annotation, but is used by qLabel to find all elements that should be translated.)

Step 4: Let the user choose the language

You will need to enable the reader of your site to switch the language.

You could tell the user to type the following command into the JavaScript console: $.qLabel.switchLanguage('en')

But usually you will provide an element that fires this command based on some user interaction, e.g. a text saying English with an onclick event as for example in the following line of HTML:

<div onclick="$.qLabel.switchLanguage('en')">English</div>

A much more comprehensive solution is the Universal Language Selector, a fantastic widget to let the user choose among literally hundreds of languages. The demos use ULS, and you can look in their source code how to use it.