Choose and Create a Language Selector

Typically you will add a hyperlink to the header or footer of the source HTML pages allowing users to switch to your translated sites. For example, you may add the link “Español” to the top of the page to allow users to switch to the Spanish version of those pages. You can use any type of HTML construct for the language selector, but simple is best.

Avoid using country flags as they may have political overtones. Drop-down lists should be used only if you are supporting more than 3 languages. If you can, display the links for each language except for the current language.

Standard Implementation

Because GlobalLink Web Proxy maintains the identical URL structure of the Origin Server, the user should be able to select a language from any page and have that same page render in the newly selected language. Don’t make users return to the home page to switch languages.

Step 1: Choose the Naming Convention

Choose a naming convention for your translated language links (hostname of example.fr and language "Français" are used below as examples and should be replaced with your chosen hostname and desired language). You are free to choose any convention you would like, even one different from the examples that follow.

Best Practice: List the language name localized into the appropriate target language (see Language Names and Codes for more information).

Step 2: Add Code Snippets

Include these three snippets of code on every page that you wish to support a language selector:

HTML

Empty div (note: the ID can be anything you choose), for example:

<div id="languageSelector">&nbsp;</div>

CSS

A quick rule to hide the empty div to prevent formatting issues (note: the selector should match the ID that you choose in the HTML)#languageSelector { display: none; }

JavaScript

<!-- Begin - OneLink Language Switcher -->
<script>
  function OneLink(sHostname)
  {
document.location.href = document.location.protocol + "//" + sHostname + 
document.location.pathname + document.location.search;
}
</script>
<div class="OneLinkHide OneLinkKeepLinks">
<a class="fr-btn" href="javascript:OneLink('example.fr')">Français</a>
</div>

<div class="OneLinkShow OneLinkKeepLinks">
<a class="en-btn" href="javascript:OneLink('www.example.com')">English</a>
</div>
<!-- END - OneLink Language Switcher -->

document.location.pathname may be replaced with a standard homepage path in order to display only your homepage when the user changes languages and you do not desire to have content-sensitive page switching.

Example

If your languages are French and German, you could insert the following code in your HTML for each language:

<!-- Begin - OneLink Language Switcher -->
<script>
  function OneLink(sHostname)
  {
document.location.href = document.location.protocol + "//" + sHostname + 
document.location.pathname + document.location.search;
}
</script>
<div class="OneLinkHide OneLinkKeepLinks">
<a class="fr-btn" href="javascript:OneLink('wwww.example.fr')">Français</a>
</div>
<div class="OneLinkHide OneLinkKeepLinks">
<a class="de-btn" href="javascript:OneLink('wwww.example.de')">Deutsch</a>
</div>
<div class="OneLinkShow OneLinkKeepLinks">
<a class="en-btn" href="javascript:OneLink('wwww.example.com')">English</a>
</div>
<!-- END - OneLink Language Switcher -->

We do not recommend using country flags or drop-down lists (unless your site has more than 3 languages) as language selectors.

Step 3: Hide Your Selector Until Go-Live

Until you are ready to show the world the translated site, hide the Language Selectors on your origin site. This will ensure that users will not be able to toggle from the source to the translated site until it is ready.

Step 4: Unhide Selector to Go Live

TranPerfect.com will notify you when the translated site is ready for users. At that point, unhide the Language Selector from the origin site. TranPerfect.com will ensure that your Language Selector appears on the translated site.