How to add Google Translate to your forum with Custom Theme

Aug 2, 2010

2 Comments »

If you’re looking for a simple way to translate your Vanilla forum you can easily add Google Translate with Custom Theme.

*The Custom Theme feature is available to Plus and Premium Plan members only!

What is Google Translate?

Google Translate is a free statistically-based machine translation service provided by Google Inc. to translate a section of text, document or webpage, into another language.

Currently Google Translate offers the following languages when adding their service to your site(vanilla forum): English, German, Spanish, French, Italian, Portuguese, Japanese, Korean and Chinese (Simplified).

Understanding the Google code

All you need to do is pass Google your forum url and specify what language to translate the content into.

http://google.com/translate?langpair=XX%7CYY&u=(your URL here)

A closer look at the code above: XX is the code for the original language and YY is the code for the language which you want to translate into.

So for example, if you wanted to translate your forum into French you would change the XX to en and the YY to fr.

<a href="http://google.com/translate?langpair=en%7Cfr&u=http://yourforumname.vanillaforums.com">
 French
 </a>

Adding Google Translate to your Vanilla forum

Let’s begin!

*You may want to also read the tutorial on using Custom Theme

Go to Custom Theme – located on the left Menu Panel under Appearance.
Once inside of Custom Theme the ‘Edit Html’ tab will be active by default – this is where we will add the Google Translate code.

We will start by adding a link in the main menu to translate Vanilla into French. In ‘Edit Html’ look for <ul id “Menu”>. After the last link, {signinout_link}, add the following code:

<a href="http://google.com/translate?langpair=en%7Cfr&u=http://yourforumname.vanillaforums.com">
 French
 </a>

Here is the result:

Now click on the ‘French” link and watch the magic happen!

Before

After

Now get translating! ☺

Here is the result:

http://www.riku.seppa.la Riku

Hi, I’m interested to know how this behaves if you start adding content in the different languages.

In the french example, if I would now add a question in french, how does it come out in the translation and in “normal” view without translation? Is it possible to get vanilla to translate back and forth? Or maybe only translate the menus, not the content that users write?

Thanks!
None

For restricted areas you can use the google toolbar by including it as JS in your template (body section)

function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: ‘en’,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, ‘google_translate_element’);
}