Last week my family and I left for a much anticipated vacation in Italy. But rest assured, before we left town, our team queued up a fun collection of tips to run while we’re gone. If everything works properly, those tips should continue to flow uninterrupted each Monday until we return.

In the spirit of travel, we’d like to offer up a tip and tutorial on how to add translation links for international readers of your website or blog. In this example, we’ll add a small collection of tiny flags representing different languages. When a reader clicks on a flag, the page is translated using Google’s translation services.

Click on a flag to translate this tip into French, German, Italian, Russian, Japanese, or Chinese. Then read on in your language of choice for details on how to recreate these links yourself.

The Easy Way: Single Page Links.

Creating a single translation link is pretty easy. Just visit the Google Translate site, type in your URL, pick the translation that you want to use, and click “Translate.”

You’ll get a translated version of your site. Copy and paste that resulting URL as a link on your website and you’re set.

However, with this approach, you’ll have to build each translation link by hand. That’s fine for a single page, but if you want to include translation links on many pages across your website or blog, you’ll need to turn to a script that can generate the links dynamically.

The Harder Way: Javascript.

To accomplish an automatic translation link, we are going to attach a bit of Javascript code to some graphics or text links on your webpage. You don’t have to know how to write Javascript to accomplish this, but you will need to be comfortable digging into HTML.

Here is the basic Javascript code we’ll be using:

And here is an English translation for what that code is doing:

Line 1: Go to a new URL which is...
Line 2: The Google Translation page for..
Line 3: The URL you are viewing right now.

This creates a dynamic link to Google’s translation site for any web page you happen to be viewing.

Note: The bold text in red indicates the text that will be changed based on the target language you wish to translate into. Here is a list with some language codes you can access through Google:

fr = French
de = German
it = Italian
ru = Russian
ja = Japanese
zh-C = Chinese (Simplified)
zh-TW = Chinese (Traditional)

The Translation Links.

Don’t worry about understanding all the Javascript. We’ll provide a couple links below that you can copy and paste. You will need to be comfortable working with HTML code to make use of this.

Example 1: Text Link.

Result: French

Example 2: Graphic Link.

Result:

Note: You’ll have to replace “flag.gif” with the URL of your flag graphic.

The Flag Graphics

For the actual flag graphics, we recomend a free icon collection we linked to in August 2006 (Free! Icons for your Website, Blog, Etc.). Check out a great set of tiny country flag icons at famfamfam.com:

famfamfam Flag Icons

Good luck. We hope we’ve included enough clues in this mini-tutorial to allow you to dig in and create your own translation links.

Source: The javascript in this tip comes from the answer to How can I add “translate into” country flags to my pages? on the Ask Dave Taylor Q&A site. We covered Google Translate back in QuickTips #86 – Translate foreign language websites.)