Add Language Translation / multilingual to your Website

A nice easy, elegant way of achieving a multi-lingual website without the work and complexity of having to maintain extra content in your CMS or Blog.

Its now easier than ever to have your site translated, so you have a fully functional multilingual offering, so your not missing out on any of your potential audience. For those that use Google Chrome as your web browser, you may have already noticed if you go to a site that has something other than your primary language, chrome has a pop up asking if you’d like it translated for you… well using the same service we can have your website do the same thing, however allowing the user to make a selection from a convenient drop down menu.

the only gotcha is that the client will need JavaScript enabled on their browser, as we will be leveraging Google's AJAX language API, so for 95% of the population this is not  problem.

here is a working sample, note the highlighted section (red rectangle), click on one or all of the hyperlinks and watch the text change to the corresponding language.

image

 

So lets break the implementation down into steps, its rather easy.

Step 1:

Edit your website template and place everything that you want to translate inside a

tag with some unique id, you are probably doing this already, but as an example 
all my content is between this div

 

 

Step 2:

Now above that div we need to create a new div

<div id="LanguageTranslate">div>
<div id="Content">
    <h2>My content is in between this divh2>
    <p>I am showing you googles language APIp>
div> 

This new div at the top  is what will call the translation API.

 

Step 3:

Now here is the translation code, this needs to go into the head of the template, or you could create an external JS file and call the file in your template.

<script type="text/javascript"
        src="http://www.google.com/jsapi">script>
   1:  
   2: 
Tags
HTML Code , Web Design , web , Tips and Tricks
Share

Categories

Tags

Archive