Use Google Translate & Make Your Website Multilingual

No votes yet.
Please wait...

Hey, Mates Today we will learn about how to make your website multilingual by integrating Google Translate into your website.In today’s world website has expanded its reach to the global arena so translating the content of your website will provide users the flexibility to translate the website content at their own will.

So let us start and help you to know how you can achieve this functionality.

First, let us create a simple HTML Page with content in it.

file name: translate.html

1
2
3
4
5
6
7
<h1><img src="http://phphurdles.com/wp-content/uploads/2017/02/hurdles.png" height="100px" /></h1>
<h3>PHP HURDLES Google Translate Demo</h3>
One of the leading IT Solution Provider serving across 18+ countries since last 8 Years. We are expert in providing IT consultation services to our clients.
We believe ARIES as our zodiac sign for the business process. No no its nothing to do with astrology, ARIES is our principle model which we follow to serve our esteemed clients.

We never work as a company, we work as the partner to the client, be it Digital or any IT Solution. Did we clicked your thoughts? Then let's join hands with Techy Tribals &amp; We hearty welcome you in our Tech Forest!
<p style="color: red;">Translate this page by selecting language from select box:</p>

The second step is to create a space where we want to google translate box to appear simple create a unique id in your div tag like

1
<div id="translatebox"></div>

The third and the last step is to call the jquery file for google translate and specify id where translate box will get appear like

1
2
3
4
5
6
7
8
9
//Use translatebox to make sure box appears where element is having id "translatebox"
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'translatebox');  
}
</script>

//Call this file to initiate the translation box at given position
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

So that’s how simply we can make our website more powerful by having a multilingual feature in it.

Hope this snippet will help our mates to implement the translation functionality.

For working demo Download Here

Cheers!

Because we believe Hurdles aren’t really Hurdles

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *