2015-03-11

How to add the Google Translate Widget in Your Website

In today’s increasingly globalized world, adding a translation widget to your website allows visitors from around the world to visit and share your website, increasing your reach exponentially. There are a number of translation widgets available for use on websites. However, not all translation widgets are created equal. Some relatively new translation widgets may not yet have the consumer confidence of their more established competitors. Some of the most popular translation widgets are offered by BabelFish, Bing, Google, and Microsoft, to name just a few.

Why Add the Google Translate Widget?

While Bing, Microsoft, and Yahoo (via BabelFish) offer their own translation widgets, their language options are relatively limited compared to top competitor Google Translate. Google Translate is also a long established and well trusted machine translation program with high visibility and easy name and logo recognition that will put visitors to your website at ease. Here, we focus on the Google Translate widget as the industry standard for machine translations of websites.

Google Translate Widget Options

There are four interesting widget alternatives available for translations powered by Google Translate. Each option, of course, has its peculiarities and some options may suit certain websites better than others. Here, we consider the pros and cons of each of these four Google Translate widget options:

1) Google Gadget for Translation. This user friendly JavaScript widget offers a drop down language menu that allows visitors to select the translation target language. The widget’s overall presentation is appealing, clearly indicating that the translation will be from Google Translate, including the recognizable, multi-colored Google name logo. The familiar logo, of course, will help reassure visitors to your website that the translation is from a trusted source, although the size of the Google name is rather large relative to the widget.

This widget also clearly shows that the drop down menu can be used to select a language rather than simply showing the first language available, as is the case with the Google AJAX Translation with Cookies widget, discussed below. However, there’s no way to select just a few target languages, so visitors to your website must scroll through the list of all available languages. This can be a bit cumbersome given the number of languages Google Translate can handle. On the other hand, visitors are likely to find their desired translation target language among those on the list. Another point to keep in mind is that once the visitor selects the target language, the translation will open in a new page, taking them away from your website to a different URL.

2) Google AJAX Translation with Cookies. This API, or application programming interface, allows visitors to translate your website into their native language without rerouting traffic away from your site. Compared with that of the Google Gadget for Translation widget, the API menu is quite simple, presented as a drop down menu that simply shows the first available language. While this is unlikely to confuse computer savvy visitors, those with less experience may be a bit confused and put off by the less than straightforward presentation. Those who are concerned about internet security might balk at the idea of using a translation widget that doesn’t clearly state which program will perform the translation. You can, of course, remedy this by mentioning the widget in other text on the website.

The great benefit here is that visitors are not redirected away from your page; the URL remains the same and visitors can directly reference your URL, for example, if they’d like to bookmark or pass your site along to someone else. In addition, webmasters can opt to use the iQuery Translation plug-in, which uses cookies to recall the language previously selected by that visitor so they don’t have to select their native language each time they return to your site. The AJAX widget also allows you to designate which parts of your site should remain in the original language; for example, if you’d like to leave the footer as is.

3) Language Flags. This HTML based widget includes images of different countries’ flags to broadly represent the target languages available for translation. While the images themselves are attractive and easy to navigate, when deciding whether or not to use this widget, you should consider that there are some difficulties in trying to represent languages with country flags. That is, in some countries several languages are spoken. Switzerland recognizes four official languages, in Belgium there are three, and South Africa has 11 official languages.

While English and Hindi predominate in India, there are an additional 20 scheduled languages recognized in the country, including Bengali with over 210 million native speakers and Telugu with over 75 million speakers. Conversely, some languages are spoken in multiple countries, sometimes with considerable differences in the vocabulary used in each country. For example, the verb commonly used to mean “to catch” in Castilian Spanish would be understood by a native speaker of Latin American Spanish, but the word has a very different, and rather vulgar, meaning. On the other hand, the simple code allows the end user to add or eliminate flags or even replace the images with text.

4) Google Translate Bar. The Google Translate Bar offers the best of the Google Gadget for Translation and the Google AJAX Translation with Cookies widgets, permitting direct inline translation of your webpage without opening a new URL and also clearly but modestly indicating that the translation will be performed by the well known and highly trusted automatic translation program, Google Translate.

This new widget offers a number of excellent benefits that will help make your website look professional while also making it accessible to visitors from around the globe. The Google Translate bar can use the visitor’s browser language to determine whether or not to offer a translation, meaning the bar only appears when needed.

Moreover, your webpage’s URL remains unchanged, since translations are inline directly on your website rather than offsite. This Google Translate widget also allows you to select the specific target languages you want to offer, rather than requiring you to stick to the full list of languages available. One limitation to keep in mind is that the Google Translate Bar runs on Flash, so while it may be visible to them, the Google Translate bar may not work as expected for visitors using certain internet browsers or certain smart phones to visit your site.

How to Add the Google Translate Widget of Your Choice to Your Website

Once you’ve selected the best option for your particular website translation needs, follow the corresponding steps outlined below to install the Google Translate widget:

1) Google Gadget for Translation.

The classic Google Gadget for Translation widget is easy to install.

a. You can search Google Gadgets for Your Webpage for the Google Translate Gadget. A variety of preset gadget options will appear in the search results.

b. Scroll through the list and click on the Translate Gadget you prefer.

c. This will open a new page where you simply click on the “Add to your webpage” button to get started customizing your widget.

d. The next page will allow you to make changes to your Google Translate gadget before previewing your changes and getting the final code you’ll need to embed the gadget in your website. Play around with the title, size, border, and language settings until you find the best fit for your website.

e. Once you’re happy with your customized Google Translate gadget, click on the “Get the code” button at the bottom of the editing panel.

f. The code will appear in the panel at the bottom of the page. Just copy and paste the code into your website’s HTML file using your favorite text editing program to embed it in your website. Hint: Use your cursor to highlight the entire code and then use the Ctrl-C shortcut to copy and the Ctrl-V key combination to paste the code.

g. When pasting the code, consider the placement on the final webpage. Also, be sure to view and test the Google Translate gadget before your visitors starting giving it a try. You can always go back to Google Gadgets for Your Webpage to further edit the gadget until you find the set up that best fits your website.

Google AJAX Translation with Cookies.

Installing the Google AJAX Translation with Cookies widget is a slightly more involved process, but it’s definitely worth it!

a. Open the HTML code file for your website.

b. Determine which sections you would like to translate. You may want to leave parts, like the footer, in the original language.

c. To indicate the text you’d like translated, place it within the “div id” tags. You’ll also need to add a unique identification term, like “section1”, so the code just before the text to be translated.

d. Next, add the script code referencing http://google.com/jsapi in the “head” tag on your website template.

e. Now you can add the API, or application programming interface, options using this line:

google.load(“language”, “1”)

f. To allow the page to fully load before the API functions are accessible, you can add:

google.setOnLoadCallback(onloadCallback);

g. To set the original languages, you can use the following example, changing “ENGLISH” to the applicable language if necessary:

google.language.Languages[‘ENGLISH’]

h. As always, be sure to reload your webpage and confirm that the Google Translate AJAX API is functioning correctly and that you like the final layout.

Language Flags.

To add the Google Translate widget with language flags, follow these simple instructions:

a. Search in Google Gadgets for Google Translate.

b. Select the language flags widget that most appeals to you and click on the icon.

c. This will open a new page where you can start the widget customization process by clicking on the “Add to your webpage” button.

d. On the next page, be sure to examine the border color and design as well as the width and height of your widget. Finally, consider adding a title, like “Google Page Translator”.

e. You can click on “Preview Changes” to see your modifications before generating the code.

f. Once you’re happy with the layout of your language flags Google Translate widget, click on the “Get the code” button.

g. Copy and paste the code that appears in the lower panel into the HTML code for your webpage.

h. Be sure to reload and test your new Google Translate widget with language flags.

Google Translate Bar.

If your preference is for the Google Translate Bar, you can follow these instructions:

a. Start by navigating to the Google Translate website manager page: https://translate.google.com/manager/website/

b. Click on the “Add to your website now” button to the right.

c. You’ll be asked to either sign in if you already have a Google account, or to create an account if you don’t yet have one.

d. Once you’ve signed in to your existing Google account or created a new Google account, you’ll be able to add your website URL and select your website language from a drop down menu. Then click on the “Next” button.

e. On the following page, you’ll specify the plug-in settings, including: 1) the target translation languages, which gives you the option of selecting all languages or including just a few target languages; 2) the display mode (automatic, inline, or tabbed); and 3) the bar orientation, either horizontal, vertical, or just the drop down option. There’s also an advanced section; for example, if your website includes multiple languages or if you’d like to keep track of the native languages spoken by your website visitors using Google Analytics. You can also set the widget to automatically show the translation banner when your site is accessed by someone using a web browser set to another language.

f. Finally, click on “Get Code”. You’ll be directed to another page where you simply follow the instructions regarding where to copy and paste the resulting code to add the plug-in to your website.

g. As always, test your webpage to make sure everything looks as it should and is working properly.

Some Final Thoughts on Adding the Google Translate Widget to Your Website

The Google Translate widget is a great way to reach a diverse group of website visitors, offering access to your website in a number of different languages. The variety of options available means that you can select the model that best compliments your website and visitor needs. Moreover, there are a variety of Google Translate widgets with preset values available on Google Gadgets that can be modified using the user friendly and intuitive editing layout.

Those more interested in the code itself, may opt for the more involved gadget installs, like the Google AJAX Translation API or the Google Translate Bar, where the code may be customized to suit different needs. It’s worth it to consider which type of widget will work best on your site and for your visitors, and the various options available for modifying the basic widget settings will help you achieve a customized translation widget for your website.

Shop Amazon Magazines – House Beautiful All Access Magazine (Print+ Digital)- Get 5 issues for just $8,Shop Amazon – New 2015 Franklin Sports Batting Gloves.

Show more