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 “flag” within 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 it's’ 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?

8 WordPress plugin that will leave you more’ do without Some extensions for Firefox that do not keep to wanting more Add a caption to the photo pop-up with CSS3 Download PSD issued free of charge TCPDF: a PHP library to convert web pages to PDF