flattr plugin for blogger.com/blogspot.com (old version)

There is a new version of this plugin that uses the new API. Please look here.


As this post is intended for an international audience, I'll write it in English.
As I'm a memeber of flattr.com since a few days, I wanted to add a flattr button to my blog posts.
I found this solution on Nicolas Gramlich's blog (who copied most of the script from Mattias Bomelin), but it worked only on short blog entries. All others showed only a large "ER" which seems to be the flattr error message.
If Nicolas hasn't changed his Blogger template yet, you can see the behaviour if you click on the link above. (Looks good sometimes, shows error at other times.)
When I investigated the issue, I found out that the flattr decription as sent by the plugin was too long, and I was also told that it shouldn't contain newlines or unescaped ' chars. Update: This seems to have been a wrong information, at least if a div tag is used like in the script. The posts ended up with literal \n and \' in them, so I put the relevant lines in comments.
I tweaked everything a bit, and here's a solution to the problem:
Click this link to get a changed version of the plugin.
It will:

• Use the post itself as the flattr description just as the original plugin did, but …
• It will remove all HTML tags from the flattr description.
• It will replace newlines by \n. See update above.
• It will escape ' chars to \'. See update above.
• It will truncate the description to a maximum length of 980 chars. If possible, it will use a space as truncation point and add "…".
• It will respect other flattr limits and truncate the title to a maximum length of 80 chars and the tags to a maximum length of 230 chars in a similar manner. (I stayed a little away from the hard limits of 100 / 255 chars, respectively.)
• Update: flattr requires the title of a flattr thing to have at least five chars. So if you have a blog post called "Uh!" it won't be enough and you'll get an error in the flattr button. I couldn't think of a good possibility to fill missing chars without garbling the blog post title, so I just kept it the way it is (suggestions welcome). So this is a caveat: Always use post titles longer than 5 chars! ;-)

As you can see in this post, I added the flattr button to the bottom of the post, different from what Nicolas did. To achieve that, I placed it in the 'post-body entry-content' div. Here are a few lines from the Blogger template and the start of the plugin to illustrate where I put it:

<div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   <!-- flattr plugin starts here -->
   <div expr:id='&quot;flattr_summary_&quot; + data:post.id' style='display: none;'> 
   <data:post.body/> 
   </div>  …

Note that I put the <span> tags from Nicolas' version into comments to achieve a sensible placement. You'll have to reenable them if you want to use the plugin in the title as Nicolas did.
Also, I changed the language to de_DE as appropriate for my blog; you'll have to change that, too, if you're not writing in German.

If anybody knows how to change the content of the RSS and Atom feeds I'd appreciate a notice as I'd like to add a flattr button to the feeds, too.

So, happy flattring to all of you! Credits go to Nicolas and especially to Mattias who created the original work.

There is a new version of this plugin that uses the new API. Please look here.


As this post is intended for an international audience, I'll write it in English.
As I'm a memeber of flattr.com since a few days, I wanted to add a flattr button to my blog posts.
I found this solution on Nicolas Gramlich's blog (who copied most of the script from Mattias Bomelin), but it worked only on short blog entries. All others showed only a large "ER" which seems to be the flattr error message.
If Nicolas hasn't changed his Blogger template yet, you can see the behaviour if you click on the link above. (Looks good sometimes, shows error at other times.)
When I investigated the issue, I found out that the flattr decription as sent by the plugin was too long, and I was also told that it shouldn't contain newlines or unescaped ' chars. Update: This seems to have been a wrong information, at least if a div tag is used like in the script. The posts ended up with literal \n and \' in them, so I put the relevant lines in comments.
I tweaked everything a bit, and here's a solution to the problem:
Click this link to get a changed version of the plugin.
It will:

• Use the post itself as the flattr description just as the original plugin did, but …
• It will remove all HTML tags from the flattr description.
• It will replace newlines by \n. See update above.
• It will escape ' chars to \'. See update above.
• It will truncate the description to a maximum length of 980 chars. If possible, it will use a space as truncation point and add "…".
• It will respect other flattr limits and truncate the title to a maximum length of 80 chars and the tags to a maximum length of 230 chars in a similar manner. (I stayed a little away from the hard limits of 100 / 255 chars, respectively.)
• Update: flattr requires the title of a flattr thing to have at least five chars. So if you have a blog post called "Uh!" it won't be enough and you'll get an error in the flattr button. I couldn't think of a good possibility to fill missing chars without garbling the blog post title, so I just kept it the way it is (suggestions welcome). So this is a caveat: Always use post titles longer than 5 chars! ;-)

As you can see in this post, I added the flattr button to the bottom of the post, different from what Nicolas did. To achieve that, I placed it in the 'post-body entry-content' div. Here are a few lines from the Blogger template and the start of the plugin to illustrate where I put it:

<div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   <!-- flattr plugin starts here -->
   <div expr:id='&quot;flattr_summary_&quot; + data:post.id' style='display: none;'> 
   <data:post.body/> 
   </div>  …

Note that I put the <span> tags from Nicolas' version into comments to achieve a sensible placement. You'll have to reenable them if you want to use the plugin in the title as Nicolas did.
Also, I changed the language to de_DE as appropriate for my blog; you'll have to change that, too, if you're not writing in German.

If anybody knows how to change the content of the RSS and Atom feeds I'd appreciate a notice as I'd like to add a flattr button to the feeds, too.

So, happy flattring to all of you! Credits go to Nicolas and especially to Mattias who created the original work.

flattr plugin for blogger.com/blogspot.com (old version)