Advertisement

Advertisement


How TO - Google Translate In Website

Google Translate is a free multilingual machine translation service developed by Google, to translate text written in a website from one language into another. It offers a huge list of languages to translate and has a very efficient, reliable and easy way to translate the webpage in whatever language the user wants. Google Translate supports over 100 languages at various levels.

We will use a cdn path given by google to implement the google translator in our page. Just follow the whole tutorial and you would be able to add it in any page you want.

Google Translate Button

We will implement it in a simple web page but you can make a beautiful design and then place the translator button properly. Look below-

Step 1 : Add a <div> element with the id google_translate_element. No need to panic it is a predefined id in the google's script, we will add the script's CDN path in the next step.

Your Web Page

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Google Translate </title> </head> <body> <h1>Your Website Heading</h1> <div id="google_translate_element"></div> </body> </html>

Step 2 :Set the CDN path to the translate API at google.com. This CDN will only work if you have an active internet connection otherwise not. So, pay your bills at time.

Google Translate API Script

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"> </script>

Step 3 : Add this javascript function. It will help you to specify the default page language.

Google Translate Script function

<script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script>

And now you are ready to translate the content of the page. Go to the editor to see the effects of the Translator. Click on Try This Code


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Google Translater for Website </title> </head> <body> <h2>Your Web Page</h2> <p>Click on the dropdown button to translate.</p> <p>Translate this page:</p> <div id="google_translate_element"></div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <p>You can translate the content of this page by selecting a language in the select box.</p> </body> </html>

Output

Google Translater for Website

Your Web Page

Click on the dropdown button to translate.

Translate this page:

You can translate the content of this page by selecting a language in the select box.


Translate only a Specific segment

Suppose If you want to change only one paragraph and want others to remain in the default language then what would you do?
It is very easy, you just have to add a class in the paragraph which you don't want to translate. There are two classes "translate" and "notranslate" which will help you. If you use "translate" in any paragraph as a class then, it will allow the translation of the content in that paragraph but if you use "notranslate" then the translation will not occur.

Look at the example below to understand it easily. Try it in the Editor.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Google Translater for Website </title> </head> <body> <h2>Your Web Page</h2> <p>Click on the dropdown button to translate.</p> <p>Translate this page:</p> <div id="google_translate_element"></div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <p class="notranslate"> This Paragraph will remain same because it is using notranslate class.</p> <p class="translate"> This Paragraph will change because it is using translate class. </p> </body> </html>









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.