Translate your website with Google Website Translator

Oftentimes we want to support multiple languages in our websites. One "easy" way is to keep one separate resource bundle for each language we support, but this isn't as simple as it seems. First you need a tag / mapping mechanism to match labels in your pages with tags in the property files (frameworks like JSF already provide it) but then you need to maintain multiple sets of labels. Any new field / screen etc will require changes all resource bundles, which can quickly become a burden. In many cases this burden may be  acceptable in exchange for full control and performance, but in other cases we can use Google's Website Translator tool.

Follow these steps to find out how to easily include a styled language selector into your website, and to remove the Google Website Translator toolbar. I recently applied these steps in Eventfy and the final result looks like this:





First login with your Gmail account and sign your site up to Google Website Translator. Just click the “+ Add new website” button:



Select your site’s default language, and all other languages you want the GWT widget to list to your users. At the end it will give you a HTML code snippet like this:

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,es,fr,it,nl,pt', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Just add this code where you want the language selector to appear in your page. In Eventfy’s case I added it inside a <li style="padding-top:5px;"> block to get it aligned with the other menu items. This is all there is to get it to work, give it a try!

This is how Eventfy looked with this default code:

Default language selector with Google icon

Google translator toolbar hiding Eventfy's top menu and bad Portuguese translation

I like how easy it was to include it into Eventfy but I thought the language selector and the toolbar didn't look good with the rest of the site. The next step was then to override Google's default style with custom CSS so it looks as part of Eventfy's design. I removed the Google icon and the Google translator toolbar with the following style overrides:

1. Remove Google icon and "linky" behavior from language selector:

.goog-te-gadget-icon {display:none;}
.goog-te-gadget-simple a {text-decoration: none !important;}

2. Remove the Google translate toolbar:

.goog-te-banner-frame.skiptranslate {display: none !important;}
body { top: 0px !important; }

Note: you may want to add a <span class="notranslate"> anywhere you don't want translations (e.g. email addresses like “someone at somedomain dot com”).

Please note that while this is very easy to setup, since this is all computer-based some translations are way off. Thankfully we - site admins and users - can improve / override the automated translations with rules and suggestions (always managed by the website admin). More specifically, users can click on a translated phrase and suggest a better translation. Then, the website's admin can see and approve / reject suggestions from the Google Website Translator website.

Final result - no toolbar, no Google icon and improved Portuguese translation

I am still testing this service but if it works well it may be a simple (and cheap) approach to support multiple languages.

Happy translations to all! :)