Saturday, January 5, 2019

How to Add Google Translator Button on Your Webpage ?

Sometimes we have some kind of articles or webpage in any other languages like Spanish , French, Greek, Urdu, Chinese etc. Its very hard to understand these languages if we are from any other country. At this time we need a translator to translate these languages into our mother tongue.

                   Suppose we are from India and we are trying to access some useful information that is very important for us and at that time we find that information in a website, But the problem is that this website is a french website in french language, So we are from India  we can not understand French So we have to translate this website into our mother tongue that is Hindi, We can do that using Google Translator.

So Let's See

How to Use Google Translator On Our Website ?

Basically you have to follow the basic Three Step's to  add a google translator on your webpage, Let's See these basic steps.

Step : 1 - Create a basic webpage and add a " div " element which we create later.

<div id="google_translator"> </div>

Step : 2 - In this step you have to add a google translator API.

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

Step : 3 - In this last step we will add  a JavaScript function.

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

If you face any kind of problem in above steps please check the Example code to find the error in your code.

Example Code
<!DOCTYPE html>
    <html>
         <body>
<h1>Welcome to Syntaxios, Spread the love among Programmers.</h1>

    <h3>Translate this Webpage in your preferred language.</h3>

         <div id="google_translator"> <div>

<script type="text/javascript">

       function googleTranslateElementInit(){
             new google.translate.TranslateElement({pageLanguage: 'en'},'google_translator');
}

</script>

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

<p>you can translate this content in your preferred language, Select your preferred language.</p>

    </body>
</html>

At Last Thanks for Reading...
If you have any doubt don't forget to leave comment in comment box.
, , , , , ,

No comments:

Post a Comment