Traducciones de textos con el API de Google

El traductor de Google no es perfecto pero, suele sacarnos de apuro y además, posee un API que nos permite integrarlo en cualquier sitio. Generalmente, lo utilizamos para dar la opción de traducir la página completa pero también es posible hacerlo parcialmente, es decir, colocar algún texto y dar la opción de traducirlo sin tener que salir de la página.

Para esto, necesitamos agregar el script si es que no lo tenemos ya que en un blog de Blogger, suele estar agregado para multiples tareas.

Como cualquier otro, lo ponemos antes de </head>;

<script src='http://www.google.com/jsapi' type='text/javascript'></script>

Ahora, donde se nos ocurra, vamos a colocar dos DIVs, en uno, agregaremos los enlaces a los idiomas y en el otro, el texto a traducir; en este ejemplo, sería algo así:

<div id="idiomas">
  <a id="L_es" class="lenguajeactual" href="javascript:void(0);" onclick="traduce('es');">Español</a>
  <a id="L_en" class="" href="javascript:void(0);" onclick="traduce('en');">Inglés</a>
  <a id="L_it" class="" href="javascript:void(0);" onclick="traduce('it');">Italiano</a>
  <a id="L_fr" class="" href="javascript:void(0);" onclick="traduce('fr');">Francés</a>
  <a id="L_pt" class="" href="javascript:void(0);" onclick="traduce('pt');">Portugués</a>
</div>

<div id="miejemplo">
  ....... el texto .......
</div>

Un poco de CSS para darle forma:

<style>
  #idiomas {
    background-color: #000;
    border: 1px solid #444;
    margin: 0 auto;
    padding: 5px 10px;
    width: 500px;
  }
  #idiomas a {
    border-radius: 5px;
    color: #DDD;
    display: inline-block;
    font-size: 17px;
    padding: 5px 15px;
  }
  #idiomas a:hover { color: #FFF; }
  .lenguajeactual { background-color: #444; }
  #miejemplo {
    border: 1px solid #444;
    border-top:none;
    color: #EEE;
    font-size: 16px;
    padding: 10px 20px;
    margin: 0 auto;
    width: 480px;
  }
</style>

Y por último, el script con la función:

<script>
  var lenguaje = "es"; // es el lenguaje por defecto
  google.load("language",1); // cargamos el API
  // definimos la función que ejecutará el API
  var callback = function(result) {
    if(result.translation) {
      var translateDiv = document.getElementById("miejemplo");
      translateDiv.innerHTML=result.translation;
    }
  }
  // ejecutamos la función
  function traduce(traducir) {
    document.getElementById("L_" + lenguaje).className = ""; // cambiamos al clase del enlace anterior
    var translateDiv = document.getElementById("miejemplo"); // es el DIV donde está el texto
    google.language.translate(translateDiv.innerHTML,lenguaje,traducir,callback); // ejecutamos la función del API
    lenguaje = traducir;  // preservamos el lenguaje actual
    document.getElementById("L_" + traducir).className = "lenguajeactual";  // cambiamos la clase del actual
  }
</script>

EspañolInglésItalianoFrancésPortugués

Este es un párrafo en español.

Puede ser traducido haciendo un click en el enlace anterior.

Utilizando el API de Google y es relativamente fácil de implementar.