Adding Google Translator in a Liferay portal

People always prefer their native language for their convence. To browse a website with a feature of tranlsation is what most of them would like. Liferay provides a feature where in we can have our portal in different languages. This is achieved using  Language-ext.properties file.

But there are few drawbacks in using the above.
The  drawbacks are :
1.This requires a customisation in all the Language_xx.properties file. (For eg. If we want 30 languages option then 30 Language_xx.properties files need to be customised).

2.Even after doing so the entire portal is not changed to the language selected,only the variables mentioned in the  Language_xx.properties file are changed and anything from database is not changed.

So here is the convenient solution of having your portal in different languages by integrating the Google's API in two simple steps

Step1:

Copy and paste the below snippet code in the "portal_normal.vm" file

<div id="google_translate_element"></div>
<script type="text/javascript">
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>

Step 2:
We can further change the position of the translate tab. To change the display mode in Horizontal, change the layout to
  layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
For Bottom-right Position:    floatPosition: google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT
For Bottom-left Position:    floatPosition: google.translate.TranslateElement.FloatPosition.BOTTOM_LEFT

and so on..

To use the the Google's translator only in the selected sections of a website, we can use the below code

<script>

          function googleSectionalElementInit() {

new google.translate.SectionalElement({

sectionalNodeClassName: 'goog-trans-section',

controlNodeClassName: 'goog-trans-control',

background: '#99ff99'

}, 'google_sectional_element');

}

</script>

<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=auto"></script>

Add an element with a class name “goog-trans-section”  and a child element with class name “goog-trans-control”. On clicking the parent element, the contents within the child element will be translated.

Note: We can further customise the look and feel of the Google translator toolbar by strictly maintaining the Google trademark and logos.

The following are the merits and demerits of Liferay's translation and other translation APIs (eg. Google Translator)

Liferay's Translation
 Merits  1.Its looks professional
 2.Performance will not be affected.
 3.Translation of the content will be controlled by ourselves.

Demerits
 1.It will not translate Dynamic contents
 2.Static contents need to be mentioned in properties files manually
 3.The number of properties file increases as a number of language increases
 4.For CMS (i.e Web content and page navigations) we need to create articles in the                 respective languages seperately


Google and others Translation tools :
 Merits  1.No need of any properties file changes
 2.Dynamic content as well as static content will be translated in the respective languages
 3.For Web content and page navigations need not create articles in different languages
 4.Imlementation is easy.
De Merits  1.Performance issue.
 2.The translation control is handled by third party
 3.We need to adhere to the terms & condition of the third party
 4.We don't have control over any issues that are caused by the third party applications .

Posted in: LifeRay