I present to you: script for getting Google Translate on your website

Hi,

Yesterday I opened this thread for some help with getting Google Translate on my website. I tried finding the code for it, but after a long search I still couldn't find it.
Translating will do this with your website page: an example --> Original >> Dutch >> German >> Spanish >> Japanese)

There is the option to use a tool that is provided by Google. But this is, in my opinion, rather ugly and big. On various blogs I saw a similar thing, but with flags. And that's how it should be! So I thought, I'll create it myself for use in a custom made website.

Since this website generates pages out of the database, and rewrites the url, it's impossible to go to every page and do it manually. Therefore I needed something that could be placed in a .php that will be shown on every page.

So now I present to you: Let Google Translate your webpages, by clicking on the flag that represents the language!
I'm not an expert in PHP, so forgive me if there are flaws in it. But the code works and I added proper descriptions to it.

Just create a file named: "translate.php"
And put this in it:

<!-- Say what the source language is, in this case, EN or USA -->
	<br>
<FONT size="0.5">Translate </FONT><img src="http://www.yourdomain.com/img/flags/small/United Kingdom(Great Britain).png" alt="Translate these English song lyrics to one of these languages" border="0" /> <img src="http://www.yourdomain.com/img/flags/small/United States of America.png" alt="Translate these American song lyrics to one of these languages" border="0" /> to
	
	<br>
	
<!-- Start English to Arabic -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|ar&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Arab League.png" alt="Translate these song lyrics to Arabic" border="0" />
</a>

<!-- Start English to Chinese -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|zh-CN&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/China.png" alt="Translate these song lyrics to Chinese (Simplified)" border="0" />
</a>

<!-- Start English to Dutch -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|nl&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Netherlands.png" alt="Vertaal deze lyrics naar het Nederlands" border="0" />
</a>

	<br>			

<!-- Start English to French -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|fr&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/France.png" alt="Traduire ces paroles dans la chanson Français" border="0" />
</a>

<!-- Start English to German -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|de&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Germany.png" alt="Ãœbersetzen Sie diese Songtexten Deutsch" border="0" />
</a>

<!-- Start English to Greek -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|el&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Greece.png" alt="Translate these song lyrics to Greek" border="0" />
</a>

	<br>

<!-- Start English to Italian -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|it&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Italy.png" alt="Tradurre queste parole di una canzone Italiano" border="0" />
</a>

<!-- Start English to Japanese -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|ja&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Japan.png" alt="Translate these song lyrics to Japanese" border="0" />
</a>

<!-- Start English to Korean -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|ko&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/South Korea.png" alt="Translate these song lyrics to Korean" border="0" />
</a>

	<br>

<!-- Start English to Portugese -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|pt&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Portugal.png" alt="Traduzir estas canções líricas Português (do Europeu)" border="0" />
</a>		

<!-- Start English to Russian -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|ru&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Russian Federation.png" alt="Translate these song lyrics to Russian" border="0" />
</a>	

<!-- Start English to Spanish -->
<a href="http://translate.google.com/translate?u=http://
<? 
echo $_SERVER['SERVER_NAME']; 
echo $_SERVER['REQUEST_URI']
?>
&langpair=en|es&hl=en&ie=UTF-8"><img src="http://www.yourdomain.com/img/flags/Spain.png" alt="Traducir estas letras de canciones Español (de España)" border="0" />
</a>

PHP:

This file will give you the flags that link to the translated version of the page you're viewing, like this.

Well... that's not exactly true. In order to show the flags, you will need to download them. After that put them in a directory in the root. Like in this example, in /img/flags/ and the small versions in /img/flags/small/.
You can put them anywhere you like, but keep in mind that you need to change the path in the code if you do.

Now where can I get these nice and shiny flags SJappie?
You can get them from this kind fellow of IconDrawer.com. Click on "Free" to see the link for downloading the flags.
They are free as long as you place a link to him on a static first level page!

You did all the above? Good! Only one thing left to do:
Get the "translate.php" in all your pages. You can do this by putting this in your file, in the place you want your translate-flags to be!

<?
include "translate.php";
?>

PHP:

Done!
Hope some of you find this usefull. As I said, I could not find it anywhere else and I think it can be used on all websites as long as you have the flags. If you like it, feel free to put a link on your website to my website (lyrics site in my sig) as a thank you!

There are a few remarks:
- This piece of code is only for English content to be translated. If you want to translate content from other languages to certain languages you'll have to alter the code. And offcourse Google Translate needs to support it.
- In addition to this, once a page is translated it reloads the exact page in the 'new' language. This means that the flags are once again there, but obivously they will give an error when you're trying to click them again. Don't know how to cope with that, like I said I'm not an expert. But then again, how stupid are you if you want to translate it again after you already did?
- Also I'm trying to come up with a way to have "moving" flags on mouse over. Like they get a little bit bigger when you hover your mouse of them. I sort of got it to work, but there are still some issues. I'd like to get help because I'm stuck I don't know how to fix it. This is what I got so far. See on the top right. There is some part in the CSS that takes care of this and a little different code, but the lay-out is still a mess and I can't get it right.

 

All the flag on your lyric page, after I clicked on them, the page turned out to be arabic. All the flag..

 

Hey Nyunyu,

That's not entirely true, these are the flags on sub-domain: http://groundzero.fr... This subdomain is my testing ground. There I could alter the CSS without causing problems. When you try on the normal domain (the www.fr....) the flags will work



Edit:
I've changed some stuff on the testing domain, should work there now aswell. But if it's buggy it's not a big deal as this is the code that i'm changing all the time untill it looks like I want it to look. On this page you see the correct version (no moving flags). Notice when you hover over the flags that the url that is linked to changes.

http://translate.google.com/translate?u=http://www.thedomain.com/thepage.php&langpair=en|zh-CN&hl=en&ie=UTF-8"
Notice the red part, that changes. It tells google the source language and the language to translate to.
en|zh-CN --> simple chinese
en|de --> german
en|ja --> japanese
etc...

 

I implemented a much better, easier system which parsed your url through the Google translator and came back in the correct language depending which flag you clicked. This way, users are blind to the fact you're using an external translator, you don't get that ugly Google translation bar across the top, and your layout stays virtually the same. Only problem is Google isn't as smart as me, it doesn't understand literal translations, but I'd be confident that it will one day soon.

 

Sounds good Spider-Man, care to share?
Cause this is the best I could come up with, once again i'm a complete n00b when it comes to PHP. I just now the bare minimum to get me going...