Dr Nic

Foreign tourists to your websites (part 2)

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.

Related posts:

  1. Migrating project websites to github pages with sake tasks, new websites with jekyll_generator Its almost Christmas time and that means presents. It...
  2. DIY widgets – How to embed your site on another site UPDATE: Demo and tutorial fixed for IE7. UPDATE: Opera-supporting code....
  3. Translation of RSS feeds a failure (part 3) My path to spying on the Japanese wouldn’t be complete...
  4. Yehuda Katz starts a blog Yehuda is the creator of autoDB – the wonderful admin...
  5. [ANN] Spy on the Japanese Rubists Their Ruby code is surrounded by a shrouded of Japanese...

One Response to “Foreign tourists to your websites (part 2)”

  1. thomas says:

    Hihi, i found that post by a funny accident, but the end, about the migration , really made me smile…
    Adios
    Thomas

    ps you in the ‘footer’ you have a display bug with the picture hover, at least in my FF3.