Add Google Translation Widget to 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
- 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.
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).
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.
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory