Posted on March 19, 2012

tl;dr: Here is how I integrated Flattr into my octopress blog.


Over the weekend, I integrated Flattr into my blog. Flattr is an online payment system for giving small donations to content creators over the internet. It is a neat way to tip people on the web. It slowly gains some traction in Europe and many german content creators have it integrated into their services. Even some newspapers like the german taz integrate Flattr to give users of their online portal an easy way to voluntarily pay for news articles.

In the USA it is not that common yet. Although pages, like 5by5 started integrating flattr recently as well.

Octopress integration

For the Octopress Integration, I basically used a solution by Simon Szustkowski that I found via google. His solution is very straight forward. He gave a detailed description of it on his blog (which is in german) and there is also an octopress fork with the changes included over here.

Following that way, you get a Flattr button on every post. In addition to that, I also created a Flattr button for the blog as a whole and added it to the asides. My changes to Octopress can be seen here. They integrate Simons solution and my Button for the blog into one commit to my blog repo. The Flattr Thing for the blog must be created manually on the Flattr homepage and the URL to that thing must be put in your _config.yml under flattr_blog_thing. If that configuration is set and the custom aside is enabled in the default_asides, there will be a Flattr Button in the aside.

{% gist 2106894 %}

All other changes are directly from Simons solution. when the flattr_user is set in _config.yml, the flattr-api Javascript will be included in the header source/_include/custom/head.html. This will also conditionally include flattr_button.html in the sharing area below each post source/_includes/post/sharing.html. The Flattr Things are automatically generated by the Flattr API when someone first clicks on one of those buttons. (A Thing in Flattr-Lingo is something you can give money to.)

Official support?

By the way, the currently official stance of Octopress is to not integrate Flattr into the core of Octopress. Brandon wants to keep Octopress lean and have only the essentials in the core - which I think is very reasonable. Maybe there will be an official Flattr-pluign sometime in the future. Until then, I hope this helps other people integrating Flattr into their Octopress setups. If you have any questions, feel free to contact me.

And if you havn’t yet tried Flattr, go ahead and make the internet a better place for everyone!