Add flattr Button to Website or Blog

Flattr Micro payments are one of the most popular ways these days to reward things of your choice. You can see the flattr button on websites and services, and you may flattr you’re favorite things by clicking that small green-colored reward button. Before going into how to add a flattr button to website, here’s a little preface about flattr:

Flattr, a Swedish-based micro payments system, allows users to donate funds online to online projects and websites as per their choice.

How flattr works?

Is flattr the another PayPal Donate button-like thing? Well, NO.
When users register to flattr, they pay a small monthly fee which is divided between all flatters they made throughout the month. As per the divisions, the amount is paid to the content creators they flattered on a monthly basis.

The monthly payments to flattr can be done via MoneyBookers or PayPal and can range from Two Euro to one hundred Euro and are called as ‘Means’. After adding funds to your account, you can now start flattring / donating. You just have to click the green Flattr button to donate to the sites using it.

The use of flattr is not just limited to the virtual world, you can also donate someone in the real world via flattr QR Scan:

flattr Micro payments via QR Scan

We’ll talk more about flattr QR Scan in a future post.

Adding a flattr button to your website or blog

Blogger, webmasters and online services can add the flattr button to receive flattrs from their fans. Flattr provides a code to put on your site to show the button. The button has two layouts: the default with vertical bubble count and the compact with horizontal bubble count.

Flattr also provides a StumbleUpon-like facility to submit URLs to flattr. Just go to their submit page and get the embed code for your button. You can also get the static i.e. image only version for your flattr button.

Basic flattr button for static websites

<script src="http://api.flattr.com/js/0.6/load.js?mode=auto"></script>
<a class="FlattrButton" href="LINK_TO_YOUR_SITE" style="display:none;" title="TITLE_OF_YOUR_SITE" data-flattr-uid="YOUR_FLATTR_USERNAME" data-flattr-button="TYPE_OF_BUTTON" data-flattr-category="FLATTR_CATEGORY" data-flattr-lang="FLATTR_LANGUAGE"></a>

The above given code is for basic flattr button, which carries some parameters with it and I think I should explain these parameters before doing anything.

Now, you can alter the parameter as per the information mentioned in above table. After that, put the modified code on your site where you want the flattr button to appear.

I have written the flattr button codes for some popular blogging platforms, you just need to grab the code and paste it as told in the code of your website or blog. Modify the parameter values as required:

Note: Before proceeding, make sure you created a back-up of your site.

flattr button for WordPress

Go to your theme directory and open single.php in editing mode. Put the below given code just * above / below <?php the_content(); ?>:

<script src="http://api.flattr.com/js/0.6/load.js?mode=auto"></script>
<a class="FlattrButton" href="<?php the_permalink(); ?>" style="display:none;" title="<?php the_title(); ?>" data-flattr-uid="YOUR_FLATTR_USERNAME" data-flattr-button="default" data-flattr-category="text" data-flattr-lang="en"></a>

flattr button for Blogger

Log in to you Blogger account and go to Blogger Dashboard » Design » Edit HTML. Click “Expand Widget Templates” textbox. Find <b:includable id=’shareButtons’ var=’post’> paste the following code just below it:

<script src="http://api.flattr.com/js/0.6/load.js?mode=auto"></script>
<a class="FlattrButton" expr:href=" + data:post.url + " style="display:none;" expr:title=" + data:blog.title + " data-flattr-uid="YOUR_FLATTR_USERNAME" data-flattr-button="default" data-flattr-category="text" data-flattr-lang="en"></a>

Save Template.

If it shows error message like:
More than one widget was found with id: Navbar1. Widget IDs should be unique.
Then, just find Navbar1 (it could also be Navbar2 or Navbar3, just find the same it has reflected in the warning) in your template code and replace it with Navbar2 (or a different one like Navbar3 or Navbar4).
If it says:
Warning: Your new template does not include the following widgets:…
Just click the “Keep Widgets” button. That’s it.

flattr it button for Tumblr

Go to your Tumblr Dashboard » Edit » HTML. Find {/block:Regular} and paste the following code * above / below it:

<script src="http://api.flattr.com/js/0.6/load.js?mode=auto"></script>
<a class="FlattrButton" expr:href="{Permalink}" style="display:none;" expr:title="{PostTitle}" data-flattr-uid="YOUR_FLATTR_USERNAME" data-flattr-button="default" data-flattr-category="text" data-flattr-lang="en"></a>

Click Update.

flattr button for Posterous

I’m looking for a way to add a flattr button to Posterous spaces. Stay tuned for the update.

That’s it! I hope you found this guide helpful. Let me know if you’re facing any problems with it or have any suggestions about it.