Caution


This article was published more than a year ago, there may have been developments.
Please take this into account.

Today we see up close one of the most automatisms that I have made my life easier on the web. Many of us know the “Language Tools” offered by Google, but not everyone knows that it is possible integrate the buttons flagwithin your site to make a machine translation, snapshot of all the content without changing the address in the URL bar. I'm talking about GTranslate, a book which deals with the instant translation of all the content that is on a page; and an example you can see it by clicking on the flags in the right column, at the top of this site. In this case, the library is integrated in a a WordPress plugin (the motor that “turn” this blog), but you can use it with any website, even with static HTML pages.

First let's take a little’ the author credit: Edvard Ananyan. To enable automatic translation exists a comfortable wizard that will guide us in choice of language, in languages ​​to include and in various options additional. Below is a screenshot of the options that I recommend.

Everything depends on the work we are doing. The screenshot above does not need much explanation. Perhaps the only point on which to focus is you need in loading the jQuery library. If you already use jQuery for our website (for example a gallery, or for some other effect) it is not necessary to put the flag and reload, if you do not even know what it is is better leave the flag. By default then you will see the drop down with the choice of language; is not always visually appealing (although very useful from the practical point of view). As always, everything depends on our needs, indeed the needs of those who will look at the site.

Not just click on a flag, the change is reflected automatically within the HTML code you see at bottom of page (in the screenshot), without the need to confirm, charge or other. And’ enough paste the code in the HTML page on which we want to integrate the translation (at the point where we want to integrate) and “as if by magic” appear flags.

Obviously, this post would not make sense to exist without adequate customization to the final result. The code generated in this case is the following:

<!-- GTranslate: http://edo.webmaster.am / gTranslate ->
<a href="javascript:doGTranslate('Into|in ')" title="English" class="gflag" style="background-position:-0px -0px;"><img src="https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt ="English" /></a><a href="javascript:doGTranslate('Into|fr')" title="French" class="gflag" style="background-position:-200px -100px;"><img src="https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt ="French" /></a><a href="javascript:doGTranslate('Into|of ')" title="German" class="gflag" style="background-position:-300px -100px;"><img src="https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt ="German" /></a><a href="javascript:doGTranslate('Into|it')" title="Italian" class="gflag" style="background-position:-600px -100px;"><img src="https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt ="Italian" /></a><a href="javascript:doGTranslate('Into|pt ')" title="Portuguese" class="gflag" style="background-position:-300px -200px;"><img src="https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt ="Portuguese" /></a><a href="javascript:doGTranslate('Into|is')" title="Spanish" class="gflag" style="background-position:-600px -200px;"><img src="https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/blank.png" height="24" width="24" alt ="Spanish" /></a>

<style type="text/css">
<!--
a.gflag {font-size:24px;padding:1px 0;background-repeat:no-repeat;background-image:url('https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/24.png ');}
img a.gflag {border:0;}
a.gflag:hover {background-image:url('https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/tmpl/lang/24a.png ');}
-->
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://joomla-gtranslate.googlecode.com/svn/trunk/mod_gtranslate/jquery-translate.js"></script>
<script type="text/javascript">
//<![CDATA[
if(jQuery.cookie('glang') && jQuery.cookie('glang') != 'En') jQuery(function($){$('body').translate('In', $.cookie('glang'), {toggle:true, not:'. Notranslate'});});
function doGTranslate(lang_pair) {if(lang_pair.value)lang_pair = lang_pair.value;var lang = lang_pair.split('|')[1];_gaq.push(['_trackEvent', 'doGTranslate', long, location.pathname location.search]);jQuery.cookie('glang', long);jQuery(function($){$('body').translate('In', long, {toggle:true, not:'. Notranslate'});});}
//]]>
</script>

No one forbids us to make changes generated code. In one of the sites I've worked on, I moved the CSS in a separate sheet, adding the code to the existing, I set the flags of the required size, retrieving the images already present in my server, I loaded javascript on my server and I have called by them. From the tests that I have run before and after the changes you'll save almost a second on page load, a nice benefit calculated that there is no need to translate anything “a mano”.

Not enough?


TheJoe

I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.

4 Comments

TheJoe · 19 June 2012 at 9:26 PM

Obviously with a plugin that translates the contents of a text in a fully automated you can not be sure that the text in all respects and for all the semantic rules of the language in which the text is translated.

We must say, I speak of my experience, that with such a plugin although I do not know German, or Spanish are able to form “understand” from German and Spanish.

And if I have to tell the truth are also quite satisfied with the translation of my articles in English, is sufficiently faithful to the original text.

WPML is another thing, install it and gives you the opportunity to translate your website in other languages. I'll have to translate but you, and the language you have to know. Cute and very useful in areas of international business, certainly not adequate for the average user.

You've found it difficult using GTranslate?

ONLY · 19 June 2012 at 10:12 AM

Let's say that it's okay for those who does not read and does not know the language because the translation is really hurt obviously using google translate the words but not the concept of the phrases that needs to be localized for each language! Much better WPML but obviously requires the translation of texts!
Besides the PRO version of GTranslate well costs 78$ which seems ripped seen what's on offer and is only valid for single domain!

TheJoe · 27 February 2012 at 6:07 PM

Ciao Claudia,
what you ask is very simple, and partly explained in. You have to go to the official website “http://gtranslate.net /”, cliccare su “General HTML” and confirm. On the next page click on the button “Download”, a pop-up with which you can choose the languages, the size of the flags and other.

In the bottom of the pop-up there is a code to copy within the HTML on your site. Put it all online and you're done.

If you have any other questions write well.

claudia · 26 February 2012 at 7:57 PM

Hello!!
I'm looking for a widget to translate my website but I have not the faintest idea how it works .. you could give me a hand please? thanks Claudia

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.