As we all know about Google Translate is the place we all will go and paste the content that we want to translate,but what if we have power of that tool into our website or web page,yes it is possible with GOOGLE TRANSLATE (which is able to translate the page into more than 50 languages) to have that integrated into your own website,today we will see how with example
This tool is available from quite sometimes now,but the point is very less of the people from developer community are aware of this,so the reason behind this post is to show how any developer can make use of it and make it so simple to translate their pages...
The process...
The only need to have the power of translation on your website is copy and paste snippet of following code into your web page
<div id="google_translate_element">
</div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
</div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
Just put above snippet in your HTML mark up and run the page,you will get standard google translator logo as well as few options which we are interested in right now,see the image below
now you have the full control over language change,just select the language from available languages and see how google translate it for you
What if i do not want to translate some of the content???
Now question comes is what if there are certain portion which you do not want to translate and you want to keep it as it is,so that fix is also there,say there is copyright text or email address which you want to keep as it is,so you just have to add one CSS class to it and gogle will take care of it like following
Contact us at <span class="notranslate">daivagnas@gmail.com</span>
Now if you do not want to translate whole page so just add following
<meta name="google" value="notranslate"></meta>
I was quite amazed with the power which google provides,i hope you also do...i hope this post was useful
To see live demo just have a look at the gadget on this page at top-right-most corner