TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis is a new Javascript widget that provides 52 languages of translation by leveraging the Google Language API.

Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.

Besides being easy to use, TranslateThis also provides many attractive features for developers. First off, requests to the Language API run in Javascript, so the translation is pretty fast. Additionally, the script is lightweight, weighing in at just over 11kb with another 7kb of imagery. And since it doesn’t depend on any Javascript library, TranslateThis can be implemented on any website without additional overhead. Finally, TranslateThis has been tested in all modern browsers and its user interface is designed to be straightforward and seamless.

Get your own TranslateThis Widget

Read the TranslateThis Documentation

What can you customize in TranslateThis?

TranslateThis allows you to customize a variety of options including tracking with Google Analytics, styling options, callback functions, limiting supported languages, and the ability to confine the translation to a portion of the page.

To customize these settings, pass an array of options to the TranslateThis() function:

<script type="text/javascript">
TranslateThis({
    GA : true,
    scope : 'main'
});
</script>

In this example we are setting GA to true to enable Google Analytics tracking, as well as flagging the scope of the translation to cause TranslateThis to only translate content within the element with id main.

Be careful when defining this option array—one common mistake is to leave a trailing comma after the last element in the array (notice in my example how scope : 'main' doesn’t have a comma after it).

Callback functions

There are three callback functions in TranslateIt, which are called onLoad, onClick and onComplete. You can pass in either the function reference (the function without the parentheses) or define a function on the fly:

<script type="text/javascript">
function translateLoad() {
    alert('TranslateThis loaded');
}

function translateClick(lang) {
    alert('Translating into ' + lang);
}

TranslateThis({
    onLoad : translateLoad,
    onClick : translateClick,
    onComplete : function() {
        alert('Translation complete!');
    });
});
</script>

In this example, we defined the function translateLoad() to called when TranslateThis loads and another translateClick() for when the translation begins. Finally, we defined a function on the fly to be executed once the translation completes.

Changing dropdown languages

To change dropdown languages, simply pass an array of the Google Language codes in the option ddLangs:

<script type="text/javascript">
    TranslateThis({
        ddLangs : [
            'ar', // Arabic
            'fr', // French
            'de', // German
            'es', // Spanish
            'el', // Greek
            'zh-CN', // Chinese (simplified)
            'en', // English
            'is', // Icelandic
            'it', // Italian
            'ko', // Korean
            'ja', // Japanese
            'ru', // Russian
            'da', // Danish
            'nl', // Dutch
            'sv', // Swedish
            'th' // Thai
        ]
    });
</script>

These will fall in order down each column from left to right. For a complete list of the 52 language codes supported by TranslateThis see the allLangs array in the default options for TranslateThis

Other options

There are a number of other settings, check out the TranslateThis documentation for a complete list of options.

Why does TranslateThis run on the front end?

Besides the ability to copy and paste the script, running on the front-end provides a couple advantages for TranslateThis. Mainly, the translation runs very quickly since it’s processed with a number of parallel Javascript calls to the Language API—the page not only doesn’t have to reload for the initial translation but the translation itself also comes in quickly. Finally as the translation calls are returned, TranslateThis switches out each bit as it is available making for a nice transition effect.

The disadvantages to running on the front-end is that TranslateThis doesn’t cache complete translated pages (although Google caches the translated chunks) and that it doesn’t translate subsequent pages on a site….yet (see below).

But TranslateThis can provide the perfect entryway to a backend system that also leverages the Google Language API, just use the onClick callback which returns the language slug.

Are there any planned enhancements for TranslateThis?

For this release I focused on improving performance of the core translation functions as well as providing a nice user interface. So there are certain enhancements I have planned to build and release in the near future.

First, I want to build in cookie functionality so that the script translates pages that are visited subsequent to the initial translation. My only concern is that it would be very invasive on shared computers—think of a college campus with users of various languages. So I need to build a “cancel translating” button as well as an “undo translation” button before I can do this. And of course I’ll build a switch to turn it on or off.

Initially this cookie functionality will be confined to any individual (sub)domain but I’m toying with different ways of making it internet wide. This seems like it could be pretty cool, but again I’m not sure if it’s too invasive (any thoughts would be appreciated in the comments).

Update – Cookie functionality with the cancel and undo buttons has been implemented

Next there are a couple different button styling options I will be rolling out soon, including a list of flag icons next to the button.

And in the long term there may be ‘bit.ly’-style tracking or a caching method for complete pages.

I’m still confused, help!!!

For more detailed information on everything I’ve discussed here, check out the TranslateThis Documentation.

If you’re still having trouble, post a comment below or contact me. I will be opening a support forum for TranslateThis sometime soon (probably in January).



Jon Raasch

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.




You Might Also Like:


3 Comments to “TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike” RSS 2.0

  1. dramaqueen says:

    Hi,
    Can I ask how do you set a specific set of text being translated to the words that you want?

  2. Cris says:

    hello
    I have a problem, I’m using TranslateThis button, but when I use Jquery does not work why?
    please help
    and try using google JSAPI jQuery

  3. Ivan Biolley says:

    Hi Jon!! Thank you very much for this great tool… I donĀ“t know why the button is not working, it was working so fine before, but suddenly doesn’t works at all, the button is shown, flags are shown too, but when I click on any language, nothing happens.

    The option to “Undo” appears but the translation is not shown… Please take a look on http://www.asesoresdinamicos.com

    Thank you very, very much for your help! and great extention


Leave a Reply



  • HTML permitted
  • Wrap code in <pre><code></code></pre>
  • Escape HTML to display as text