Quality Reads

Wednesday, December 27, 2006

Add A Translation Tool To Your Blog

I added Google Analytics to my blog a couple weeks ago because I was interested to see where my web traffic was coming from. I was surprised at the percentage of views coming from non-English speaking countries (~33%). I started wondering if all these individuals were adept at reading English or were just muddling through my posts to get to the code (most of the views were for my code-related entries). After a minute or two of contemplation, it dawned on me I could make their life a whole lot easier by providing a translation tool. So, I jumped onto Google Translation and took a quick look at how they structure their URL variables. Here's the HTML/Javascript widget I came up with:

<form action="http://www.google.com/translate" onsubmit="this.u.value=window.location.href" method="GET">
<input value="en" name="hl" type="hidden"/>
<input value="UTF8" name="ie" type="hidden"/>
<input value="" name="u" type="hidden"/>
Select Language: <select name="langpair">
<option value="en|fr"/>French
<option value="en|de"/>German
<option value="en|it"/>Italian
<option value="en|pt"/>Portuguese
<option value="en|es"/>Spanish
<option value="en|ar"/>Arabic BETA
<option value="en|zh-CN"/>Chinese (Simplified) BETA
<option value="en|ja"/>Japanese BETA
<option value="en|ko"/>Korean BETA
<option value="en|ru"/>Russian BETA
</select><br/>
<input value="Translate" type="submit"/>
</form>

The form posts to Google's Translation Service and seems to do a good job of converting the page to the selected language. Please be aware of two things:

  1. The languages listed in Beta can mess with the page layout a little bit. Remove those from the select box option list if thats a major concern for you.

  2. The WHOLE page will be translated. If some of your posts deal with code examples, they will be turned into some bizarre/humorous pseudo-code.


To use the widget, just copy and paste the above code into the proper section of your blog Template. If you are using Blogger, paste the code into a "Third Party HTML/Javascript" module.
The widget works great and provides a nice way for people to read your posts in their native tongue. Please let me know if you run into any problems. I'll be more than happy to troubleshoot issues as they arise.

Enjoy!

33 comments:

John Redmond said...

Todd - This is sweet. I had to upgrade my Blogger template to follow your instructions. I deleted "English to" from each of the drop-down options to keep the selection box width in the sidebar. I also added another line break before the button for appearance sake. Check it out at http://keystoneisit.blogspot.com.

Todd Cullen said...

Good point. I knocked out the original form in a couple minutes by cutting and pasting directly from Google Translate. I'll update my post to reflect your suggestion. Thanks!

Jeremiah McNichols said...

Thanks. Now in play at Z Recommends.

Jacksta said...

Thank you :)

S. J. Matic said...

Thank you. The widget works wonderfully.
I just added width to the select field since my sidebar is a bit narrow.

arjuna said...

nice hack!very useful,i will try it in my blogger.Many THX:)

raull said...

Thanx for the post! Sometimes it's not a matter of language, it's just respect, that's how I feel it.

¡Saludos!

Rachel Boyd said...

MANY thanks, works a charm on blogger! Just what I was looking for :)

Siouxfire said...

Thank you for that. So simple, useful and unobtrusive. Brilliant.

j.rock said...

id like to use this on my blog but instead of text id like to use small flag images. can anyone help me out?
my blog is at
http://myagloconetwork.blogspot.com/

pk said...

Thanks Todd, I just took the beta plunge. Actually this is better than I had before (I know v.v.v little code and I only ever managed to make it translate the front page) and I knocked off the 'simplified' and 'beta' to narrow the box. j.rock, if you're still watching, there is a flag example at http://googletranslategadget.blogspot.com - but I don't like it, hence I went searching further and landed here.

Cheers.

putu said...

Many thanks, Todd. Such a valuable post.

Beverly said...

Thank you so much! We're up and running at:
http://homeschoolimage.blogspot.com/
You're helping people, man!

Catoneo said...

For Blogger only, another script is working well. It displays a line of the translation choice on top of each post, with the nice typo style you choose already.

Look at http://royalartillerie.blogspot.com
The choice is from french to english and german only.

The comment block here does not accept html, php, asp (as they says), so pls look at the source code of the blog above mentioned and replace proper "u" value with : $BlogItemPermalinkURL$

So long.

Ranger Bob said...

I've tried adapting your translator to another start-language other than English but was unsuccessfull (I'm a clod at javascript).

Any chance you could point out the necessary changes? Thanks.

Ranger Bob said...

Never mind, I found out the error. Google does'nt translate every single language into every other single language. Doh!

But your translator is super-simple and clean. Cool!

Todd Cullen said...

Thanks to everyone who left a supportive comment for this. There's nothing more gratifying, as a little known blogger, that at least one of your posts helped someone out.

@Catoneo
Nice use of the Blogger template variables. If I have time, I'll take a peek at the template API and put together a little how to in case anyone else is interested.

@Ranger Bob
Yea, Google doesn't hook you up with every language, nothing I can do there. As for javascript, unless your in web development, it can be a really tricky thing to pick up, browser quirks et al.

@pk
I did run into the flag example, which is definitely cool, but I wanted something a little more compact for this site.

Happy Writing
-Todd

tknmurthy said...

Great form tool this is what required in today online world.
thanks
http://tknmurthy.blogspot.com

Admin said...

hi Todd cullen
I have added translation widget to my blog. Great code man i was searching for this and i found it here.

I have added some images of flags to make it more visible for the visitor. Thank you for the code. See my blog Blogger Toolkit

i have also added it to my post with ur name in it, providing a link to ur site.

Harihara Kumar said...

hi Todd
I found bug in your code, try to convert your page into French language. It always shows French by default, but the page is in English. So i selected French from the list of options in the translation bar, but no use. I thought you might make some chages to it to function correctly. I have checked follow-up comments.

Hariharakumar

Harihara Kumar said...

Hi Todd
sorry, i found error in my code, i rectified it. Sorry, i have said that there is a bug in your code.

Hari

Jacksta said...

Hello Todd. Thank you again for sharing this code. I have used it for almost a year(?) now. It works great as it always has (on Squarespace) but on Blogger there is a large white box on the top of the page when one "translates" it. I am guessing it is a "google translate" thing and not your code because I have seen this where folks just use that "click the flag" code on their front page.


Thank you in advance and yes I am HTLM challenged. (smile)

J de Leon said...

Thanks very much for sharing your widget, but how can I have it appear as a button instead of as a drop-down menu? The website I'm using it for is originally in Spanish and Google Translator only translates between English and Spanish, so it's a waste to be using a drop-down menu.

JBlack said...

Thank you so much for sharing this widget. I just put it on my blog and will probably have students put it on theirs so that they can increase world viewership of their ideas. Appreciate your generosity of your skills and talents!

D. Editor said...

Thank you! I've added it to our blog. We have mostly a Spanish speaking audience (next to English) so I edited the HTML and moved Spanish to the top of the list, followed by the other languages that would be more prevalent with our users. Thanks again. I had the Google code there previously but it did not work.

ALEX said...

Hi! This would work for my translation needs, but unfortunately, I get a message that reads:


We're sorry...

... but your query looks similar to automated requests from a computer virus or spyware application. To protect our users, we can't process your request right now

... and this is by Google...

What am I doing wrong? Can i fic this?

thanx
alex

Carl Kruck said...

Google now have a new set of languages, it would be great to set an update to this tutorial :)

Carl

coolmals said...

Hi,
Thanks for the code it is great. It really enriches the blog experience.

Rosemary said...

Todd...thanks so much for providing this code. I was using the one with the colored flags and it clashed with my color scheme. Yours is so much better. Can I delete the words BETA and Simplified? I have a lot of Dutch readers. Is there code for that language. How about Polish? Thanks so much for all your help.
http://contentinacottage.blogspot.com

Kode said...

I've posted an addition/modification to your script at http://www.graphicdreamz.net/html/webdesign.html with the code to add all of Google's now-23 languages - have given you credit on the page :)

Carl

A. and M. said...

I have just started an italian food blog but in english and your traslator is brilliant thank you very much.
why dont take a look http://www.alessandrocookery.blogspot.com You may find it interesing.

maguiar said...

Hi Todd,
I have a website in portuguese as defaut and I changed google translator code for "pt/en". Now I would like to obtain a "english flag" (GB or American). Do you have the address of scr for "http://photos1.blogger.com/img/43/ENGLISH OR AMERICAN FLAG ???.jpg"
Thanks...

PAPER GIRL said...

HI TODD!!!!
I just found your translation tool today GOD BLESS YOU!!!!!!!!!! WOW. I am a new woman. I am an artist, now I can talk to other artist around the world. Thanks so very much. Going to post a link to your blog on my blog so friends can find you too, if you don't mind.

blessings,
Rosalind