Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Embedding language translation feature on website

    Hi all,

    I am having an issue trying to embed a feature that allows a user to translate a webpage into the country of their choice.

    Below, I have two sections of code and need to try take from both of them and make one section.

    Let me explain...

    First Part:

    This code is from Google, it embeds a dropdown box where the user can select which language he/she would like.
    Then it automatically translates the entire page to that language. (Which is the one part I want to keep)

    Paste this code onto your website
    Copy and paste the following code snippets onto every page you want to translate
    Place this meta tag before the closing </head>
    Code:
    <meta name="google-translate-customization" content="32c2c762573f4c29-f694ecbfa1146c29-gb7889196ce7269c6-14"></meta>
    Place this snippet where you'd like to display the Website Translator plugin on your page
    Code:
    <div id="google_translate_element"></div><script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true, gaTrack: true, gaId: 'UA-32178549-1'}, 'google_translate_element');
    }
    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    Now for the second part:

    This code embeds flags of each language (which I want to use) on the webpage, except when a user clicks it, they are directed to the Google Translate site.
    Code:
    <form action="http://www.google.com/translate" >
    <script language="JavaScript">
    <!-- 
    document.write ("<input name=u value="+location.href+" type=hidden>") 
    // --> 
    </script>
    
    <input name="hl" value="en" type="hidden">
    <input name="ie" value="UTF8" type="hidden">
    <input name="langpair" value="" type="hidden">
    <input name="langpair" value="en|fr" title="French" src= "http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
    <input name="langpair" value="en|de" title="German" src= "http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
    <input name="langpair" value="en|it" title="Italian" src= "http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
    <input name="langpair" value="en|pt" title="Portuguese" src= "http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
    <input name="langpair" value="en|es" title="Spanish" src= "http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
    <input name="langpair" value="en|ja" title="Japanese" src= "http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
    <input name="langpair" value="en|ko" title="Korean" src= "http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
    <input name="langpair" value="en|zh-CN" title="Chinese Simplified" src= "http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
    <input name="langpair2" value="en|ar" title="Arabic" src= "http://photos1.blogger.com/blogger/3709/485/1600/arabic-flag.gif" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30" />
    </form>
    Is there any way some one on here can help me out with this, I need to have the different flags shown as it is in the second part, but when I click on which ever flag, it needs to translate the webpage as if I was using the dropdown box in the first part.

    Sorry for a long post.

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Integrating Translate-It into your site is a piece of cake. Just upload the http://jonraasch.com/downloads/translate-it.zip file to your website, and include these lines of Javascript:
    Code:
    <script type="text/javascript" src="translate-it.js"></script>
    
    <script type="text/javascript">
    TranslateIt.init();
    </script>
    Make sure to modify the path to translate-it.js if necessary.
    Finally, add this HTML wherever you want the flag icons on your page:
    <div id="translateFlags"></div>
    And that’s it, your website has become much more global, with translation into tons of languages!
    Last edited by yaseenyahya; 11-07-2012 at 12:23 PM.

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, will this work exactly how I explained it? Translating the webpage instead of redirecting the user to another site?

    This is basically exactly the same as the second part. It takes me to the Google Translate page and has my website inside a Google Window.
    I need it to perform like the first part (stays on my website and translates everything, this has to be possible?)
    Last edited by Darren_RSA; 11-08-2012 at 10:11 AM.

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump....

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by Darren_RSA View Post
    I need it to perform like the first part (stays on my website and translates everything, this has to be possible?)
    No, that is not possible unless you yourself provide the translation code. If you only want two or three languages you would do best to make an English page, a French page and a German page.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •