Translate-It: Easy Translation for Multiple Languages

Translate-It is a free tool that makes multi-language translation easy to implement on any website. With just a few lines of Javascript you can quickly include up to 34 languages of internationalization on your site:

Download Translate-It now

The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like Google Translate and Yahoo’s Babelfish have made the web more accessible. While accessing these translation tools is often too cumbersome for your site’s visitors, leveraging these tools is relatively simple for developers.

I wrote this script because I’ve been wanting to offer translation on my blog, and unfortunately all the scripts I looked at online had really clunky front ends. So I decided to write Translate-It: a really clean script that leverages Google’s translation tool.

Why you should use Translate-It

Translate-It is a nice script for several reasons. First, it’s incredibly easy to implement, with no CSS or images to upload. The script builds all the flags and links dynamically, so the only HTML markup you include is <div id="translateFlags"></div>. Besides keeping the document clean, this is great for SEO because there aren’t any extraneous links or content.

Another advantage to Translate-It is that it pulls in the flag icons using CSS sprites and a single image. This saves 9 HTTP requests.

Finally, in addition to being easy to use, Translate-It is also very customizable. Some options include choosing which languages are offered, and whether to use your own flags and styling or the default icons.

Putting Translate-It on your website

Integrating Translate-It into your site is a piece of cake. Just upload the translate-it.js file to your website, and include these lines of Javascript:

<script type="text/javascript" src="translate-it.js"></script>

<script type="text/javascript">
TranslateIt.init();
</script>

Make sure to modify the path to translate-it.js if necessary.

Finally, add this HTML wherever you want the flag icons on your page:

<div id="translateFlags"></div>

And that’s it, your website has become much more global, with translation into tons of languages!

Customizing Translate-It

To customize Translate-It, first open up translate-it.js and look towards the top for the config section. This area is easy to modify and any non-developers should only work within this section.

By default only 10 languages are enabled, but you can include up to 34 languages by editing the usedLangs array. You can also change the order that the flags appear with this array. Just make sure that the last item doesn’t have a comma at the end, or it will throw an error in IE.

Additionally, if you want to use your own imagery, or just want to host the flags locally, you can modify the bgImage variable. If you do want to style the flags yourself, you’ll want to set useFlagCSS to 0 (zero).

Also, if your site is in a language other than English to begin with, make sure to change the fromLang variable.

Finally, if you want to use a different id than ‘translateFlags’, either set the flagsWrap variable statically, or pass the id into TranslateIt.init() to change it on the fly.

Supported Languages

Arabic, Bulgarian, Catalan, Chinese (Simplified), Croatian, Czech, Danish, Dutch, English, Filipino, Finnish, French, German, Greek, Hebrew, Hindi, Indonesian, Italian, Japanese, Korean, Latvian, Lithuanian, Norwegian, Polish, Portugese, Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swedish, Ukranian, Vietnamese

Special thanks to 3ff.com for its free flag imagery

Download Translate-It now



Jon Raasch

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




You Might Also Like:


24 Comments to “Translate-It: Easy Translation for Multiple Languages” RSS 2.0

  1. Clint says:

    Thanks for this! I’ll have to pass it on to people who keep asking me about ways to have their websites translated.

  2. Ben says:

    Hey there –

    Just stumbled on this thanks to some poking around on Ajaxian, and I thought you might want to know that there is a Google Translation API that you could redo this tool with:
    http://code.google.com/apis/ajaxlanguage/

    Regards,
    Ben

  3. Geoff says:

    Works fine at first click, but not if I then click on a flag on the translated page to translate into a third language – see http://www.birminghamlawcentre.org.uk/aboutus/translate-index.htm – why not?

  4. Jon Raasch says:

    Hi Geoff,

    The reason that occurs is that you are then translating the translated page, which is hosted by Google. I noticed this issue but didn’t think it was much of a problem because I don’t think many users would translate into one language and then another. It seems like it would only come up if someone were testing the website not actually using it.

    I’m planning on redoing the script to use the Google Translation API at some point, which would clear up this issue, but honestly its not a huge priority for me right now.

    Thanks for the feedback and good luck,
    jr

  5. Geoff says:

    Hi Jon,

    Thanks for your rapid response. I’m going to see if I can hack it so that the flag-links don’t appear on the translated page.

    Sorry to take up more of your time – but, both in your demo up above and in my implentation, the Chinese flaglink doesn’t work – it gives a Google error-message “Translation from English into English is not supported” – and I haven’t as yet worked out why.

    Geoff

  6. Jon Raasch says:

    Hey Geoff,

    Thanks for pointing that out, its fixed now.

    -jr

  7. Geoff says:

    … sorry, that should be

    if (window.location.host==’www.birminghamlawcentre.org.uk’)
    {
    TranslateIt.init();
    document.write(‘Translate this page
    (select flag):

    ‘);
    }

    - the lines got truncated!

  8. Geoff says:

    OK – I give up – I can’t get the JS code to appear properly in my comment – but I hope you get the idea. See the source at
    http://www.birminghamlawcentre.org.uk/aboutus/committee.htm

  9. Jon Raasch says:

    Hey Geoff,

    Good idea on not showing the flags if it’s already been translated. I reworked the plugin with a quick regex so it works in all cases.

    Also it’s not too classy to link to your site from here, after removing the linkback from the plugin :) . I’m just saying is all….

    -jr

  10. acaliptos says:

    how can i enlarge the flags?

  11. Jon Raasch says:

    Hi Acaliptos,

    You’d have to use another background image and modify the CSS that is applied through Javascript. It won’t be the easiest thing in the world. I like the small icons but if I get some time I’ll put together another set of larger flags and add it as an option in the script.

    -jr

  12. acaliptos says:

    Thanks jon

  13. Ardiansyah says:

    Hi Jon… thanks for this. I use this on my blog.

  14. Alan Scott says:

    I enjoyed reading your blog. I’m an illustrator and designer at heart not a developer – nevertheless I’m now learning action script three. I’m getting there and appreciate those who direct people to strive towards good practice as your site does. My existing website translation thingy is due an update. Thanks for the script. I’ll have to study my site and see how best to fit it.

    I think you should put a rectangle around the question mark on the ‘what is Translate-It’ icon at the end of the row of flags. The way it stands now it looks like an indication of a missing image rather than a ‘get some info’ icon.

  15. Alan Scott says:

    Also your blog is getting pimped rather well on stumble upon – you don’t have to publish this comment.

  16. Jon Raasch says:

    Hi Alan,

    Good idea on using an icon for the info link, I’ll get that into the script soon.

    Glad you like it,
    jr

  17. Susan Long says:

    Thanks for great script and one that works! I’m testing it out on new site and on IE8 & compatibilty mode Ie7 I’m getting following error. Works fine though. Any ideas? Your site does not error. No error in Firefox.

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; GTB6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.21022; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
    Timestamp: Sat, 11 Jul 2009 16:43:05 UTC

    Message: ‘TranslateIt.info[...].fullName’ is null or not an object
    Line: 278
    Char: 9
    Code: 0
    URI: http://www.addisondogs.com/js/translate-it.js

    Message: Object doesn’t support this property or method
    Line: 222
    Char: 16
    Code: 0
    URI: http://www.addisondogs.com/js/translate-it.js

  18. Webmerits says:

    Do I have to have the flags on every page of the website to be translated?

  19. dado says:

    hiya

    does this script generate translated static files on server?, because that would be great if it caches translations on server. because crawlers would then read translation to.

    cheers

  20. mukesh says:

    Hi sir,

    I have one problem that i want open new window at any flag click, but i am not abel to do this, please help me,
    2- problem is that i m using Capcha at my home page , and i don’t want translate this will u help me pls
    i m developing this site in PHP

  21. i-cute says:

    OMG! thank god i found ya site.. u save my life!
    i will using this in my site..i’m using global translator before but i got so much problems in terms of cache and to customize it i need at least half a dozen of chocolates

  22. mazsala says:

    HI,
    I used your translate-it as an extension in WB7, and it is not working as nice as on this site ( no fading just upper site the google translation tool is showing) is it possible to have same effect as you have here? Second problem I have is with the menu bar style. After translation the style of menu bar is changing and is hardly to read. Why is it happening? Can be avoid?

  23. clive says:

    hey john i am launching a website and want multiple language option on that with horizontal flag icons representing countries not in a vertical grid on top i try to use google translate widget but that header is very annoying and takes away the charm of the site ….any suggestions…

  24. Rony says:

    I am building a site with WYSIWYG web builder 8.1.5 unicode.
    How do i integrate the script and the toolbar to show where i want it to be seen on the site.
    Kindly help me out please. Do email me back at rony925@hotmail.com
    Thanks.


Leave a Reply



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