translate website in multi languages

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. 

<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>

<script type="text/javascript">
TranslateThis();
</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="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate&lt/a></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 theusedLangs 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 setuseFlagCSS to 0 (zero).

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

Finally, if you want to use a different id than ‘translateFlags’, either set the flagsWrap variable statically, or pass the id into TranslateThis(); 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

Example with most of the options set:

<script type="text/javascript">
TranslateThis({
    GA : true, // Google Analytics tracking
    scope : 'content', // ID to confine translation
    wrapper : 'translate-this', // ID of the TranslateThis wrapper
    
    onLoad : function() { alert('loaded') }, // Callback function
    onClick : function() { alert('translation started') },
    onComplete : function() { alert('translation finished') },
    
    cookie : 'tt-lang', // Name of the cookie - set to 0 to disable
    
    panelText : 'Translate Into:', // Panel header text
    moreText : '36 More Languages »', // More link text
    busyText : 'Translating page...',
    cancelText : 'cancel',
    doneText : 'Translated by the', // Completion message text
    undoText : 'Undo »', // Text for untranslate link
    
    fromLang : 'en', // Native language of your site
    
    ddLangs : [ // Languages in the dropdown
        'cs',
        'pt-PT',
        'it',
        'ru',
        'ar',
        'zh-CN',
        'ja',
        'ko'
    ],
    
    noBtn : false, //whether to disable the button styling
    btnImg : 'http://x.translateth.is/tt-btn1.png',
    btnWidth : 180,
    btnHeight : 18,
    
    noImg : false, // whether to disable flag imagery
    imgHeight : 12, // height of flag icons
    imgWidth : 8, // width of flag icons
    bgImg : 'http://x.translateth.is/tt-sprite.png',
    
    maxLength : 900, // maxLength of strings passed to Google
    reparse : true // whether to reparse the DOM for each translation
    
});
</script>

For more Details go here

http://translateth.is/