Integrate Google Translate on website is a great way to provide your content all over the world with great content. But as a developer, we have to get that knowledge about how Google Translate works.
How Google Translate works
If we think that Google has a huge database of words then the answer is “No”.
Generally, Google Translate working is based on “SMT” (statistical machine translation).
- Means Google gets the data from the user entries and they used to find those words parallel for matching.
- They take input letters and produce an output sequence of those letters.
Done with a small explanation about how Google Translate works!
Now we start How to Integrate Google Translate on website step by step,
- First, we create a
<div>withid="google_translate_element"
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html> <body> <h1>Integrate Google Translate on website</h1> <div id="google_translate_element"></div> </body> <html> |
- On the second step, we get the google translate API script from google official site and put it on the website.
|
1 2 |
//API Script <a href="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit</a> |
- After that, we create a javascript function for google translate on website
<div>
|
1 2 3 4 5 |
<script type="text/javascript"> function googleTranslateElementInit(){ new google.translate.TranslateElement({pageLanguage: 'en'} 'google_translate_element'); } </script> |
Complete Source Code of Google Translate On Website
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en-US"> <meta charset="utf-8"/> <body> <h1>Integrate Google Translate on website</h1> <p>Hello Coder!</p> <p>Translate this complete page:</p> <div id="google_translate_element"></div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); } </script> <a href="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit</a> </body> </html> |
Output:
Happy Coding..!
Was this article helpful?
YesNo
7 Replies to “How to Integrate Google Translate on website”