How can I make a site viewable in multiple languages?

4 Views

I am aware of the question What are options are there to implement a multi language site, but the answers there are focused on multi-language support on the backend as well as the frontend.

I am only concerned with offering multi-language viewing of a site’s content, not multi-language content creation.

Read More

Could it be as simple as putting the Google Translate Tools code on my site? I see that there are at least a couple of plugins that offer this functionality – anyone have experience with those?

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. If your just looking for a way for your site to be viewed in other languages I would defiantly recommend using Google Translate Tools. I just add it to the theme:

    <div id="google_translate_element"><span id="trans">Translate: </span></div>

    You can hide the Google Logo and funky colors in your css:

    .goog-logo-link{display:none;}

    Instead of calling the Google Translate js I just copy the return script and add it to my main js file.

    Edit

    Google provides embed code to use on your website:

     <div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

    The first line: <div id="google_translate_element"></div> can be placed where you want the translate drop down box to be shown:

    alt text

    The section between the first set of <script> tags are the language and layout options. The last set of <script> tags call more javascript which Google inserts inline in your html while the dom is loading. To speed up this process and avoid the extra http request and inline script I remove the last call and add the code returned by Google into a “master” js file I use that contains all my custom javascript combined into one file. The code that Google returns is:

    (function(){var d=window,e=document;function f(b){var a=e.getElementsByTagName("head")[0];a||(a=e.body.parentNode.appendChild(e.createElement("head")));a.appendChild(b)}function _loadJs(b){var a=e.createElement("script");a.type="text/javascript";a.charset="UTF-8";a.src=b;f(a)}function _loadCss(b){var a=e.createElement("link");a.type="text/css";a.rel="stylesheet";a.charset="UTF-8";a.href=b;f(a)}function _isNS(b){b=b.split(".");for(var a=d,c=0;c<b.length;++c)if(!(a=a[b[c]]))return false;return true}
function _setupNS(b){b=b.split(".");for(var a=d,c=0;c<b.length;++c)a=a[b[c]]||(a[b[c]]={});return a}d.addEventListener&&typeof e.readyState=="undefined"&&d.addEventListener("DOMContentLoaded",function(){e.readyState="complete"},false);
if (_isNS('google.translate.Element')){return}var c=_setupNS('google.translate._const');c._cl='en';c._cuc='googleTranslateElementInit';c._cac='';c._cam='';var h='translate.googleapis.com';var b=(window.location.protocol=='https:'?'https://':'http://')+h;c._pah=h;c._pbi=b+'/translate_static/img/te_banner_bk.gif';c._pci=b+'/translate_static/img/te_ctrl.gif';c._phf=h+'/translate_static/js/element/hrs.swf';c._pli=b+'/translate_static/img/loading.gif';c._plla=h+'/translate_a/l';c._pmi=b+'/translate_static/img/mini_google.png';c._ps=b+'/translate_static/css/translateelement.css';c._puh='translate.google.com';_loadCss(c._ps);_loadJs(b+'/translate_static/js/element/main.js');})();

    This is mainly for performance reasons to avoid the extra request and avoids the website having to communicate with Google unless a language is chosen from the drop down box.

    The drop down box can be customized using css. For example here is how I display the box on the site I used it on.

    alt text