Google Web Translate – Site Dil Çevirici

Yabancı ziyaretçiler sitenizi kendi lisanlarında gezmesi için aradığınız şey Google Web Translate.

Sitenizdeki içeriği yeni sayfa açmadan, iframe içine almadan dinamik olarak farklı dillerde gezilebilir hale getirmek için alttaki çalışmayı yapabilirsiniz.

Bu makaleyi 2022 yılında kodları güncelleyerek yeniden yazıyorum. Hayat değişiyor, 2014 ten bugüne bizde de bir şeyler değişti tabi 🙂 Kodları daha sade, anlaması daha basit hale getirdim. En azından öyle düşünüyorum.

Şimdi görünüm nasıl olsun, hangi şekilde neler yapabiliriz vs konularına girmeden önce ana scriptimi yazayım.

Paylaştığım kodlarda değişiklik yaparsanız bazı yerlerde kullandığım ters apostrof (Backtick) işaretine dikkat ediniz.

google-web-translate adında bir klasör, klasörün içinde de google-web-translate.js adında bir dosya açıyorum. Bu dosyaya aşağıdaki kodları ekleyip kayıt ediyorum.

Bu dosya ile google a ait translate hizmetini siteme ekledim ve siteyi iframe içinde göstermemesi için gerekli gizlemeleri display none ile gerçekleştirdim. 8. satır da pageLanguage: ‘auto’ yazdım, dilerseniz site dilinizi (muhtemelen tr) yazabilirsiniz. Bu kodla aşağıda da karşılacağız. Fark nedir kısaca söyleyeyim, tercihi siz yapın.

  • Örneğin sitemde 3 kelime yazıyor direkkod multikod ultramultikod
    Bu kod tr iken kelimelerde değişiklik olmuyor, site genel dili Türkçe olduğu için değişikliğe gitmiyor, Türkçeme karışmıyor. Ama auto yapınca site dilini otomatik algılıyor, diyor ki bu site olsa olsa Türkçedir. İbrahim hoca Türkçe yi katletmiş az da olsa düzelteyim diyerek direkkod yerine doğrudan kod , multikod yerine çoklu kod yazıyor. ultramultikod nedir google da çözemiyor, o öylece kalıyor. 🙂
  • Siteniz Türkçe ise tavsiyem sitenizi orjinal göstersin diye auto yerine tr yazmanız yönünde. “Sen bilirsin artık!”

Alttaki kodu eklediğim sayfada henüz herhangi bir değişiklik görmeyeceğim ancak sitem translate için hazır olmuş olacak.

Script adresinde http veya www kullanmak yerine sadece // kullanıyorum ki https veya http ayrımından etkilenmeyeyim. Kendi sitemde bir şey olmaz ama birden fazla sitesi olan kendi betiğini kullanırken problem yaşamasın. Sağ olsun üyemiz kenanak (yorumlarda görürsünüz) daha önce yaşanan sorunu böyle çözmüştü bende gerekli değişikliği betik içinde yapmıştım. Normal ekleme işlemleri içinde aynı şekilde devam ediyorum.

Bu google-web-translate.js dosyasını siteme ekledikten sonra (tavsiyem en alta, sayfa sonuna) en basit haliyle şöyle kullanabilirim. Basit olsun diye yazı ile gösterdim. İsterseniz linkleri bayrak resimleri yaparsınız, düz menünüze onclick ekleyebiliyorsanız menünüze koyabilirsiniz, vs vs. Tıklayın bakalım çalışıyor mu?

TR    EN    РУССКИЙ    中国人   

Yorumcumuz kötü (kullanıcı adı bu, yanlış anlaşılmasın) siteyi otomatik nasıl çeviririz diye sormuştu, bende dili tetikleyerek olabilir demiştim. İşte o tetik bu tetik doGtranslate. Yapmadım ama yapılır bence demiştim, kendimce bir şeyler yaptım, çalıştı, güzel oldu 🙂

Bu javascript kodu ile tarayıcı dilini aldım, tr-TR değilse 2 saniye sonra siteyi İngilizceye otomatik çevirecek şekilde ayarladım. Bu beni kesmedi aşağıdaki şekilde yeniden düzenledim. 🙂

Ziyaretçinin dilini ve sonrasında ilk iki harfini aldım. tr değilse her ne ise o dile otomatik çevirecek hale getirdim. Mesela (ben yaptım, siz yaparsanız çok dikkat, zor düzelttim :), tarayıcı dilini Arapça yaptım, çerezleri sildim, siteye girince siteyi otomatik Arapçaya çevirdi, çok hoşuma gitti, neler yapıyorum öyle 🙂 3. satırda yakına bir yere koyduğum idsi trnbilgi olan dive kullanıcı dilinide yazdırdım. (Not: şuan localde çalışıyorum, proxy ile deneyin, siteyi güncelleyince yani siz bu yazıyı okuyabildiğinizde unutmazsam denerim, tarayıcı diliyle boşa uğraşmış olmayalım, rahat durmayacak, illa deneyeceksin, çince, rusça, moldovaca, sen istiyor translate, verecek 100$. Şaka şaka, bende beleş)

Bu sevinçle devam edelim. Şimdi görünümü daha cancanlı yapma işlemleri için lazım olan resim dosyalarını ayarlayayım. google-web-translate klasörü içine lang_img adlı yeni bir klasör açıp aşağıdaki resimleri de içine ekliyorum. 3 resim bayrak boyutları, boş (blank) olanda style kodları için kullandığım resimlerdir. google-web-translate-background açılır divde arka plan olarak kullanıyorum, resmi değiştirebilirsiniz veya style kodlarından ayarlayabilirsiniz.

16.png
24.png
32.png
blank.png
google-web-translate-background.png

Resimlerimi de hallettikten sonra uygulamayı işler hale getireyim. İlk olarak direk çeviri yapmak istediğimde kullanacağım kod ile başlayayım. Çalışan görünüm şu şekilde, tıklarsanız çalışması lazım:

Aşağıdaki kodu google-web-translate.js dosyasındaki kodların altına eklememde sıkıntı yoktur ama ben google-web-translate.js dosyasına hiç dokunmadan işlem yapmak istediğimden yeni bir direkkod.js dosyası oluşturup aşağıdaki kodları içine ekliyorum.

Dosyayı da aşağıdaki kodla sitemde göstermek istediğimiz yere ekleyince çalışıyor, çalışması lazım, çalışmalı.

Burada ziyaretçinin siteyi hangi dillerde çevirmesini istiyorsam o dillere ait gereken bayrakları ekledim. Bu kodlar diller altında listelenmiştir. İlk değişken dilin kodu , sonrasında adı ve son olarak da bayrağın resimdeki pozisyon bilgisinden oluşuyor. 1. satıra resimleri koyduğum klasör yolunu yazıyorum. Tam url yazmanızı tavsiye ederim. Şöyle:

2. satırda ise kullanacağım bayrak boyutunu seçiyorum. 16,24 veya 32. Demoda gördükleriniz 24 tür, küçültmek için 16 büyütmek için 32 yazabilirsiniz. Bu sayılar sabit, px vs gibi boyutlama değil. background-position kullandığımız için ve resimlerimiz de ona göre olduğundan rastgele değerler eklemiyorum yani.👍

Diller arasından istediğimi silebilir veya farklı bir dil ekleyebilirim, değiştirebilirim. Diğer dilleri eklemek için az sonra paylaşacağım listeden kopyalayıp ekleyebilirsiniz. O paylaşacağım listede dil kodları auto olarak geçiyor. Ne demek bu? Örneğin İngilizce için dil koduna ben tr|en yazmışım. Buradaki ilk kısım yani tr benim sitemin dili. Yani çeviri yaparken türkçeden ingilizceye çevirecek. Aşağıda vereceğim listede dil kodları hep auto ile başlamakta. Yani google site dilinizi otomatik belirleyip çevirecek demektir ki değiştirmeye gerek yok. Örnek olsun neye yaradığını göstermek için yukarıda auto yerine tr kullandım.

Diğer bir gösterim ise daha fazla dile çeviri yapılabilmesi için kullanacağım uygulamadır. Görünüm şöyle:

Yukarıda bir kerede anlatmak için hem yazı hem resim ekledim. İstemediğiniz kısmı kolayca silebilirsiniz.

Bu kodları da yine daha önce hatırlattığım gibi google-web-translate.js kodlarının altına ekleyebilirsiniz. Tabi daha önceki verdiğim kodu eklemedi iseniz, yoksa çarşı karışır. Ben ayrı dosya tercih ediyorum ve multikod.js adlı bir dosya açıp aşağıdaki kodları ekliyorum.

Siteme ekliyorum:

Görüldüğü gibi diller altında tüm diller var. Ekleme çıkarma yapabileceğim gibi önceki kodlamada istediğim dilin bilgilerini bunların arasından kopyalayabilirim. Javascriptte diller arrayını çok satır olmasın diye yan yana yaptım. İlk örnekteki gibi alt alta yapabilirsiniz.

Sadece Language veya Dil değiş gibi tek metin olsun istersem 16. satırdaki <img src=“+resimklasoru+blank.png”/> kısmını silip metni de kendime göre yazarım.

Metin değil tek bayrak ile göstermek istersem yine 16. satırda Change Language yazısını silmem yeter.

Bayrağı değiştirmek istersem yine 16. satırda bayrağın style kodunda pozisyonu değiştiririm. Örneğin Türkçe için background-position: -100px -500px iken emperyalist İngiliz bayrağı göstermek istersem pozisyonu -0px -0px; yaparım. Diğer bayraklardan eklemek isteyen içinde gereken bilgiler diller arrayında var zaten.

Hem öyle olsun hem böyle olsun, hem ayranım dökülmesin, hem dersem şöyle de yapabilirim:

Bunun için bayrakları gtrans5 divinin önüne alıyorum, yazı aşağı inmesin diye bayrakları sola yaslıyorum, resim büyüklüğüne göre yazı fontuna formül yazıyorum, gibi gibi. Şöyle :

Kodun önünde önceki gibi resimklasoru, ebat ve diller arrayı var.

style kodlarını değiştirerek farklı farklı uygulamalar yapabilir, ekmeğinize bakabilirsiniz. Genelde problem scripti eklediğiniz kısımdaki style kodlarından kaynaklanmaktadır ama bu kodları işleyecek bilgi, bilgi olmasa da merak ve araştırma hırsınız varsa illa çözersiniz.

Değişik örnekler için demolar sayfama bakabilirsiniz.
Hazır dosyaları indirmek isterseniz :
Dosyalar üyelere özeldir: Giriş Yap
Yeni misin? Kayıt ol

You may also like...

34 Responses

  1. Murat1983 dedi ki:

    Selam Ben Bir Türlü Yapamadım Bunu.Siteye Atıyorum wp-contente Ama olmuyor. Arapça İngilizce Türkçe Almanca ve Fransızca olmasını istiyorum Yardım Ederseniz Çok Sevinirim.

  2. kemalbagi dedi ki:

    hocam gerekli entegrasyn yapılmasına ragmen ceviri yapılmıyor

  3. oskiliyat dedi ki:

    hocam resimler görünmüyor yazı görünüyor ne yapmam lazım acaba

  4. ibrahim1636 dedi ki:

    Hocam videolu bir şekilde anlatımını yaparmısınız. Olmuyor siteye eklenmiyor.

  5. İbrahim AY dedi ki:

    Üzgünüm, video için vaktim yok. Localde çalışmayabilir. Sitenizi ziyaret edip kodlara ve script eklediğiniz yere bakmadan kesin bir şey diyemem.

  6. yener dedi ki:

    Eyvallah Hocam elinize sağlık çok mükemmel çalışıyor. Allah a emanet olun.

  7. sefabt85 dedi ki:

    hocam ellerinize saglık mukemmel bir şekilde çalışıyor
    fakat ben resim degil de
    TURKÇE
    İNGİLİZCE
    RUSÇA
    alt alta olacak şekilde benim stemin css i ile uyumlu bir şekilde çalışacak bir hale getirmek istedim ama olmadı bunu nasıl yapa bilirim suanda localde deneme yapıyorum js kodlarına ekleme yaptım ama olmadı yani yapamadım
    yardım ederseniz sevinirim

  8. kenanak dedi ki:

    Harika iş çıkarmışsın , çok fazla işime yaradı. teşekkürler . emeğine sağlık.. +10

    • kenanak dedi ki:

      Yalnız bir sorun ile karşılaştım.
      HTTPS kullandığım sitede çalışmadı maalesef… Kullandığım direk.js içindeki google’dan alınan verinin başı http idi onu https yapmama rağmen kod çalışmadı… ne önerirsiniz ?

  9. İbrahim AY dedi ki:

    Güvenli sitede dosya sizde yüklü olmalı ve eklerken tam url ile ekliyorsanız script type=”text/javascript” src=”http://…
    şeklinde çalışmaz.
    script type=”text/javascript” src=”https://…
    ile olmalı.

  10. ismail dedi ki:

    Direk çeviriciye almancada eklemeniz mumkunmu

    • İbrahim AY dedi ki:

      direk.js dosyasını açın.
      14. satıra aşağıdaki kodu eklerseniz almancada görünmesi lazım. Not: Yorumda hata oluyor. Aşağıdaki kodda [ yerine < , ] yerine > olarak değiştirirsiniz.
      [a href=”#” onclick=”doGTranslate(\’auto|de\’);return false;” title=”German” class=”flag nturl” style=”background-position:-300px -100px;” rel=”nofollow ugc”][img src=”‘+resimklasoru+’blank.png” height=”24″ width=”24″ alt=”German” /][/a]

  11. ismail dedi ki:

    http de normal çalışıyor hocam ama https genelde artık siteler benimde öyle bu sayfa ssl olmadıgında çalışmıyor ucretsiz ssl var sayfaya ssl sertifikası alsanız bizde rahatca kullanksak yoksa bu şeklide http de kullanılıyor sadece

  12. murat.sahin dedi ki:

    Dil Seçiniz

    Turkish

    English

    French

    German

    Russian

    Chinese

    Ana sayfada değişiklik yapıyor ancak alt sayfalara girdiğimde hiç bir işlem yapmıyor.

  13. gogbu dedi ki:

    gayet güzel çalıştı.
    Peki bunu tarayıcı diline göre otomatik ceviri nasıl yapbiliriz.
    Örnegin siteye giren ziyaretçinin tarayıcı dili ingilizce ise otomatik ingilizce dilinde görüntülensin site.

  14. crayzmansali2 dedi ki:

    orjinali göster nasıl yapabiliriz ? Orjinali göstermiyor.

  15. Metan Global dedi ki:

    Merhabalar;
    Ziyaretçinin diline göre otomatik sayfayı kendi diline çevirsin komutunu nereye ekleyeceğiz?

    Dosyanın içerisinde bu kod var mı?

    —————————————————————————

    var dilbak = window.navigator.browserLanguage || window.navigator.language || navigator.language || “tr”;
    var dilal = dilbak.substring(0,2).toLowerCase();
    document.getElementById(‘trnbilgi’).innerHTML +=Diliniz:+dilal.toUpperCase()+;
    function yabanci(dilal){doGTranslate(‘auto|+dilal+‘);return false;}
    if(dilal!=”tr”){setTimeout(yabanci, 2000);}

    —————————————————————————

  16. Taner KURNAZ dedi ki:

    Merhaba üstte gözüken google tolbar ı nasıl kaldırıcaz acaba

  17. Taner KURNAZ dedi ki:

    https://prnt.sc/DGD_dVXKYOf8
    dediğiniz gibi kodu kullandım yapmuh.com

Bir yanıt yazın