In this article I am going to explain how to implement Google Translator API for translate your whole website.
This is a very simple and easy to understand implementation of Google Translator API, you just follow below steps to integrated Google Translator API.
1. You can login with Gmail id on this link: https://translate.google.com/manager/website/
2. After login you will get the below screen.
· Now Click on Add to your website now button for adding your website.
3. After Clicking Add to your website now button below screen will appear.
· Website URL: - Here enter your website URL.
· Website language: - Here give the default language of your website.
· Click to Next button to move on next option Plug-in Setting
4. After click on Next button now move on the next tab Plug-in Setting and its screen is given below.
· Translation languages: - Here is to radio buttons will appear
a. All Languages: - when I select this option then all languages will be automatically selected.
b. Specific languages: - When I select this option then you can select the specific languages.
· Display mode: - This option is for your drop down look which is contains all language lists.
· Click on Get Code button for the script.
5. After clicking Get Code button below screen will be appear.
· Now copy the Meta tag content and paste the before </head> tag.
· Copy and paste the snippet where you'd like to display the website translator plug-in on you website.
Code of my webpage: -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mindstick</title>
<meta name="google-translate-customization" content="57c7909c2edfbf10-9360dc5c1af4b926-g5ed69a3c1ebb5ba8-11">
</meta>
</head>
<body>
<div id="google_translate_element">
Hello mindstick wellcome.
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true }, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Output: -
Output after selected Hindi: -
Leave Comment