Add Google Translation Links

Posted Jan 10, 2008
Last Updated Nov 12, 2011

If you want to add links to translate your web pages into multiple languages, you can use the Google Tanslation Tool. That is a good tool... but if you want to add custom text and graphics, you may use the following script to add image and text javascript:

Below are explanations for two functions included in the script, along with tips on using the code.

function smo_write_google_tanslate_links ( outputtype, targettype, target, mediadirectory, langarray )

<script type="text/javascript"
src="http://www.shawnolson.net/scripts/smo_google_translate_funcs.js"
></script>

smo_write_google_translate_links is the core function. This will output HTML code that will show images, text links or both that link to the Google translation tool to translate the current page. (The function is dependent on other functions included in the script.) The attributes are explained below:

  1. outputtype (string) : You should enter one of the following strings: 'text' to display text links; 'image' to display image links; 'both' to display both.
  2. targettype (string/mixed) : You must enter the target type for the output. Enter 'id' if you want to fill an element with the translation links; enter 'write' to write the links to the location in the document where the function is called; pass an empty string to return the HTML contents for use in other functions.
  3. target (string) : target is only used if targettype is set to 'id'. Pass the ID of the element you want to put the links in; the contents of the element will be replaced with the links.
  4. mediadirectory (string) : when using image links, you must pass the directory where you keep the images for this function. A list of images you must create is listed below. If no value is passed, the code assumes that the images are housed in the document's current directory.
  5. langarray (array) : not yet in use. This value will allow you to designate which languages to use and what order to place them when implemented.

The images you must create include:

  • flag_china.gif
  • flag_france.gif
  • flag_italy.gif
  • flag_portugal.gif
  • flag_spain.gif
  • flag_korea.gif
  • flag_germany.gif
  • flag_japan.gif

Example code below:

<script type="text/javascript">smo_write_google_tanslate_links('text','write',null,null,null)</script>

function smo_goto_google_translate(language)

This function is utilized by smo_write_google_tanslate_links(). What this function does is actually send the browser to the Google tranlation site for the current page, using the language passed. The passed language must be one of the following values:

  • chinese
  • japanese
  • german
  • french
  • italian
  • spanish
  • portugese
  • korean

To make a button to translate a page into German, you could add an onclick handler to call smo_goto_google_translate('german'). Note that the values must be lowercase.


 

As with all of my code, please make sure that your usage of these scripts abides by my Terms & Conditions.

Comment

No HTML Tags are permitted.

Benjamin Thomas

Jun 14, 2009

Hi there,



This seems to be a really useful script. Thanks for sharing.

I would like to include only a Japanese translation button on my homepage. Also I would like to use a small flag instead of text. I tried a few things with this script but it seems I can not output only one language. Also it`s important that it translates the exact page the user is browsing.



Could you kindly let me know how to adapt this script for a Japanese translation button?

Many thanks!
Angry Teapot Level Design Awards

Newsletter Subscription