Make a Simple Web Page Translation Widget
Using Google Translate
by Megan Garrison
AltaVista Baby! - Not!
Recently Google switched its translation tools from Systran (also used by AltaVista's Babel Fish Translation) to its own Machine Translation System. Just for fun, I went over to take a look and play around with the new Google Translate (not that I know any other languages). Soon I thought, "Hmmm," and had this idea for a simple web page translation gadget using Google Translate
Getting Started
I opted for an include file so I can just plug it in whereever. First step was the create a variable for the current page url.
<!--- begin inc_translate.cfm --->
<!--- get & set the current url --->
<cfset thisPage = "http://#cgi.server_name#">
<cfif len(trim(cgi.server_port))>
<cfset thisPage ="#thisPage#:#cgi.server_port##cgi.script_name#?#cgi.query_string#">
<cfelse>
<cfset thispage ="#thisPage##cgi.script_name#?#cgi.query_string#">
</cfif>
Making the Form
Google offers translation for a number of "language pairs" After taking a peek at Google's own form, I made a simple form using just a few of the pairs with the current url as the action.
<form action="<cfoutput>#thispage#</cfoutput>" method="post">
<b>Translate this web page from English to</b>
<select name="langpair">
<option value="en|de">Deutsch</option>
<option value="en|es">Español</option>
<option value="en|fr">Français</option>
<option value="en|it">Italiano</option>
<option value="en|pt">Portuguese</option>
</select>
<input type="Submit" name="translateButton" value="Translate">
</form>
Processing the Form
Now to process the form and send the page url over to google for translation
Between setting the url and the form:
<!--- test for form submission --->
<cfif StructKeyExists(form,"langpair")>
<cflocation url="http://translate.google.com/translate?u=#URLEncodedFormat(thispage)#&langpair=#form.langpair#&hl=en&ie=UTF-8&oe=UTF-8" addtoken="no">
</cfif>
Notice I am using the URLEncodedFormat() function for the web page url var I am passing - this is important! otherwise google might throw an error.
<!--- final inc_translate.cfm --->
<!--- get & set the current url --->
<cfset thisPage = "http://#cgi.server_name#">
<cfif len(trim(cgi.server_port))>
<cfset thisPage ="#thisPage#:#cgi.server_port##cgi.script_name#?#cgi.query_string#">
<cfelse>
<cfset thispage ="#thisPage##cgi.script_name#?#cgi.query_string#">
</cfif>
<!--- test for form submission --->
<cfif StructKeyExists(form,"langpair")>
<!--- send to google --->
<cflocation url="http://translate.google.com/translate?u=#URLEncodedFormat(thispage)#&langpair=#form.langpair#&hl=en&ie=UTF-8&oe=UTF-8" addtoken="no">
</cfif>
<!--- form --->
<form action="<cfoutput>#thispage#</cfoutput>" method="post">
<b>Translate this web page from English to</b>
<select name="langpair">
<option value="en|de">Deutsch</option>
<option value="en|es">Español</option>
<option value="en|fr">Français</option>
<option value="en|it">Italiano</option>
<option value="en|pt">Portuguese</option>
</select>
<input type="Submit" name="translateButton" value="Translate">
</form>
Testing
NOTE: You cannot test this on your local server, it must be tested online because Google Translate needs access to the actual page in order to translate it. So, unless your development server allows access from the internet, you will have to upload your file to an online server to test your code.
Ok, so we need a page to translate (remember to include your include ;P)
<!--- translateme.cfm --->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Translate Me</title>
<style type="text/css">
<!--
body {
background-color:#fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color:#000;
}
#content {
width:700px;
margin:20px auto;
}
-->
</style>
</head>
<body>
<div id="content">
<p><b>The Web Programmer and the Genie</b></p>
<p>A web developer was walking along the beach when he found a lamp. Upon rubbing the lamp a genie appeared who stated "I am the most powerful genie in the world. I can grant you any wish you want, but only one wish."</p>
<p>The web developer pulled out a map of the Mediterranean area and said "I'd like there to be a just and lasting peace among the people in the middle east."</p>
<p>The genie responded, "Gee, I don't know. Fighting has been going on there since the beginning of time. I can do just about anything, but this is beyond my limits."</p>
<p>The developer then said, "Well, I am a web developer and I have a lot of clients. Please make all my clients satisfied with their websites, and let them ask for only sensible changes."</p>
<p>Genie: "Uh, let me see that map again."</p>
<br />
<cfinclude template="inc_translate.cfm">
</div>
</body>
</html>
Resources
