Flattr Button Plugin for Blogger.com / Blogspot

Hi guys,

recently I stumbled over new service called Flattr. Basically it's pretty much like a Facebook "I like!" Button, with the tiny difference that you kind of pay a part of your monthly deposit to the 'owner' of the button. More info can be obtained here: https://flattr.com/

So as I expect this service to become big and a got an invite yesterday, I thought of the need for a plugin for blogger.com / blogspot.com .

Of course you can manually insert the a Flattr button using the Javascript-code (https://flattr.com/support/api). I did that too, at least in the beginning.

As Blogger doesn't really provide a plugin mechanism Matthias Bomelin had a nice idea to integrate the code into the template engine of blogger.
http://mattias.bomelin.com/2010/05/att-infoga-flattr-knappar-i-blogger.html

As I had some trouble using the code from his blog (due to the formatting that blogger tends to break pretty successfulyl), this is my copy-paste save version:

<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>

<span style='float:left; margin:5px;'>
 <script type='text/javascript'>
  var flattr_uid = &#39;_____&#39;; // Replace underscores with Flattr ID
  var flattr_tle = document.getElementById(&#39;flattr_title_<data:post.id/>&#39;).innerHTML;
  var flattr_dsc = document.getElementById(&#39;flattr_summary_<data:post.id/>&#39;).innerHTML;
  var flattr_cat = &#39;text&#39;;
  var flattr_lng = &#39;en_GB&#39;;
  var flattr_tag = &#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>&#39;;
  var flattr_url = &#39;<data:post.url/>&#39;;
  var flattr_btn = ''; // for normal button
  // var flattr_btn = 'compact'; // for compact button  
 </script>
 <script src='http://api.flattr.com/button/load.js' type='text/javascript'/>
</span>

But where to put this code?

Caution: Before you change anything in the template, save a backup somewhere!

This code goes right into your template. Make sure that you have the field to show the whole template checked! While I myself am not really familiar with blogger templates at all (mine obviously isn't the most common one) I can only assume that the right line to put the code below is the one surrounded by the red ellipse. (It seems to include the needed variables).

Actually I don't need to post a screenshot of the result, as you can check it out yourself in this post ;)

If you have questions, post a comment!

[Edit]
Reader Piratino requested how to add a compact button to the bottom of a blog post. Actually it is almost the same except that you'd 'swap' (comment the one and uncomment the other one) the following lines of the code used avobe:

var flattr_btn = ''; // for normal button
  // var flattr_btn = 'compact'; // for compact button;

You'd add that code somewhere below the line marked below, as it includes the content of the post.

As always it is a little different for every template, so you might have go for a little Try and Error to find the right place and formatting.
[/Edit]

Best Regards,
Nicolas