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.

    Create your list

  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.

    Build 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.

    Copy the URL

    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.

    Paste in the modified URL

  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.

    The finished list module

  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.

    Move the module

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 Share

Advertisements

16 thoughts on “Whatchoo talkin’ ‘bout?

  1. I like custom lists. This is a wicked deviation from what I use them for. And yeah – too right, I’d love to know how to get them icons working. That info would be well nice.Thumbs up, Greg.

  2. @ Jeff – Seriously? Is there a "Spaces-compatible" gadget that provides translation of the page? If so, then boy do I feel like a putz.

  3. LOL! Don’t feel like a putz, Greg! I used to have a translator gadget on my Space. Might still be there… Anyway, I think there are some, and I applied for a Bing one a while back, but it wouldn’t work on Spaces as it required scripting. But I was just joshing ya about the Book making comment you left a while back! LOL!

  4. Whew. Thanks, Jeff.Well, I looked around for one on the WL Gallery, and I found a couple that would translate pasted text, but not the entire page. The gallery is pretty run down these days. Most of the gadgets are from ca. 2006-7, and there are a lot of clocks featuring various celebrities. Disappointing. If I have some time, perhaps I’ll build a Spaces translator gadget. Never built a gadget before, but it looks like basically some wrapped JavaScript with a stylesheet and an XML manifest. Might be a fun little project.How ironic that the slick little Bing Translator gadget doesn’t work with WL Spaces out of the box. The principle behind my solution is actually based on how the Bing Translator add-in works, just without the JavaScript. I’d wager most of the widely available interactive tools, such as guest trackers, social sharing tools, and translators, use JavaScript, which makes them unsuitable for poor ol’ WL Spaces.

  5. Wow. Don’t know how I missed that. I did notice that it’s classified under Live.com > Web Gadgets instead of under Spaces. That’s probably why I overlooked it. I wonder what you’re supposed to do with it on your Live.com page? Anyway, I don’t feel too bad, as it fits awkwardly into a narrow column (Go button wraps) and requires more space than the one I finally made with the little flag graphics. So, it doesn’t translate RSS feed modules, eh? Wonder why?

  6. I wish it did or would ignore them. Does your method do that? If so, I’ll switch in a heartbeat, but when I try a translate just using Bing directly, it won’t work. Any ideas? I have considered putting the tool or translate options directly on posts, but that’s a lot of work.

  7. Most gadgets can add to Live, Spaces or the soon to be defunct events. Your method automates the link to Bing Translate, right? So, I am wondering if it’ll work on Spaces with feeds. Do you have any feeds? I see lists. Not sure…

  8. I’m crafty like that. It’s been the busiest Space-hackin’ day I’ve had in a long while. I partially take back all the cage rattling I did in LSB about WL Spaces needing to be put out of its misery. It just needs a good overhaul, but I think it’s still pretty cool down deep inside.

  9. BTW, Google translator does some weird stuff with random user tile icons near the top of the translated page, but I like the fact it doesn’t overwhelm the page with the Google Translate banner. Bing Translators banner is way too large IMHO.

  10. Hey, Greg, Don’t worry. You WERE being all clever. There’s been other times in history that two people thought up the same thing. Is does lessen your craftiness that somebody else thought it up first. X (nice disclaimer)

  11. Hi Greg and to all,Thank you a lot for this very very very USEFUL post… Have a Great and Wonderful Friendship Week everyone ,Bye-Bye and see you!!!…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s