Whatchoo talkin’ ‘bout?

Update

In the interest of full disclosure, my Spaces compatriot Jeffrey brought it to my attention that there is indeed a viable, Spaces-compatible Windows Live Translator gadget available in the flagging WL Gallery. You’re more than welcome to use it instead, as it now redirects to Bing Translator and does practcally the same thing as my solution. And I thought I was being all clever.

Based on an on-going discussion in one of my Windows Live Groups, I decided to write a quick tutorial to show just how easy it is to create a simple translator for your Windows Live Space, powered by Bing Translator.

Of course, there are several ways to accomplish translation on the web. For starters, IE8 has a nifty, built-in translation accelerator, which I’ve previously discussed. The Windows Live Toolbar provides a simple button to translate any page. Bing Translator itself even has a pre-packaged widget that can be inserted into most pages. However, it requires JavaScript, which is verboten in the realm of Spaces. I poked around the Windows Live Gallery for a gadget that would do the trick, but alas, I came up short. But we’re intrepid Spacers…we’re not going to let those little limitations keep us down, right? C’mon, who’s with me?

As with anything related to Spaces, there are a bazillion different ways to accomplish this task, so for the purposes of our tutorial, I elected to go with a custom list, because it’s easy to manage, requires minimal coding, and can easily be placed almost anywhere on your space’s main page.

1. Click Lists > Add a list. Choose a custom list, enter a title, and add a description.

   

2. Click Save. The new list is created. Now it’s time to add your language options. Just add each language on a separate line. Since the visitors who’ll use this tool will be non-English readers, it’s a good idea to reference each language in it’s native name. If you’re unsure how to reference the name of the language or use special characters, use a service like Bing Translator, and simply paste the results into your list.

   

3. Click Next. Your custom list is displayed. Of course, the links don’t actually do anything yet.
4. Now it’s time to wire up each alternate language in your list. In a separate browser tab or window, navigate to http://www.microsofttranslator.com. Set the “To” language to Spanish and enter your space’s URL.

   

5. Click Translate. Your page is translated, and the results are displayed. We’re really more interested in the URL than in the results. Select the URL in the address bar of the browser and copy it to the clipboard.

   

   Here’s the URL I got from Bing Translator:

   http://www.microsofttranslator.com/BV.aspx?ref=Internal&a=http://gregsedwards.spaces.live.com

   The query string arguments (everything after the ? symbol) tell the translator how to perform its job. We’re going to use this URL to power our English/Spanish translation list item, but you might notice that there’s nothing in there that specifically tells the translator which languages to use. Bing Translator normally uses a combination of JavaScript to power interactivity on the translation page and cookies to remember your previous settings. So, we’ll need to add an additional argument to force the translation from English to Spanish.

6. Modify the URL as shown below. You can do this in Notepad, any text editor, or directly in your custom list (although, the editing space is a bit cramped):

   http://www.microsofttranslator.com/BV.aspx?ref=Internal&lp=en_es&a=http://gregsedwards.spaces.live.com

   Notice the new argument, &lp=en_es, which has been inserted into the query string. Here’s the breakdown:

   • The ampersand (&) is used to indicate the start of a new argument.
   • The value lp stands for language pair.
   • The value en_es stands for English (en) to Spanish (Español, or es). The language code is typically the first two letters of the language’s native name (i.e., French is fr, German is de).
7. Make sure the argument precedes the URL of your space, otherwise it won’t work properly.
8. Back to our custom list. Click Edit to modify the Español list item.

   

9. Paste the modified Bing Translator URL from step 6 into the Web address field. To help the translator list module fit into a tight space on the space’s main page, we’ll avoid adding a description.

   

10. Click Save. You now have a functional Spanish translator for your space!
11. Repeat the process for other languages. Make sure to modify the lp argument for each target language accordingly.
12. When you’re finished, return to your space’s main page. The custom list module is added to the page automatically.

    

13. To better fit the translator into your page, you may elect to move the module to a narrow column and possibly suppress the title.

    

That’s it! Now your international visitors will have a much easier time navigating in your space and reading your blog posts.

Bonus Round

Like I said, there are several ways to present your translator links. For extra credit, you can also try using a custom HTML module instead of a list. The principle is the same, but a custom HTML module allows you to spice up the interface a little bit by adding image links (such as these little royalty-free flag icons I got courtesy of FamFamFam). Perhaps I’ll write a follow-up soon about how to accomplish that trick.

That’s all for now. Happy translating!

– Greg

Share