Home > DeveloperSection > Articles > Integrated Google Translator API in your website

Integrated Google Translator API in your website


API(s) API(s) 
Ratings:
0 Comment(s)
 2906  View(s)
Rate this:

Integrated Google Translator API in your website

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/

Integrated Google Translator API in your website

2.       After login you will get the below screen.

Integrated Google Translator API in your website

·         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.

Integrated Google Translator API in your website

·         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.

Integrated Google Translator API in your website

·         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.

Integrated Google Translator API in your website

·         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: -

Integrated Google Translator API in your website

Output after selected Hindi: -

Integrated Google Translator API in your website


Don't want to miss updates? Please click the below button!

Follow MindStick