Tutorial #16
Add the Google Website Translator Basic   2013-11-12


Making your web site available in foreign languages used to be difficult and expensive - and then along came Google Translate.

Google, Bing and others have done incredible work on tools for automated translation and translation is now built in to the Google Chrome browser.

Some of these tools are available for your web site and this tutorial shows you how to add the Google Website Translator to your site.

The widget will appear as a pulldown like this.

Demo 1 screenshot for this tutorial

I think this technology is remarkable - with a few minutes work you can make your site available to audiences around the world.

Step by Step

1: You need a Google Account to use this widget so the first step is to sign in to your account

2: Go to the Google Website Translator page and click on the Add new website button in the top right corner.

3: Enter the URL of your web site (without the http://). The widget will work with any page on your site. Select the primary language used on your site.

Note that you need to have an active web site - the widget will not work in a web page that you load from file into your browser.

Image 1 for this tutorial

4: There are about 70 languages currently supported. Decide if you want to make all of these available or just a subset.

Decide which style of widget you want to use and select any of the advanced options that are of interest.

Image 2 for this tutorial

5: There are two blocks of code that Google generates for you. The first is a <meta> tag that goes into the <head> block of your page. The second goes into the body of your page where you want the widget to appear.

Image 3 for this tutorial

6: Once loaded into your web site, the widget will look something like this::

Image 4 for this tutorial

Click on the down arrow to bring up the list of target languages and select one.

Image 5 for this tutorial

7: The text is translated in place for you, the layout is preserved as much as possible, the links still work, etc. - Brilliant !

Image 6 for this tutorial

8: If the user viewing your page has a Google account then another neat feature is available.

If they place their mouse pointer over a sentence and wait a second or two then a popup window will appear with the original text and a link that allows you to contribute a better translation if you think Google got it wrong. This way you can help improve the performance for everyone.

Image 7 for this tutorial

Google Translate is not perfect and less common languages are likely to have more issues. If you have a target language that is particularly important to you then try and get a native speaker to assess how well it performs.

Understanding the Code

As I mentioned, the code has two components. The <meta> tag that goes into the <head> - it won't work anywhere else. This contains a unique ID for your site as the value of the content= attribute.

The rest of the code goes where you want the widget to appear. It consists of a div with the id google_translate_element, followed by two scripts.

The first script contains a function that initiates the TranslateElement with the div as the target where the pulldown will be placed.

The second script loads the JavaScript from Google which actually does the work.

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus