Saturday, October 11, 2008

Translation Widget: Translating your current post right inside your blog!

Posted by xarenina at 1:28 PM

Dear Friend,

I come across a tutorial on one of the many Google API documentations showing how to add translated text to the same web page. Google also announces very recently that they support more languages for pair translation, Vietnamese included. I'm really glad this is happenning, because I've been jealous with some other languages which enjoy free language translation services for years.



In this post, I will show you how I make the translation available on my blog.



I hope you will be inspired to do the same thing on your blog. If you come up with any other ideas on how to use the Translation API, please post them here as well.

Here are two simple steps to install the widget:

1. Follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4. Make sure the variable var toLang="vi"; shows your target language (in my case "vi" for Vietnamese, you can see all the available languages here: Languages Enum ):

<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
    <div id='translation' style='font-style:italic;color:navy'/>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/transtation-widget-translating-your.html'>Hoctro</a></u></h6>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>

var fromLang="en";
var toLang="vi";

    function transInit() {
      var text = document.getElementById("bodytext").innerHTML;
      google.language.translate(text, fromLang, toLang, function(result) {  
      if (!result.error) {  
          var container = document.getElementById("translation");  
          container.innerHTML = result.translation;  }});
    }

   google.load("language", "1");
   google.setOnLoadCallback(transInit);

    </script>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

2. On your new post, place this pair <div='bodytext'> and </div> around the text you want to tranlate into your favorite language.



If you are going to use this a lot, I suggest making it part of the template so you could have them at the start of a new post. In Settings->Formatting, add this code




Post something new and see if this works. I admit that even though my tutorial is not translating well into Vietnamese, it's much more than I ever wanted. I read the recently published book "Planet Google", the author Randall Stross states that Google uses the statitical machine translation method, using trillions of references to come up with the results. This explains why in certain languages such as French or Spanish, the quality of the translation is much higher than the less frequenly used languages on the net, since Google acquired and indexed far more statistical data for "the Algorithm" to draw from.

Until next time,

Hoctro
10/11/08

 

Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)