onsdag 12 maj 2010

Flattr buttons with Blogger

I've spent some time with the Blogger developer documentation and haven't found any way to create a widget/gadget and include it per blog post. Maybe there's a way but I gave up since I didn't find any way to access the blog post data either. To be able to automatically display a Flattr button per blog post we'd need to insert the blog post title and the blog post contents into javascript variables. The problem is, what happens if it includes chars that'll break the javascript, single quotes for instance?
My first thought was to encapsulate the texts in CDATA but that won't work since xml tags inside CDATA don't get parsed. And a Blogger template is all about xml... The solution i came up with creates hidden divs for the texts we need and pick them up with getElementById(...).innerHTML.

<div expr:id="&quot;flattr_summary_&quot; + data:post.id" style="display: none;">
<data:post.body />
</div>
<div expr:id="&quot;flattr_title_&quot; + data:post.id" style="display: none;">
<data:post.title />
</div>

There's our divs with the post title and body. Now it's time to setup the flattr js.

<script type="text/javascript">
var flattr_uid = ''; // Add your Flattr User Id here
var flattr_tle = document.getElementById('flattr_title_<data:post.id />').innerHTML;
var flattr_dsc = document.getElementById('flattr_summary_<data:post.id />').innerHTML;
var flattr_cat = 'text';
var flattr_lng = 'en_GB';
var flattr_tag = '<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>';
var flattr_url = '<data:post.url />';
</script>
<script src="http://api.flattr.com/button/load.js" type="text/javascript"></script>


Since I haven't come up with a way to extend Bloggers blog post alternative settings I had to hard code the category and the language. Since my blog is primarily in swedish I've set it to sv_SE and have to manually edit each non-swedish thing on flattr.com to change the language setting.
This sucks but hopefully Blogger will open up more some day...

1 kommentarer:

Anonym sa...

ad ID where? Im not a nerd... so please make it moor clear. thx