Saturday, May 9, 2015

Custom integration of Google Translate in website

If you are developer or site owner and want to create multi language website using google translate than must add google translate toolbar easily from your google account Website Translator.Google provide you source code for your website just copy and past it to your website according to your setting that you set while create translate toolbar from Google Account.See complete steps.
When you want to add google translate with custom option like as check box,radio button,drop down or listing event for change language than need to old translate code as below.
Add translate script at head of website
 
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript">
 
Set new translate element for define translate languages.
 
<script>
function googleTranslateElementInit() {
      new google.translate.TranslateElement({ includedLanguages: 'en,ar,hi,fr', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

Here in  'includedLanguages' set all languages code that you want to translate here include only 4 languages.
Create list for change language with onclick event.


<li><a onclick="return ChnageLang('ar')" title="ar">العربية -  Arabic</a></li>
<li><a onclick="return ChnageLang('')" title="ar">English  -  English</a></li>
<li><a onclick="return ChnageLang('fr')" title="ar">Français  -  French</a></li>
<li><a onclick="return ChnageLang('hi')" title="ar">हिंदी  -  Hindi</a></li> 
 
Here create new 'ChnageLang' event when click on below list for change language.
 
<script>
      function ChnageLang(value){
       createCookie('googtrans','/auto/'+value,1,'');
      }
      function createCookie(name, value, days, domain) {
         var date = new Date();
         date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
         var expires = "; expires=" + date.toGMTString();
         document.cookie = name + "=" + value + expires + "; domain=" + domain + "; path=/"';
      } 
</script>

No comments :

Post a Comment