Flattr is a social micropayments/microdonations provider. The basic idea is that: for a flattr user, you can transfer a small amount of money to your flattr account each month. Then when you’re browsing the web, you find some good content which is flattr supported and you want to sure your support, you can click the “flattr” button to do so. At the end of the month, all you “flattr-ed” content providers in this month will share the money in your flattr account. And of course the flattr website itself will get some money: as the content provider you get 90 percent and flattr.com keeps 10 percent.

In this post, I list the steps how I add flattr support to my Octopress blog.

The operations below referred the articles here and here.

First, register your web content on flattr.com. It’s very straightforward after you sign up on flattr.com. The output is your web content’s flattr URL, such as “http://flattr.com/thing/1149781/Blog-of-GangMax“.

Then modify your local Octopress content to add the flattr button both to the aside bar and to each post.

1. Add the following content to the end of “_config.yml”, this is an argument for later usage:

1
2

# Add the following section for flattr
flattr_url: http://flattr.com/thing/1149781/Blog-of-GangMax # Replace this URL with yours.

2. Add a file “source/_includes/custom/asides/flattr.html” like below. This is the flattr button html code, and the parameters in it will be replaced by the real argument values when generating the Octopress html content:

1
2
3
4
5
6
7

<!-- Add the following section for flattr -->
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="{% raw %}{{ site.url }}{% endraw %}"></a>
<noscript>
  <a href="{% raw %}{{ site.flattr_url }}{% endraw %}" target="_blank">
    <img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" />
  </a>
</noscript>

3. Add the following content to the file “source/_includes/custom/head.html”. This step makes the flattr related Javascript be available for each html page:

1
2
3
4
5
6
7
8
9
10
11

<!-- Add the following section for flattr -->
<script type="text/javascript">
/* <![CDATA[ */
    (function() {
        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
        t.parentNode.insertBefore(s, t);
    })();
/* ]]> */</script>

4. Add the flattr button to “source/_includes/post/sharing.html”. This step makes the flattr button show on the end of each post:

1
2
3
4
5
6
7
8

<div class="share">
    {% raw %}
    {% if site.flattr_user %}
    {% include custom/asides/flattr.html %}
    {% endif %}
    {% endraw %}
    ...
</div>

5. Add the flattr button to “aside” part by modifying the “_config.yml” like below. This step makes the flattr button show on the aside bar:

1

default_asides: [custom/asides/qrcode.html, custom/asides/flattr.html, ...

6. Done.