Dr Nic

As a follow-up to the recent “Spy on the Japanese” post, you might want a nice set of links for your visitors to translate your page sinto their language.

But, here are your requirements (I can read your mind, I’m a doctor):

• You know what countries visit your site, so you want to configure it yourself.
• Since it requires Javascript to be turned on for it to work, you don’t want the links to show if the visitor doesn’t.

Solution: create the links using Javascript.

To allow translations of your blogs/websites via Google Translation, add the following inline Javascript into the sidebar. It was designed for Wordpress - you may need to twiddle with the DOM elements created and/or CSS if it looks bad on your site.

The flags can be found at: http://www.famfamfam.com/lab/icons/flags/, and I’ve assumed you’ll store the png images in the /images/flags/ folder. If you store them somewhere else, change the images variable at the top of the script.

So, paste this script into your sidebar and you are saying “Aliens Welcome Here” [1].

      <script>
        // Each lang in an array: [google lang code, flag name, language name]
        // Flags available at: http://www.famfamfam.com/lab/icons/flags/
        var to_langs  = [['ja', 'jp', 'Japanese'],
                         ['de', 'de', 'German'],
                         ['es', 'es', 'Spanish']];
        var from_lang = 'en';
        var images     = '/images/flags/';

        document.write("<li id='translation'></li>");
        var liDiv = document.getElementById('translation');
        var title = document.createElement("h2");
        title.appendChild(document.createTextNode("Translation"));
        liDiv.appendChild(title);
        var ulDiv = document.createElement("ul");
        liDiv.appendChild(ulDiv);
        for (var i=0; i < to_langs.length; i++) {
          var to_lang = to_langs[i][0];
          var flag    = to_langs[i][1];
          var name    = to_langs[i][2];
          liDiv = document.createElement('li');
          ulDiv.appendChild(liDiv);
          liDiv.innerHTML = "<a href='#' onclick=\"location.href=" +
            "'http://translate.google.com/translate?langpair=" +
            from_lang + "&" + to_lang + "&hl=" + to_lang +
            "&ie=UTF-8&oe=UTF-8&u='" +
            " + encodeURIComponent(location.href)\">" +
            "<img border=0 src='" + images + flag + ".png' /> " + name + "</a>";
        }
        var getme = "<a href='http://drnicwilliams.com/2006/08/30/foreign-tourists-to-your-websites-part-2/'>How to translate my site?</a>";
        var getme_li = document.createElement("li");
        getme_li.innerHTML = getme;
        ulDiv.appendChild(getme_li);
      </script>

[1] Americans mightn’t know that when foreigners visitor your country, we are presented with paperwork to fillout that refers to us as Aliens. Perhaps your government never watches its own Hollywood movies, but this isn’t the best phrase to use, I think. Not very welcoming.