Global Content Area, Selective Exclude for Language Switching

I guess anyone who wants to use a code option, a simple alternative is to add a small piece of code on every one of your pages, something on the lines of this

<script>
function langSwitch() {
  window.open("https://YourSite.com/oppositeLanguagePage.html");
}
</script>

You would just change the url to switch to the appropriate page in the opposite language. I guess you could even use relative URLS

To make the language switcher work, you only have to add a global onclick attribute to the language link

onclick = langSwitch ();

Because the link is in the global area, you only have to add this once - (maybe twice - once for each language version of the site).

So, although the link is targeting the same function globally, the fact that the function is unique to every page means that you can have a unique URL on each page.

Thank you for mentioning that. I wonā€™t be using it on my sites though because I absolutely hate it when I visit a site from Japan and it switches me to Japanese even though I want English, forcing me to manually click the English link to get the correct language. The way I have our sites setup, what they see is what they get, and if the dislike it, they click the language switcher link. Thatā€™s what I like personally, so Iā€™ve set it up that way. Because we are based in Japan, the root urls default to Japanese, so itā€™s not like folks will see the wrong language by accident. And because our sites have been around a long while, when people search for English terms on Google, they tend to get shown our English pages, not the Japanese. So it all works rather well. But again, they key to my success was the code that replaces the link so I can keep my beloved links in the global Header and Footer area. Thatā€™s golden in my eyes! :slight_smile:

Just a heads up @JDW, when you choose English as the language and then click EVENTS, it takes you to a Japanese language page.

1 Like

Yep. There are some pages Iā€™ve not rebuilt in Blocs yet and probably wonā€™t if they are in Japan exclusive things like Events. Iā€™ve tried to mark most of the pages I will eventually translate with a Japanese flag emoji to help alert people. The Events page is just one exception to that.

Nice solution @JDW , but it means you create a blocs site for japan, and a blocs site for english ( you have 2 .blocs files ) the japan site you upload to yoursite.com/ and the english site you upload to yoursite.com/en/ correct?

@sandy
Correct! Iā€™ve been doing it this way since I started on dual language sites back in 1999. Iā€™ve not any problems doing it that way. the /en subdirectory keeps everything nicely divided.

I also use Googleā€™s Custom Search too, and I can divide the search results by language. So when you search on KIRAMEK: Car Security, Alarms & Auto Speed Locking you get English language results from the English language pages, and the same is true when you search on the Japanese pages.

1 Like

I do this the same way :smiley: also with google search. niceeeee. I will try your ā€˜trickā€™ later on a live project.

1 Like

hey @hendon52 I think I asked you this once but I cant find it! To have a multi language page and for people to see the site on their native page its this code you post here right?

The code I posted here is for a language link that can be placed in a global area Can be a button, text or image. You then add an onclick event to the link. You would then add the small piece of code to every page that switches the page to the opposite language version. The url in the code is changed on a page by page basis.

If you want language selection to be automatic, based on the userā€™s system language, that too can be incorporated by adding a piece of code.

This maybe an option for someone, @Edward can probably comment how well its working for him. Seems to be a few ways you can approach this. I personally havenā€™t built a multi language site.

I remember you posted this code once! Could you post it again please?

I mean for example if the page its one English and Spanish i will see it on Spanish as my systems its om Spanish and you will see it in English

1 Like

The code below is set up to detect English, German and French. You can add as many languages as needed. Be sure to use the industry-standard ISO language codes which you can find HERE.

<script type= "text/javascript">
var language = window.navigator.language;
  
if(language == "en-US" || language == "en-ā€œgb || language == "en-CA"){
window.location.href = "www.yoursite.com/en";
}

else if(language == "de" || language == "de-at" || language == "de-li" || language == "de-ch" || language == "de-lu"){
window.location.href = "www.yoursite.com/de";
}

else if(language == ā€œfrā€ || language == ā€œfr-beā€ || language == ā€œfr-chā€){
window.location.href = "www.yoursite.com/frā€;
}       
</script>

The above code should ONLY be added to the root index page, not the language variants. This will prevent visitors getting stuck in a loop if they get switched to another language variant of your page. It is also advisable to make a duplicate of the main index page WITHOUT the autodetect code (call it home.html) and have all your home site links point to that version of the home page. Again, this is to prevent visitors getting redirected a second time if they return to your main home page URL.

3 Likes

That was it!! Thank you so much!!

Did you copy and paste @tom2, because there is an error in that code.

hi @PeteSharp

yes I do

could you please tell me the error ? What I have done I delete the fr language

Oh, I think I see the error. Lets try :slight_smile:
UPDATE:

Hi @PeteSharp
shiā€¦ Donat work :roll_eyes:

Could you please tell me what you think is the error ?
tom

What error did you see?

The " " are messed up, itā€™s tricky to spot. Below is the code fixed.

By the way when doing this, a few things you want to consider for SEO.

  1. Make sure you set the lang in the header for each language.
  2. Setup Alternate Meta tags. eg

hreflang attributes

<link rel="alternate" hreflang="fr" href="https://www.yoursite.com/fr/index.html">

You can also use og:locale:alternate
<meta property="og:locale:alternate" content="fr_FR">

The fixed code

<script type="text/javascript">
  var language = window.navigator.language;
  
  if (language == "en-US" || language == "en-GB" || language == "en-CA") {
    window.location.href = "www.yoursite.com/en";
  } else if (language == "de" || language == "de-at" || language == "de-li" || language == "de-ch" || language == "de-lu") {
    window.location.href = "www.yoursite.com/de";
  } else if (language == "fr" || language == "fr-be" || language == "fr-ch") {
    window.location.href = "www.yoursite.com/fr";
  }       
</script>

I think it would be better to do this with .htaccess for the redirects. The alternate tags you really need to add, to stop being penalised by Google.

Hi @PeteSharp

thanks so much. I spotted the " " also :slight_smile:
Do you have an example for a htachess file ? And when I use a htaccess file also set the language on each page ?
What du you mean with the alternate tags ? Where I do this ?

thank you Pete