Custom google translate menu.


This post describes how to make a custom Google Translate Menu. Here is the finished menu. Note that the key item here is that half the links translate the website, and the other half take you to external links.

 

The objective of this post is to play around with the Google translate widget, and find a way to integrate Google translate into a custom menu, so you can get it to match the look of your site and also have a translation link in the same menu as a regular URL, say to a foreign version of a site. This way on a company site you can link to a translated version of the site, or to a complete mirror version of the site, depending on what is preferable for that country/language.

Let’s start with a sample of the regular Google Translate Dropdown Widget:

To set up one of these normal widgets go to Translate Setup Wizard where you can pick the specific languages to display and pick from a few visual styles.

But we want a completely different style, a custom menu where half the links translate an english page, and half the links go to a completely different site that is native in that language. To accomplish this we will need to activate the translation plugin with a simple URL injection:

translate url

The instructions are all on that google page, but basically we specify which languages we are trying to translate from and to in the URL itself.

Regular: www.burley.com
and in French: www.burley.com/#googtrans(en|fr)

NOTE: You must include the http:// in your URL or else this will break, in wordpress at least. This directs wordpress to an outside domain, otherwise it will think it’s a page within your site.

Another quick example for this site just so we can be certain this is working with wordpress.

www.ncoughlin.com/#googtrans(en|fr)

For this to work you will need to make sure that you have the Google translation snippet inserted into your footer:

<div id="google_translate_element" style="display: none;">
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

note that I have set my div style to “display: none;” since I don’t want the google widget to actually be visible, it just needs to be there for the URL injection to function.

Now lets go ahead and add a CSS3 based menu,and add our links:

 

 

So there you go, we have a custom menu that mixes google translate links with outside URL’s. Hope you found this useful!

2 Comments

Add yours
  1. 1
    Jay

    Is that burley website your work? I’m in love with the language switcher there and the styling work on the Google Translate widget.

+ Leave a Comment