Sunday, May 23, 2010

To add a Flattr button to your blogger or blogpsot blog


Like I said in my post from yesterday, I signed up for flattr because I believe it's a great way for me as a blog reader and consumer of online art to be able to show my appreciation by giving actual (but small) cash contributions in a very easy and comfortable way (not having to sing on paypal or anything, just a click).

This tips is for users of googles blogspot service. To make it so that a unique flattr button is created for every blog post one have to copy a special code into the blogger template layout code. The original source of the code is Mattias Bomelin, check his blog post here and give him a flattr if you find it useful.

Nicolas Gramlich used the code and wrote a bit more "noob-friendly" guide as to how and where to put the code, here.

What I did was to paste the piece of code below just after the line that says:
<div class='post-footer'>

<div expr:id='"flattr_summary_" + data:post.id' style='display: none;'>
<data:post.body/>
</div>
<div expr:id='"flattr_title_" + data:post.id' style='display: none;'>
<data:post.title/>
</div>
<span style='float:left; margin:5px;'>
<script type='text/javascript'>
var flattr_uid = '_____'; // Replace underscores with Flattr ID
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/>';
//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>

Remember to insert your own flattr user number. You can change where you place the code in the template if you wan't to change the placement of the button (but you have to understand a bit of html for that). Of course, before you do anything save a backup copy of the template code and you have to check the "Expand Widget Templates"-checkbox.

1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete