Quickly add other languages to your site using automatic translation

While it’s not yet a substitute for a full localization of your site, Machine Translation can be very useful in giving users who don’t speak your language a better experience when visiting you. The Microsoft Translator widget allows you to add this in-site, instead of them having to visit a third party translation service. In this article, you’ll see how simple it is to add it, and how you can be up and running in just a few minutes.

You’ll first see how to create a simple web site. You’ll then add the widget, and then you’ll take a tour of some of its additional features. If you have a site already, you can skip the first section!

Create a new web site using a WebMatrix template

Microsoft WebMatrix is a free tool that allows you to create, customize and publish websites. It’s amazingly easy to use, and can be downloaded from www.microsoft.com/web/webmatrix. We’ll be using this tool as we go along this tutorial.

WebMatrix gives you a number of different ways that you can create a new web site. You can use an existing open source application such as WordPress, Joomla, DotNetNuke or Umbraco, or you can create a site yourself by either coding everything or by using a small, simple template. You can see the options in the WebMatrix welcome screen

A great place to start is the Bakery template for this example. This template is a full-featured HTML5 site that provides a basic ecommerce presence, which sounds ideal for machine translation.

Select ‘Site from Template’ on the WebMatrix welcome screen

Select the Bakery template, give the site the name ‘My Bakery’, and press OK

WebMatrix will create a bakery site for you. Press the ‘Run’ button to see it in action.

You can take a look around the bakery site to see everything that WebMatrix has given you. In other articles on this site you’ll explore how to customize the site and see how to, for example, turn it into a bookstore, and how to use Paypal and Facebook on it. But for now, we’ll focus on language translation, so let’s take a look at how to do that.

Get the translation widget

The Microsoft Translator widget is implemented in HTML code. You can have the code generated automatically for you by Microsoft. In this section you’ll see how to do that, step-by-step.

Visit the widget page at www.microsofttranslator.com/widget.

Type in the website URL that you want the translator widget to appear on.

Select the current language of your site.

Choose whether or not you want the widget control to display. I’m going to uncheck this, as I want to use the toolbar. Right now this probably doesn’t make a lot of sense, but don’t worry, it will! The Widget can be placed anywhere on your page, and the user can use it to opt-in to translation. The toolbar is always at the top of your page, and thus you don’t need to design the page to accommodate it. As you can see, I’m leaving it unchecked.

Choose your translation settings. You’ll see that you have three options: manual, notify or auto.

  • Pick manual if you want to give your visitors the option to invoke translation themselves.
  • Pick notify if you want the browser to detect that they have a different language than your site, and present a toolbar for translation.
  • Pick auto if you want the site to always be translated.

Choose your preferred widget color and width. Don’t worry, you can go back and edit these later. Per above, the widget won’t be displayed anyway!

Agree to Microsoft Translator Terms of Use and click “Generate code” to generate the widget code to be placed on your site.

A block of code will appear in text box to the left of the generate button after you click ‘Generate code.’

You now have the code to get auto translation in your site. Copy the code before you close the browser!

Note: You can change the style elements of the <div> tag to customize the widget even further for your webpage.

Adding the translation to the bakery site

Now go back to WebMatrix and the bakery site you created earlier. One of the really nice things about WebMatrix is how it allows you to create site layout pages, which contain information that will appear on every page. These sound like the ideal place to add the widget code so that every page can be auto translated, and you’re only pasting once.

Within WebMatrix open the Files workspace. This will allow you to view the files in your bakery application. You’ll see the button to do this on the lower left hand side of the screen.

Select the _SiteLayout.cshtml page and open it. This page is the layout page for the whole site. You’ll see <div> tags for the <header>, <body> and <footer>. WebMatrix ships with helpers that make site layout like this super easy. We’re going to add the translator widget to the header of the page, so somewhere below

<head>
and above
</head>
Add the translator widget code
<div id="MicrosoftTranslatorWidget" style="width: 200px; min-height: 83px; border-color: #170D07; 
background-color: #362F2A;"><noscript><a href="http://www.microsofttranslator.com/bv.aspx?a=http
%3a%2f%2f20425cqlv4.adhostbeta.com%2f">Translate this page</a><br />Powered by 
<a href="http://www.microsofttranslator.com">Microsoft® Translator</a></noscript></div> 
<script type="text/javascript"> /* <![CDATA[ */ setTimeout(function() { var s = document.createElement
("script"); s.type = "text/javascript"; s.charset = "UTF-8"; s.src = ((location && location.href &&
 location.href.indexOf('https') == 0) ? "https://ssl.microsofttranslator.com" : 
"http://www.microsofttranslator.com" ) + "/ajax/v2/widget.aspx?mode=auto&from=en&layout=ts"; 
var p = document.getElementsByTagName('head')[0] || document.documentElement; 
p.insertBefore(s, p.firstChild); }, 0); /* ]]> */ </script></div>

Run your site. You’ll see the translator bar that your users can use to translate the site as they desire. Note that the ‘Fourth Coffee’ text is not translated, because it’s a graphic, but that all other text, including that within the button is, because it is HTML. Another good reason to use HTML and CSS for defining elements like buttons.

Note. If you sometimes have problems getting the toolbar to appear, it’s probably because you are testing your site with a browser that uses the same language as the site. A little trick that you can do here is to make the widget visible, but put it in the footer of the page. When you trigger a translation using the widget, you’ll see the toolbar appear. When you’re done testing, go back to the ‘toolbar only’ approach if you like.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!