Flattr Content Localization

Yay! Just finished :D Thanks to the new Flattr API (and Google, and jQuery), I could easily implement a language detection system for flattr content.

Until now, all the posts were marked en_GB, and most of flattr content aren't correctly localized, because AFAIK, flattr didn't auto-detect the language.

Now I've developed a simple piece of code that uses Google translation API to detect the language of the current post and to insert a correct Flattr button there.

Look at my current template source here.

How to use it

1. Copy the JavaScript script tag (also the google jsapi) at the beginning in your template.
2. Update your UID, post category and languages (langDict).
3. Insert a tag where your button will be inserted in (flattr-button, line 1215).
4. Find the contents tags (for example post.url, post.title and so on) and set a class attribute to their container (rows 35-40), eventually changing these classes (look at lines 1192 or 1218 for examples on how to set these class names).
5. Upload the new template to blogger.

How it works

With the new API 0.5.0, it's pretty simple, and it's done like this:

1. insert a tag marked for containing the button (.flattr-button);
2. for each of this tag, find the associated post data (using other flattr-X classes),
3. start translating the data (async),
4. in the callback, when translation is ready, use FlattrLoader.render() to render that button.

To avoiding copying around the values - as was done in Nico's - I work on every button instance (elements with class flattr-button). Using jQuery I get the post content (the parent of all the data, classed flattr-post), and in its scope, I try to find the tags with the contents (flattr-title, -url, etc).

If you don't want to use jQuery or you don't want to rely on this hierarchical structure, you can insert hidden tags, marked as you like, like Nico's, but I think that data duplication is bad, so it's better to fix a bit the code and avoiding duplicates.

There is room for improvements:

• the mapping between Google languages list and Flattr's language list isn't automatic, but it's done manually with a dictionary. I didn't check how to do it, and probably I won't do it in short term :P
• tag list isn't processed, it may be comma separated, but also separated with colons, spaces, whatever. So this is a case where data duplication isn't a bad idea (but it would require the user to tweak more the template). Now, I'm relying on the fact that my template uses comma separated tags;
• I'm tired and I can't remember the other issue :D EDIT: Oh yeah! It uses jQuery... If you know JavaScript better than me, and want to replace jQuery with a standard-multi-browser version, would be great.

Hope you like it.
Stay --sync