Add Flattr to Octopress

Update add payment relation to header, thanks to @voxpelli

In this article I will show how to add Flattr to your octopress blog and feed.

First of all add your flattr user name (also known as user id) to the configuration:

_config.yml
1
2
# Flattr
flattr_user: YourFlattrName

To add a flattr button to the sharing section of your posts, add this template:

source/_includes/post/flattr_button.html (flattr_buttom.html) download
1
2
3
4
5
6
7
8
9
<a class="FlattrButton" style="display:none;"
    title="{{ page.title }}"
    data-flattr-uid="{{ site.flattr_user }}"
    data-flattr-tags="{{ page.categories | join: "," }}"
    data-flattr-button="compact"
    data-flattr-category="text"
    href="{{ site.url }}{{ page.url }}">
    {% if page.description %}{{ page.description }}{% else %}{{page.content | truncate: 500}}{% endif %}
</a>

and add the following javascript to your custom head.html

source/_includes/custom/head.html (head.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
{% if site.flattr_user %}
<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 = '//api.flattr.com/js/0.6/load.js?mode=auto';
        t.parentNode.insertBefore(s, t);
    })();
/* ]]> */
</script>
{% endif %}

Now include it in your sharing template:

source/_includes/post/sharing.html (sharing.html) download
1
2
3
4
5
6
<div class="share">
    {% if site.flattr_user %}
    {% include post/flattr_button.html %}
    {% endif %}
    ...
</div>

The result will look like this:

To make flattr discoverable by programs (feed reader, podcatcher, browser extensions…), a payment relation link is needed in html head as well as in the atom feed.

First add this (lengthy) template…

source/_includes/flattr_param.html (flattr_param.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
{% if post %}
{% assign item = post %}
{% else %}
{% assign item = page %}
{% endif %}

{% capture flattr_url %}{{ site.url }}{{ item.url }}{% endcapture %}

{% capture flattr_title %}{% if item.title %}{{ item.title }}{% else %}{{ site.title }}{% endif %}{% endcapture %}

{% capture flattr_description %}{% if item.description %}{{ item.description}}{% else index == true %}{{ site.description }}{% endif %}{% endcapture %}

{% capture flattr_param %}url={{ flattr_url | cgi_escape }}&amp;user_id={{site.flattr_user | cgi_escape }}&amp;title={{ flattr_title | cgi_escape }}&amp;category=text&amp;description={{ flattr_description | truncate: 1000 | cgi_escape }}&amp;tags={{ item.categories | join: "," | cgi_escape }}{% endcapture %}

… then include it in your feed …

source/atom.xml (atom.xml) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---
layout: null
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title><![CDATA[{{ site.title }}]]></title>

  ...

  {% for post in site.posts limit: 20 %}
  <entry>
    <title type="html"><![CDATA[{{ post.title | cdata_escape }}]]></title>
    <link href="{{ site.url }}{{ post.url }}"/>
    <updated>{{ post.date | date_to_xmlschema }}</updated>
    <id>{{ site.url }}{{ post.id }}</id>
    {% if site.flattr_user %}
    {% include flattr_param.html %}
    <link rel="payment" href="https://flattr.com/submit/auto?{{ flattr_param }}" type="text/html" />
    {% endif %}
    <content type="html"><![CDATA[
      {{ post.content | expand_urls: site.url | cdata_escape }}
    ]]></content>
  </entry>
  {% endfor %}
</feed>

and in your head template:

source/_includes/custom/head.html (head2.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if site.flattr_user %}
<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 = '//api.flattr.com/js/0.6/load.js?mode=auto';
        t.parentNode.insertBefore(s, t);
    })();
/* ]]> */
</script>

{% include flattr_param.html %}
<link rel="payment" href="https://flattr.com/submit/auto?{{ flattr_param }}" type="text/html" />
{% endif %}

Because not (yet) all feed reader support this feature, you can add a dedicated flattr link.

Therefor create a new template:

source/_includes/flattr_feed_button.html (flattr_feed_buttom.html) download
1
2
3
4
5
{% include flattr_param.html %}
<a href="https://flattr.com/submit/auto?url={{ flattr_param }}">
      <img src="https://api.flattr.com/button/flattr-badge-large.png"
           alt="Flattr this"/>
</a>

Compared to the other button, this one will not require javascript, which isn’t always available in feed readers.

Finally add it your feed template:

source/atom.xml (atom2.xml) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
---
layout: null
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title><![CDATA[{{ site.title }}]]></title>

  ...

  {% for post in site.posts limit: 20 %}
  <entry>
    <title type="html"><![CDATA[{{ post.title | cdata_escape }}]]></title>
    <link href="{{ site.url }}{{ post.url }}"/>
    <updated>{{ post.date | date_to_xmlschema }}</updated>
    <id>{{ site.url }}{{ post.id }}</id>
    {% if site.flattr_user %}
    {% include flattr_param.html %}
    <link rel="payment" href="https://flattr.com/submit/auto?{{ flattr_param }}" type="text/html" />
    {% endif %}
    <content type="html"><![CDATA[
      {{ post.content | expand_urls: site.url | cdata_escape }}
      {% if site.flattr_user %} {% include flattr_feed_button.html %} {% endif %}
    ]]></content>
  </entry>
  {% endfor %}
</feed>

This will add a flattr button to each entry in your feed.

Preview:

That’s all folks! I hope you will become rich by your flattr income.

Comments