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.
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.
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.
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.
6: Once loaded into your web site, the widget will look something like this::
Click on the down arrow to bring up the list of target languages and select one.
7: The text is translated in place for you, the layout is preserved as much as possible, the links still work, etc. - Brilliant !
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.
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.
Code for this Tutorial
|1 :||tutorial_16_example_1.html||Translate your Site with the Google Website Translator||Live Demo 1|
Share this tutorial
Comment on this Tutorial
comments powered by Disqus