Google AJAX Language API tutorial on the operation

I respond with this post, at the request of Andrea on how to insert the translator of Google in its web. There are several ways to take advantage of machine translation services available from Google and elsewhere. We can use plugins written by others, a simple JavaScript script from Google itself or mixed learning to use the API, ie a set of callable functions - as we shall see - in various ways.

Plugin

I will not dwell on this solution, as I think is not really relevant to the request of Andrew , if I understood well. It is also a solution sostanzialemente valid only for the blog and not for individual use and generic. I can only point out to users WordPress , Global Translator , perhaps the most simple, practical and popular plugins of this type.

Script Ready by Google

The easiest way to translate your website or your blog is to add a simple JavaScript script provided by Google. Just go to the site translate.google.com tab and click on 'Tools'. From this page you can preset the translation functions or leave the default. The script is very simple:

1

and as a result is obtained:

Google Translate

JavaScript AJAX APIs

The script definitely mixed leaves little room for customization! So who wants to begin using low level tools, will help leverage AJAX API used by JavaScript. The Google API in general, such as those used to create customized search engines , they follow their standards and are immediately easy to use. Who, in fact, has already used other APIs will be immediately comfortable. della nostra pagina HTML: The first thing to do is to include the API with a single line script to be inserted in the body HEAD of your page HTML:

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

At this point, the translation system is loaded (in part) and to do is to use it. A simple example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
< html >
< head >
title > < title > Example of Machine Translation </ title >
"text/javascript" src = "http://www.google.com/jsapi" >< / script > < script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script >
"text/javascript" > < script type = "text / javascript">
google.load ("language", "1");
/ *
** @ Name: simpleTranslation ()
** @ Description: draws the text into English 'by the HTML' text '
**: And translates it via the API (function) google.language.translate ()
* /
simpleTranslation function () {
var text = document.getElementById ("text"). innerHTML;
google.language.translate (text, 'en', 'en', insertHTML);
}

/ *
** @ Name: insertHTML ()
** @ Description: [event] - callback function that is called the termite
**: The translation (if it is successful or not). Obtained
**: The result, it is inserted into the HTML 'translation'
** @ Result: result contains the information indicated on the result
* /
insertHTML function (result) {
if (result.translation) {
document.getElementById ("translation"). innerHTML = result.translation;
}
}
/ /
google.setOnLoadCallback (simpleTranslation);
</ script >
</ head >

< body >

"text" > Hello, World! < / div > < div id = "text"> Hello, World! </ div >
"translation" >< / div > < div id = "translation"> </ div >

</ body >
</ html >

This example shows how easy it is to translate a portion of text in our page. All documentation in this regard is available on Google AJAX Language API
, Where you can find more examples and detailed documentation of all classes.

In the proposed example is a piece of text translated from English into Italian. You can also ask the system to automatically determine the 'language' source through the use of the function google.language.detect() :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
< html >
< head >
title > < title > Example of machine translation with auto-detect </ title >
"text/javascript" src = "http://www.google.com/jsapi" >< / script > < script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script >
"text/javascript" > < script type = "text / javascript">

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

autodetect function () {
var text = document.getElementById ("text"). innerHTML;
google.language.detect (text,
function (result) {
if (! && result.error result.language) {
google.language.translate (text, result.language, "it",
function (result) {
var translated = document.getElementById ("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
}
);
}
}
);
}
/ /
google.setOnLoadCallback (autodetect);
</ script >
</ head >

< body >
"text" > Hello, World! < / div > < div id = "text"> Hello, World! </ div >
"translation" >< / div > < div id = "translation"> </ div >
</ body >
</ html >

This other example is the same as above, except that the text in the element 'text' is automatically recognized and translated into Italian! Try to include other languages.

A useful example to check the translations, with two text area so as to dynamically insert portions more substantial:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< html >
< head >
title > < title > Example of machine translation with auto-detect </ title >
"text/javascript" src = "http://www.google.com/jsapi" >< / script > < script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script >
"text/javascript" > < script type = "text / javascript">

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

en2it function () {
var text = document.getElementById ("english"). value;
google.language.translate (text, 'en', 'en',
function (result) {
if (result.translation) {
document.getElementById ("Italian"). value = result.translation;
}
}
);
}
</ script >
</ head >

< body >
"30" rows = "10" id = "english" >< / textarea > < textarea cols = "30" rows = "10" id = "english"> </ textarea >
"javascript:en2it()" > Traduci < / a > < a href = "javascript: en2it ()"> Translate </ a >
"30" rows = "10" id = "italian" >< / textarea > < textarea cols = "30" rows = "10" id = "Italian"> </ textarea >
</ body >
</ html >

RESTful Interface: Flash, PHP and JAVA

I digress, perhaps, from the initial request, but I think interesting and necessary to complete the argument, we're at it. Through the use of protocol REST (RESTful interface) you can use the Google API via GET use basic methods provided:

1
http://ajax.googleapis.com/ajax/services/search/web

This technique allows you to use the translation in other languages ​​and other environments, such as Flash (Actionscript 3.0), PHP or Java.
In the case of Flash, for example, we have:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
HTTPService = new HTTPService ( ) ; var service: HTTPService = new HTTPService ();
= 'http://ajax.googleapis.com/ajax/services/search/web' ; service. url = 'http://ajax.googleapis.com/ajax/services/search/web';
v = '1.0' ; service. request. v = '1 .0 ';
q = 'Paris Hilton' ; service. request. q = 'Paris Hilton';
; service. resultFormat = 'text';
( ResultEvent . RESULT , onServerResponse ) ; service. addEventListener (ResultEvent. RESULT, onServerResponse);
( ) ; service. send ();

onServerResponse ( event : ResultEvent ) : void { onServerResponse private function (event: ResultEvent): void {
try {
Object = JSON . decode ( event . result as String ) ; var json: Object = JSON. decode (event. result as String );
/ / Now have some fun with the results ...
( ignored : Error ) { } Catch (ignored: Error ) {
}
}

The function JSON.docode() is available in the library AS3corelib , which I reported in a previous post.

The Code Snippets Google can find further documentation.

2 comments to "Google AJAX Language API tutorial on the operation"

  1. February 26, 2010 Andrea:

    Hello ... congratulations for the wide solution that you posted ...
    If you let me ask you a question, hoping to get answers as soon as possible ...
    I'm using the API with this funzioncina:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    "language" , "1" ) ; google. load ("language", "1");
    TrasLang ) { function initialize (TrasLang) {
    document. getElementById ( "text" ) . innerHTML ; var text = document. getElementById ("text"). innerHTML;
    ( text , function ( result ) { google. language. detect (text, function (result) {
    ! result. error & amp ;& amp ; result. language ) { if (! result. error & amp; & amp; result. language) {
    ( type , result. language , TrasLang. value , google. language. translate (type, result. language, TrasLang. value,
    result ) { function (result) {
    document. getElementById ( "text" ) ; var translated = document. getElementById ("text");
    result. translation ) { if (result. translation) {
    result. translation ; translated. innerHTML = result. translation;
    }
    });
    }
    });
    }

    I went to replace the text in the div with the text name and where I pass the language to translate a Select.
    Oh well ... everything works fine for blocks of code, but if the text is to translate the HTML code gives me error ...

    I was trying to see if there was a way to ignore the html tags but could not find anything, until I came across your nice article!
    The aim is to translate all the text that is not located within a TAG so that we can translate an entire site ... can you help? thanks

    Reply Quote
  2. February 26, 2010 Giovambattista Fazioli :

    @ Andrea: the solution may be quite complicated. As I understand it, looking at the current API provided by Google, html tags are not taken into account. etc… This is obviously a major problem on a very formatted text, which contains bold, italic or span tag with classes or other such small etc ...
    Unfortunately the problem is twofold: first solution could be those of "stripping", ie remove any html tag prlevato with innerHTML , and up here you could use a regexp on the string read.
    The difficulty is later. , span , etc… ? That is, once translated the string as the tag repositioned education as strong , em , span , etc ...?
    Probably you need to make to you this technology is not ideal. The API via JavaScript are used for small bits of text, you should try using the server functions, such manipolibili from PHP.
    That knows how I, this technique also has a limit of translation, as well as formatting. This means that "large" quantities of text are not translated, however, whether or not contain HTML.

    Reply Quote

Leave a comment

TAG XHTML PERMITS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL


Stop SOPA