Add Google Translate to your SMF 2.0 forum

Written by Mick in Tutorials on 28 Feb 2011


It works for guests and logged users. 

Open:
/Themes/default/index.template.php

Find:
// Custom banners and shoutboxes should be placed here, before the linktree

Add after:
echo'
<br />
<div align="right"><div id="google_translate_element"></div></div>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: \'en\',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, \'google_translate_element\');
}
</script>

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>';


If your language is NOT english, simply replace (en) for your language in the list below.

'AFRIKAANS' : 'af',
  'ALBANIAN' : 'sq',
  'AMHARIC' : 'am',
  'ARABIC' : 'ar',
  'ARMENIAN' : 'hy',
  'AZERBAIJANI' : 'az',
  'BASQUE' : 'eu',
  'BELARUSIAN' : 'be',
  'BENGALI' : 'bn',
  'BIHARI' : 'bh',
  'BRETON' : 'br',
  'BULGARIAN' : 'bg',
  'BURMESE' : 'my',
  'CATALAN' : 'ca',
  'CHEROKEE' : 'chr',
  'CHINESE' : 'zh',
  'CHINESE_SIMPLIFIED' : 'zh-CN',
  'CHINESE_TRADITIONAL' : 'zh-TW',
  'CORSICAN' : 'co',
  'CROATIAN' : 'hr',
  'CZECH' : 'cs',
  'DANISH' : 'da',
  'DHIVEHI' : 'dv',
  'DUTCH': 'nl', 
  'ENGLISH' : 'en',
  'ESPERANTO' : 'eo',
  'ESTONIAN' : 'et',
  'FAROESE' : 'fo',
  'FILIPINO' : 'tl',
  'FINNISH' : 'fi',
  'FRENCH' : 'fr',
  'FRISIAN' : 'fy',
  'GALICIAN' : 'gl',
  'GEORGIAN' : 'ka',
  'GERMAN' : 'de',
  'GREEK' : 'el',
  'GUJARATI' : 'gu',
  'HAITIAN_CREOLE' : 'ht',
  'HEBREW' : 'iw',
  'HINDI' : 'hi',
  'HUNGARIAN' : 'hu',
  'ICELANDIC' : 'is',
  'INDONESIAN' : 'id',
  'INUKTITUT' : 'iu',
  'IRISH' : 'ga',
  'ITALIAN' : 'it',
  'JAPANESE' : 'ja',
  'JAVANESE' : 'jw',
  'KANNADA' : 'kn',
  'KAZAKH' : 'kk',
  'KHMER' : 'km',
  'KOREAN' : 'ko',
  'KURDISH': 'ku',
  'KYRGYZ': 'ky',
  'LAO' : 'lo',
  'LATIN' : 'la',
  'LATVIAN' : 'lv',
  'LITHUANIAN' : 'lt',
  'LUXEMBOURGISH' : 'lb',
  'MACEDONIAN' : 'mk',
  'MALAY' : 'ms',
  'MALAYALAM' : 'ml',
  'MALTESE' : 'mt',
  'MAORI' : 'mi',
  'MARATHI' : 'mr',
  'MONGOLIAN' : 'mn',
  'NEPALI' : 'ne',
  'NORWEGIAN' : 'no',
  'OCCITAN' : 'oc',
  'ORIYA' : 'or',
  'PASHTO' : 'ps',
  'PERSIAN' : 'fa',
  'POLISH' : 'pl',
  'PORTUGUESE' : 'pt',
  'PORTUGUESE_PORTUGAL' : 'pt-PT',
  'PUNJABI' : 'pa',
  'QUECHUA' : 'qu',
  'ROMANIAN' : 'ro',
  'RUSSIAN' : 'ru',
  'SANSKRIT' : 'sa',
  'SCOTS_GAELIC' : 'gd',
  'SERBIAN' : 'sr',
  'SINDHI' : 'sd',
  'SINHALESE' : 'si',
  'SLOVAK' : 'sk',
  'SLOVENIAN' : 'sl',
  'SPANISH' : 'es',
  'SUNDANESE' : 'su',
  'SWAHILI' : 'sw',
  'SWEDISH' : 'sv',
  'SYRIAC' : 'syr',
  'TAJIK' : 'tg',
  'TAMIL' : 'ta',
  'TATAR' : 'tt',
  'TELUGU' : 'te',
  'THAI' : 'th',
  'TIBETAN' : 'bo',
  'TONGA' : 'to',
  'TURKISH' : 'tr',
  'UKRAINIAN' : 'uk',
  'URDU' : 'ur',
  'UZBEK' : 'uz',
  'UIGHUR' : 'ug',
  'VIETNAMESE' : 'vi',
  'WELSH' : 'cy',
  'YIDDISH' : 'yi',
  'YORUBA' : 'yo',
  'UNKNOWN' : ''



That's it! Easy as pie ;)
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    

10 Comments

Can I add this to a SMF 2.RC5?

I really want one of these because I get folks with different backgrounds.

I am a complete newbie, wish I could get someone to do a couple mods for me.

Love the stuff here/.
#1
Quote from: monkeyofstick on 02 Apr 2011
Can I add this to a SMF 2.RC5?

I really want one of these because I get folks with different backgrounds.

I am a complete newbie, wish I could get someone to do a couple mods for me.

Love the stuff here/.

Yep.  Sure works for any SMF 2.0 RC's  ;)

If you like, attach the index.template.php file of your theme and i'll do it for you.
#2
Cool,
I am a complete newbie at all of this stuff.
Had a guy here yesterday to do search engine optimization,and after about an hour on the phone with the company
that I got the service with,they say my PHP was all out of whack.
But anyway,how do I get you the info?
#3
Hey,
I just sent you all the sites info.I hope that is ok?
#4
Quote from: monkeyofstick on 02 Apr 2011
Hey,
I just sent you all the sites info.I hope that is ok?

Done  ;)
#5
Man,such an awesome job!!!
You rock!!
#6
Hey Mick,

First off, thanks a ton for posting this info! This stuff really helps noobs like me :P

I have a question for you, maybe you can answer. I'm currently using the Inferno theme on my 2.0.1 site and I would like to integrate the translator into the menu area rather than on the top of the site. Kind of like what you have done here. I'm not sure where to insert the code or how to align it.

Thanks if you can help  :D

I've modified the code a little bit from your example and was able to make it work:


echo'
<br />
<div align="right"><div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: \'en\',
    includedLanguages: \'en,fr\',
    gaTrack: true,
  }, \'google_translate_element\');
}
</script><script src="//translate.google.com/translate_a/element.js?

cb=googleTranslateElementInit"></script></div>';
#7
Quote from: jruttan on 31 Oct 2011
Hey Mick,

First off, thanks a ton for posting this info! This stuff really helps noobs like me :P

I have a question for you, maybe you can answer. I'm currently using the Inferno theme on my 2.0.1 site and I would like to integrate the translator into the menu area rather than on the top of the site. Kind of like what you have done here. I'm not sure where to insert the code or how to align it.

Thanks if you can help  :D

I've modified the code a little bit from your example and was able to make it work:


echo'


<div align="right"><div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: \'en\',
    includedLanguages: \'en,fr\',
    gaTrack: true,
  }, \'google_translate_element\');
}
</script><script src="//translate.google.com/translate_a/element.js?

cb=googleTranslateElementInit"></script></div>';


In your themes index.template.php

Find:
<div id="main_body">
<div class="wrapper">
<div id="inferno_tools">
<div id="search">
<form id="search_form" style="margin: 0;" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input class="inputbox" type="text" name="search" value="', $txt['forum_search'], '" onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['forum_search'], '\';" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>
</div>
<div id="time">
<span>', $context['current_time'],'</span>';


Replace with...

<div id="main_body">
<div class="wrapper">
<div id="inferno_tools">
<div id="search">
<form id="search_form" style="margin: 0;" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input class="inputbox" type="text" name="search" value="', $txt['forum_search'], '" onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['forum_search'], '\';" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '
</form>
</div>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: \'en\',
    includedLanguages: \'en,fr\',
    gaTrack: true,
  }, \'google_translate_element\');
}
</script><script src="//translate.google.com/translate_a/element.js?

cb=googleTranslateElementInit"></script>';


****Note that the date and time stamp will no longer be on the inferno theme.

Try that and see if that works. The theme i use here is also Inferno.  :P
#8
Thanks for the quick response!

I tried that code and it placed the translator box in the right spot but the main content below the infernal tools went full screen wide.

I checked your elements vs what the original was and couldn't locate where the problem was.  ???



#9
Google to shut down Google Translator Toolkit on December 4th, 2019.

QuoteA while back we let you know that we'll be saying goodbye to Google Translator Toolkit on December 4, 2019. We're sending you one final reminder as the shutdown is now less than 2 weeks away. We've included details below to help you download your data. If you're still searching for an alternative translation editor, we encourage you to check out the great tools available from others.
#10

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.