Using Google Translate with your Content
In today’s connected digital age, it’s important to ensure your content is as widely available as possible. Part of this requires making your site’s content available for language translation. By including a translation service, you have effectively expanded your site’s audience and reach.
Translated content is also key in general accessibility terms. If your website serves specific communities where a host of languages are spoken, then it is vital you provide translated content to meet their communication needs.
Rather than having to manually translate your website content, there’s a number of services that perform the task automatically. Certainly one of the most efficient tools is Google’s Website Translator. Not only is the service robust and accurate, but it allows for customization to fit the design of your website.
In this tutorial, Solodev will show how to customize the default Google Website Translator toolbar so that it displays a stylish dropdown with flags as a language reference.
Below is the HTML, CSS, and JavaScript required.
Step 1 — google-translate.html
Copy and paste the HTML below into your web page
<div class="ct-topbar">
<div class="container">
<ul class="list-unstyled list-inline ct-topbar__list">
<li class="ct-language">Language <i class="fa fa-arrow-down"></i>
<ul class="list-unstyled ct-language__dropdown">
<li><a href="#googtrans(en|en)" class="lang-en lang-select" data-lang="en"><img src="https://www.solodev.com/assets/google-translate/flag-usa.png" alt="USA"></a></li>
<li><a href="#googtrans(en|es)" class="lang-es lang-select" data-lang="es"><img src="https://www.solodev.com/assets/google-translate/flag-mexico.png" alt="MEXICO"></a></li>
<li><a href="#googtrans(en|fr)" class="lang-es lang-select" data-lang="fr"><img src="https://www.solodev.com/assets/google-translate/flag-france.png" alt="FRANCE"></a></li>
<li><a href="#googtrans(en|zh-CN)" class="lang-es lang-select" data-lang="zh-CN"><img src="https://www.solodev.com/assets/google-translate/flag-china.png" alt="CHINA"></a></li>
<li><a href="#googtrans(en|ja)" class="lang-es lang-select" data-lang="ja"><img src="https://www.solodev.com/assets/google-translate/flag-japan.png" alt="JAPAN"></a></li>
</ul>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <img src="https://www.solodev.com/assets/email/logo.png" alt="Logo Solodev"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav><div class="container">
<h1>Use Google Translate with your Website</h1>
<p>Select a language from the upper-right dropdown menu and watch as the content of the page automatically translates.</p>
<hr />
<p>Solodev is the world’s first enterprise web experience platform available on-demand and created by developers for developers. It allows organizations to create amazing websites with unparalleled levels of security, scalability and total design freedom.</p>
<p>Fully optimized for the Amazon Web Services (AWS) Cloud, Solodev provides you with unparalleled scalability, security, and accessibility and total design freedom without the need to compromise on design and functionality.</p>
<p>Trusted by nationally recognized brands, Solodev is used to build and host engaging websites that drive meaningful results. Available for instant online purchase, Solodev empowers designers and developers to create dynamic, award-winning websites without compromise.</p>
</div>
Step 2 — google-translate.css
Download the CSS below and include it in your web page
Step 3 — Add the includes below to your web page
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">Step 4 — Include the following Google Translate scripts
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
}function triggerHtmlEvent(element, eventName) {
var event;
if (document.createEvent) {
event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventType = eventName;
element.fireEvent('on' + event.eventType, event);
}
}jQuery('.lang-select').click(function() {
var theLang = jQuery(this).attr('data-lang');
jQuery('.goog-te-combo').val(theLang);window.location = jQuery(this).attr('href');
location.reload();
});
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Note: It’s essential that the above scripts are loaded directly on the page and not through external includes. Otherwise, the translation service will not properly initialize.
With the above code, you will now have a translation dropdown strategically placed above your navigation. Find specific languages that fit the needs of your audience and include them with your other customizations.
In this article, Solodev showed you how to add content translation to your website via Google’s Website Translator.
Originally Posted on the Solodev Web Design Blog
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
