Google Translation Widgets are available in four different flavors - as a JavaScript based Language drop-down, as a overlay toolbar, as AJAX for in-place translation and as plain HTML. This article discusses the pros and cons of each option to help you pick the right translator button for your website.

If you looking to add language translation functionality into your website so that non-English speaking visitors can read your pages in their native language, you have a couple of good options to choose from.

Choosing  a Language Translation Widget

Google Translate, Yahoo’s Babel Fish and Microsoft Translator (Bing) provide ready-made translator widgets that you can integrate into your site using simple copy-paste. We’ll however focus our attention on Google Translation since it supports the maximum number of language translation pairs.

Before we discuss the various options for integrating Google Translation into a site, you should check this online demo page and play around with each of the examples to understand how they’ll look and function on your site.

Google Gadget for Translation

Google Gadgets - This a JavaScript based widget that supports all languages and is easy to implement but the problem is:

• All the language choices are displayed in one giant drop-down menu and there’s no way to remove some options from the list (unless you create a new gadget by changing the XML file manually).
• The Google Gadget will open the translated page in a new window and visitors will therefore have leave your page after translation.

HTML Widget with Language Flags

While using country flags may not always be the best option to represent languages (as some countries - like India - can have multiple languages and some languages - like English - are spoken in multiple countries), if you still prefer to have flags in your Google Translate widget, here’s the code.

These are simple HTML tags so you can add /remove languages or completely modify the look of the widget using CSS styles. You can also replace the graphic images with text and this may be a good option for sites /blogging platforms that don’t allow JavaScript code.

Google AJAX Translation with Cookies

With the AJAX Language API, your visitors can perform inline translations without leaving the page or even reloading it.

The other advantage with AJAX based translation is that it will not rewrite the internal links on your web pages after translation. This is helpful because if someone decides to bookmark or share a translated version of your page, they’ll still be using your original URLs and not that of the Google Translate website (in case you haven’t noticed, when you translate a page with Google Translate, it changes all the links on that page by default - see example).

Advanced users may incorporate the jQuery Translation plugin into their site. This plugin uses cookies to remember the language preference of a visitor. For instance, if a visitor decides to translate your site from English into French, the cookie will remember this choice and the visitor will automatically see all the pages in French the next time he or she visits your site.

Google Translate Bar with Auto-Detection

Google has released a new widget (they forgot to give it a name so we’ll refer to it as the Google Translate Bar) that not just looks great but allows inline translation as well.

Why you’ll love the Google Translate Bar

1. It appears only when required - The bar can auto-detect the language of the visitor’s browser and if this is found to be different from the language of your page, it will show up automatically on your page.

2. It wont alter links - Like the jQuery plugin discussed above, the Google Translate Bar too won’t modify any of that links on your page which is great if people decide to share your translated pages.

3. Pick few languages - Google Translate now supports 50+ languages but there’s little point in adding so many languages to you language drop-down menu. You can use Google Analytics (choose Visitors -> Languages) to determine the top 20 languages that your visitors have configured on their computers.

Just add these languages to your Google Translator widget and ignore the rest. I have used a similar technique for the translator on my site (see the globe icon near the site’s logo).

Why you may not love the Google Translate Bar

The downside is that the new Google Translate bar requires the Flash player so if someone is viewing your site on an iPhone or a browser that doesn’t support Flash, they’ll still see a link to translate that page but it won’t work as expected.

The other issue with Google Translate Bar is the design - it’s beautiful but they have definitely not optimized for small screens like that of netbooks.

Conclusion: Google AJAX API or Google Translate Bar

While implementing Google Translate Bar is easy, the AJAX API solution gives you more control. For instance, you can translate pages without showing that big overlay bar and second, you can prevent certain areas of your site from getting translated (like the navigation bar or the footer).

You can auto-detect the browser language of a visitor using either of these methods.

Related: How to Translate Documents with Google Translation