Localize your (Squarespace) site the elegant way

In an effort to make our web page more accessible to local customers, we wanted to make our content available in Norwegian as well. Initially we were looking to Squarespace, where we host our site, to provide something out of the box.

Unfortunately, Squarespace's proposed solutions to the problem include two mind-numbingly horrendous proposals;

  • Stuff your webpage through Google Translate
  • Duplicate your webpage structure using automatic folder navigation
    • which means changing anything later is a major pain in the posterior

After looking around and becoming increasingly more frustrated, we finally found Localize.js.

Oh. My. Significant Deity!

Localize.js integrates into your site with a small chunk of JavaScript as seen in the Quick Start guide. With this script installed, all strings will be collected and presented to you in your localizejs.com account, where you can phrase by phrase provide your translation

Screen Shot 2015-01-16 at 09.45.26.png

It takes a little getting used to having to re-insert tags by clicking e.g. the span, but once you figure it out it's very elegant and allows translations that would require changes in sentence ordering. You see the original structure in the source text and can easily re-add them where appropriate. For the most accurate results I ended up using the Inspect Element option and copying out the placeholder text - translating only parts of the content as seen in the image above.

You'll need to browse around your page to ensure all phrases are collected. For us, this also caused all of our blog posts to appear in the phrases - which means you could acutally use this to create multi-lingual blog posts! Pretty sweet - but since we didn't want to go to such lenghts I looked for a way to specifically exclude parts of our web page from phrase collection.

When initializing Localize.js, you set a few parameters. Most notably the blockedClasses option of Localize.initialize. Since we use Squarespace, most HTML elements are helpfully tagged with classes. This way we can list the ones to exlude from phrase collection;

blockedClasses: ["post",
 "entry-title",
 "comment",
 "next",
 "next-title",
 "prev",
 "prev-title",
 "comment-count",
 "comment-btn"]

And voila! - blog post content is no longer collected into the Phrase list.

To have your webpage automatically render in the language the reader wants (the first match against Accept-Language), you can query getLanguage. If the language has not already been set, you can determine the language match using the following code snippet adapted from localizejs;

// The languages that are enabled on your Localize.js account
var availableLanguages = ['en', 'no'];

if (Localize.getLanguage === 'source' ) {
  Localize.detectLanguage(function(err, languages) {
    if (err || !Array.prototype.indexOf || !Array.prototype.forEach)
      return;

    var newLanguage;

    languages.forEach(function(language) {
      if (newLanguage) return;
      if (availableLanguages.indexOf(language) !== -1)
        newLanguage = language;
    });

    if (newLanguage)
      Localize.setLanguage(newLanguage);
  });
}

Finally, if you need to link directly to the language of your choice (e.g. for a domiestic marketing campaign), you can use the ljs query parameter with the ISO 639-1 language code like so;

http://www.cutehacks.com/?ljs=no

There you have it. Took me less than a minute to set up. A fair bit more to go over all our content naturally - but in the end I didn't have to break our structure or forsake maintainability to add a second (or third, fourth..) language!