Add Inline Language Translation to your Website

Written by Amit Agarwal on Mar 10, 2011

translation Google Translate, Windows Live Translator and Yahoo! Babelfish have made it very easy for web publishers to add language translation capability into their web pages. Include a line of Javascript code anywhere in your blog template and visitors from other countries will be able to translate and read your content in their own native language. Simple.

While these solutions work, the only problem is that when people translate your web pages, everything gets reloaded under a different URL and this is not the best user experience. You may therefore want to try this AJAX based language translation where the content is translated inline in real-time while the visitor remains on your site.

Inline Translation powered by Google AJAX Language API

Watch this screencast video to see how inline translation works or go here for a live demo.

There are many advantages offered by Google AJAX Language Translation API vis-a-vis the regular online translation service of Google. You are in complete control of page elements that are to be translated, all existing links and sharing features on your web page stay intact and best of all, visitors get a better experience.

If you liked what you just saw, it is something very easy to implement and internally uses Google API that you may use on any site without any restrictions.

How Inline Language Translation Works ?

The basic idea is that when a visitors clicks a language flag or selects a new language from the drop down, we invoke the Google Translate API and replace (actually hide) the existing text with the translated text returned by the Google API. The cycle is repeated when another languages is selected.

Your visitors can also switch to the original language of the web page anytime.

Add Google AJAX Language API in your Website

If you are ready to take the plunge, here’s what you need to do to get this working on your site.

Step 1: Edit your blog template and place everything that you want to translate inside a <div> tag with some unique id. – let’s say <div id="article">….</div>

translation-div

Step 2: Now place this code – <div id="translation"></div> – near the article div you configured in Step 1. The second div will actually house your translated text so you may add it just above or below the article div.

Step 3: And here’s the actual translation code. If this looks geeky, don’t worry too much – just copy-paste it inside the <head> tag of your blog template as it is.

&lt;script type=&quot;<span style="color: #8b0000">text/javascript</span>&quot; 
        src=&quot;<span style="color: #8b0000">http://www.google.com/jsapi</span>&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;<span style="color: #8b0000">text/javascript</span>&quot;&gt;

 <span style="color: #008000">// Initialize version 1.0 of Google AJAX API</span>
 google.load(&quot;<span style="color: #8b0000">language</span>&quot;, &quot;<span style="color: #8b0000">1</span>&quot;);

 <span style="color: #0000ff">function</span> translate(lang) {
   <span style="color: #0000ff">var</span> source = <span style="color: #0000ff">document</span>.getElementById(&quot;<span style="color: #8b0000">article</span>&quot;).innerHTML;
   <span style="color: #0000ff">var</span> len = content.<span style="color: #0000ff">length</span>;

   <span style="color: #008000">// Google Language API accepts 500 characters per request </span>
   <span style="color: #0000ff">var</span> words = 500;

   <span style="color: #008000">// This is for English pages, you can change the</span>
   <span style="color: #008000">// sourcelang variable for other languages</span>
   <span style="color: #0000ff">var</span> sourcelang = &quot;en&quot;;
   <span style="color: #0000ff">document</span>.getElementById(&quot;<span style="color: #8b0000">translation</span>&quot;).innerHTML = &quot;<span style="color: #8b0000"></span>&quot;;

   <span style="color: #0000ff">for</span>(i=0; i&lt;=(len/words); i++) {
     google.language.translate (source.substr(i*words, words), 
                 &quot;<span style="color: #8b0000">en</span>&quot;, lang, <span style="color: #0000ff">function</span> (result) {
     <span style="color: #0000ff">if</span> (!result.error) {
     <span style="color: #0000ff">document</span>.getElementById(&quot;<span style="color: #8b0000">translation</span>&quot;).innerHTML
           = <span style="color: #0000ff">document</span>.getElementById(&quot;<span style="color: #8b0000">translation</span>&quot;).innerHTML 
           + result.translation;
    } }); }  
  
  <span style="color: #008000">// Hide the text written in the original language</span>
  <span style="color: #0000ff">document</span>.getElementById(&quot;<span style="color: #8b0000">article</span>&quot;).style.display = 'none';
  <span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span>;
 }

 <span style="color: #008000">// Switch to the original language</span>

 <span style="color: #0000ff">function</span> original() {
  <span style="color: #0000ff">document</span>.getElementById(&quot;<span style="color: #8b0000">translation</span>&quot;).style.display='none';
  <span style="color: #0000ff">document</span>.getElementById(&quot;<span style="color: #8b0000">article</span>&quot;).style.display = 'block';   
  <span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span>;
 }
&lt;/script&gt;

Step 4: The last step is to include the translation flags or translation drop-down menu in your template.

I prefer having language names instead of country flags because a flag may not always be the best representation of a language.

&lt;a href=&quot;<span style="color: #8b0000">#</span>&quot; onclick=&quot;<span style="color: #8b0000">original();</span>&quot;&gt;Switch to English&lt;/a&gt; 
&lt;select onchange=&quot;<span style="color: #8b0000">translate(this.options[this.selectedIndex].value);</span>&quot;&gt;
&lt;option value=<span style="color: #8b0000">&quot;de&quot;</span>&gt;deutsch&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;pt&quot;</span>&gt;português&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;fr&quot;</span>&gt;français&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;ja&quot;</span>&gt;日本語&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;ar&quot;</span>&gt;عَرَبيْ&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;it&quot;</span>&gt;italiano&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;ru&quot;</span>&gt;pусский&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;po&quot;</span>&gt;polski&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;zh-CN&quot;</span>&gt;中文&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;es&quot;</span>&gt;español&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;ko&quot;</span>&gt;한국어&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;nl&quot;</span>&gt;nederlands&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;hi&quot;</span>&gt;हिन्दी &lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;el&quot;</span>&gt;Ελληνική&lt;/option&gt; 
&lt;option value=<span style="color: #8b0000">&quot;ro&quot;</span>&gt;română&lt;/option&gt; 
&lt;/select&gt;

Document Studio

Generate beautiful and pixel-perfect documents in PDF, Word, Excel or PowerPoint.

Download New
Mail Merge

Send personalized emails from Gmail, include unique attachments, track opens and more.

Download Popular
Save Emails

Download email messages and file attachments from Gmail to your Google Drive.

Download Popular

Subscribe to our Email Newsletter