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:
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
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
Thanks for this! I’ll have to pass it on to people who keep asking me about ways to have their websites translated.
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
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?
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
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
Hey Geoff,
Thanks for pointing that out, its fixed now.
-jr
… 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!
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
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
how can i enlarge the flags?
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
Thanks jon
Hi Jon… thanks for this. I use this on my blog.
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.
Also your blog is getting pimped rather well on stumble upon – you don’t have to publish this comment.
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
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
Do I have to have the flags on every page of the website to be translated?
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
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
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
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?
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…
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.