Add Language Translation Flags To Your Blog in One Easy Step; Reach Non-English Speaking Readers

What's you first reaction when you land on a website that's written in Russian, Chinese or Japanese ? Most of us would hunt for that English language translation flag and if that's missing, we will copy-paste the site address in Google Translate website or Yahoo Babelfish to convert the site content to English.

Way too much effort. Now let's reverse the roles and say somebody from China or Japan visits your blog (written in English). The foreign visitor will have exactly the same problems that you faced when you were visiting that non-English website above.

Since more than 65% of web users speak a language other than English, it is essential that you provide language translation features in your blog so that you don't miss the non-English speaking traffic.

So when an Arabic visitor passes your English blog, he or she can just click the Arab flag to translate the website into his native language - That way you don't loose a visitor plus he could even subscribe if the content is good even if written in another language.

Here's a quick tutorial to add language translation to your blog. You can be any blogging platform including Blogger, Typepad, Wordpress that provides access to templates. The visitor will see nine country flags corresponding to German, Chinese, Japanese, Korean, Arabic, French, Portuguese, Spanish and Italian languages.

All you have to do is copy-paste the following lines of Javascript code anywhere in your blog template.

<form action="http://www.google.com/translate" >

<script language="JavaScript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>")
// -->
</script>

<input name="hl" value="en" type="hidden">

<input name="ie" value="UTF8" type="hidden">

<input name="langpair" value="" type="hidden">

<input name="langpair" value="en|fr" title="French" src= "http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|de" title="German" src= "http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|it" title="Italian" src= "http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|pt" title="Portuguese" src= "http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|es" title="Spanish" src= "http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|ja" title="Japanese" src= "http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|ko" title="Korean" src= "http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="en|zh-CN" title="Chinese Simplified" src= "http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair2" value="en|ar" title="Arabic" src= "http://photos1.blogger.com/blogger/3709/485/1600/arabic-flag.gif" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30" />
</form>


Actually the above tutorial is an enhanced version of our previous Language Translation Tutorial which was a bit out of date since Yahoo acquired Babelfish and WorldLingo changed their translation URLs.

Though the machine translation powered by Systran is generally not as correct as the service offered by professional translators, not all of us can afford an human powered translation. Plus the non-English visitor can alway connect the dots and make some meaningful sense of your content.

There's no translation support for Urdu, Russian, Hindi, Telugu or other Indian languages.

Find this article at: http://labnol.blogspot.com/2006/11/add-google-translation-flags-to-your.html

web: http://www.labnol.org/ email: amit@labnol.org

Reader Comments

hello amit,

i believe there're some mis-alignment etc etc on your previous posting on language translation (bibelfish) ...

hence with this new google translation, is it better ? which one is better ?

Though both Babelfish and Google are powered by Systran so the translated text would be the same, Google translation does offer support for Arabic.

Good post amit sir.....

I would like to say i just checked n get to know google translation offers support for erabic.....also.

i mean we can translate English to arabic n also to some new languages also like japenese beta...
----------------------------
But i must say u work very hard on each post..
--------------------------------

Check out my blog when u have time i have posted on some new techy topics.

Regards
abhishek bhatnagar

Good post. The only problem with your approach is that it does not, as far as I can tell, produce spiderable copy in those languages. Contrast that with Angsuman's translation plugin for Wordpress, which creates pages on the fly that are spidered transparently by Google and so are indexed. There's only one proviso you have to use a special 2comment out" for your adsense so that it is still parsed properly otherwise you lose revenue from all those non-native language speakers.

Dave - that's true - the translated pages won't be indexed since it's a javascript event and not a directly a href link.

The translation plugin you mentioned is done pretty neat but unfortunately, that's only available for the WP platform.

Just testing it. How do you make it hide the upper google frame automatically?

Dear Amit,

Great Man, I had no Idea of this feature, your site is so useful, can you post an article on how to increase Internet Traffic to one's website.

Rajeev
www.tekno-world.blogspot.com

Problem is that the babelfish-translations are sometimes very strange, so that the only thing you will achieve is a smile on the face of your foreign-language reader. When I translate your blog using the german flag all I get is some curious poetry that does not have much to do with the intended message - just a funny feature but nothing serious ...

Salute Amit...
your blog better more and more...

I must say I would rather hear by British friends try to speak French than read your blog in French. :-)

This said, I can't wait for the day where I can read Chinese and Japanese blogs.

Language is by far the biggest challenge to the Internet.

Hi Amit,

How can i add this blogger in beta. I will be glad if you say something about editing beta blogger blogs.

@david bradley - I guess if we replace google.com/translate with google.com/translate_c - the top frame is hidden.

@digitus - I know the things are not perfect but there's no real alternative that's free

@abhishek, najmi - thanks for the good words

@kim - well said, there's lot of good stuff posted on Japanese and Chinese blogs which we're definitely missing

@escaper - I guess this should work with Blogger beta as it's plain translation javascript which you can copy-paste in the blog template.

You can expect to see more Blogger Beta hacks on Digital Inspiration once I make the move. :)

Amit,

Thanks for providing all of us such a nice and easy plug-in. Blogger in Beta just added the feature for a true one-step installation without the need for the user to tamper with the code. I have added the installation button on my test blog. Please allow me to feature this as a post on my blog on how to install the hach into one's blog with full credit, introduction and referral to your blog. I think this will benefit all of us bloggers.

Cheers,

Hoctro

Amit,

One suggestion I would make is rather then flags consider using the localized names of the languages you're pointing to

i.e. English, Francais, Espanol etc. etc.
I did a blog post on this last year that you might be interested in:

Post is here

There's also a link on that post to another very good post by Patrick Hall of Blogamundo on the same topic.

- Ryan

I just installed the translator using the widget installer at Hoctro's Place. It's so cool! Thanks.

I assume that to change the code to translate FROM Spanish to any other language, I should only change "en" to "es"... Where can I get the English (or US) flag to translate into English?

I appreciate this post.
Today I added translation flag (Korean into English) on my blog referring to this post.

Post to this: Translation Korean into English

Thanks.

It is one of the very useful posts. But, you pasted it so low in the blog means Visitors of non english speaking countries may not see the option of translation and skip the blogs. Anyway, I am proud of this fellow indian's great blog.

Hi Amit
This is a usefull sessions. I have cleared several things.

But if we want to put a kind of functionality to our website similer to this? How to do that, without using Google, Babelfish and others?

Thanks for the code! Although the translation is not perfect this will give international readers a good sense on what the post is about. It's free! Keep up the good work!

You are a darling Amit! Honestly, I've been searching for this code almost 2 days for me to insert in my homepage. I can already see more traffic going into my website.

Just a tiny problem, the 'Arabic' flag didn't appear. I've cut & paste 3 times just to be sure, but same result. Is there a missing link?

Regards.

Hi

why do I get the message to sign in again after pasting this code into my blog's template????

I gave the link to your site to a friend who has blogger beta and it is working fine on her blog.

I would really like to give this option to my visitors,

any suggestions???

thanks

and Merry Christmas to you and yours

Hello Amit,

This script works great. On the "new" blogger, you just login, go to:

template/page elements/add a page element then choose html/javascript and drop the code in.

Looks great!

@David and Amit,
To remove the upper frame,
use translate_p in
form action=...

@Amit,
Russian Language is missing, It can be done by adding,
input name="langpair2" value="en|RU" title="Russian" src= "http://rkmandal.googlepages.com/RussianFlag.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30"

can we remove google translation top frame?

Hi this is a top utility, thank you.

I have a question though, when I add this to my site it does translate the pages, but it plays havoc with the menu in the left frame, reordering things and duplicating some pages. Any suggestions as to how I can stop this?

Thans again.

Amit,
I have been looking for a good horizontal flag bar. Great post.
thanks

cHi,

I just started using today in add page element. Once aved and in preview its not translating to those languages but shows in English only.

Thanks Digital Inspiration. That's exactly what I was looking for. What an "Added Value" to my International users looking for cheap flights. Unfortunately the Arabic Image doesn't show up properly.

How to translate from Chinese to English... seems no English flag here

Dear Amit,

You said that the code can be pasted "anywhere" in the blog template, but it seems not. I'm using blogger beta "layout" template, and I pasted the code just after the sidebar section (after "/b:section" tag). When I view the html source of my blog, it seems "script" tag is treated as plain text and "document.write..." method was filtered out as comments. That is,
...
script language="javaScript"
(it's empty)
/script
input ...

What should I do for this?
BR

Amit,

Thank you for providing us this language translation code.

My old links to WordLingo no longer worked but I like Google's translators better anyway. They work great on Blogger.

Last comment HAHA!
OKAY. So the problem might have been the uptime of the website that the image is referenced from...so I replaced the .gif file with this extension:

http://www.flags-and-anthems.com/imgs/flags/458x001.gif

Seems to have worked.

Works great for me, so far - it's a nice short term solution that I may employ in other websites, till I find a better one.

Now all that's left is to find out if people from These Countries understand what the hell is being written on the pages...

Thanks again

hi, I did what was instructed...but I got an error message that says:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "input" must be terminated by the matching end-tag "".
what shoudl I do next?
my url is: sweetdestiny5127.blogspot.com

Thanks Amit - Works perfectly on my blogger blog.

- Vinay

Hi Amit - this a tramendous tool you kindly share with us! Thank you! Srdjan

Hi everyone, this translator is a great addition but I really need the code for English to Greek...help!

This is bugging me ...

When I put this on any site (not blog), all that happens when clicking on a flag is that it reloads the domain name i.e. www.domain.com so the script is parsing the URL correctly.

It may be that the software on the site in question is stripping something out of the script (although I can't see how).

Any ideas how I can get around this? Would I need to call the javascript from an external location or something?

As this is causing me to lose sleep, any help appreciated! Guy

this is really cool and everything works great except for one thing. The arabic flag doesnt show up, but when i right click on it and press view image, it shows me the image, but it just doesnt show up on my webpage. The rest of the flags do though.

fantastic post, thank you!

This is so perfect Thank you so much. It works great! Is it possible to add an additional language to this like Thai? I also tried to auto hide the top bar but have not been able to. I tried changing to google.com/translate_c and /translate_c? bur neither seemed to work. I guess if they want it gone the need to just click "hide" :) Thank you for the wonderful wonderful advice.
Any thoughts on blog directories such as my blog log and RSS issues? Blogger seems to only allow me to set my rss to full instead of short, which means my entire post is shown on directories such as my blog log via rss so the 436 readers I have there never venture on to the site which results in 1,200 to 1,600 off site clicks that blog never gets credit for at just at this one directory location. :( Any thoughts on a solution? Thank you again and if this comment is too long just delete me :)
I will still love you anyway. Dee

Use "translate_p" to do it without frames.

My Question: If you use this non-framed version, how do you *get back to English* ??

I tried posting the form with translation from English->English, but it gives an error.

« Back to main



Google Custom Search