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.
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.
Example 1: Text Link.
Example 2: Graphic Link.
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:
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.