---
layout: post
title: "Add Flattr to Octopress"
date: 2013-01-20 11:35
comments: true
description: "how to add flattr button and flattr payment link to your octopress"
published: yes
categories:
- flattr
- octopress
- feed
---
**Update** add payment relation to header, thanks to [@voxpelli](https://twitter.com/voxpelli)
In this article I will show how to add [{% img left https://flattr.com/_img/icons/flattr_logo_16.png 14 14 %}Flattr](https://flattr.com/)
to your [{% img left /favicon.png 14 14 %} octopress](http://octopress.org) blog and feed.
First of all add your flattr user name (also known as user id) to the
configuration:
```yaml _config.yml
# Flattr
flattr_user: YourFlattrName
```
To add a flattr button to the sharing section of your posts, add this template:
{% raw %}
``` html source/_includes/post/flattr_button.html
{% if page.description %}{{ page.description }}{% else %}{{page.content | truncate: 500}}{% endif %}
```
{% endraw %}
and add the following javascript to your custom head.html
{% raw %}
``` html source/_includes/custom/head.html
{% if site.flattr_user %}
{% endif %}
```
{% endraw %}
Now include it in your sharing template:
{% raw %}
``` html source/_includes/post/sharing.html
{% if site.flattr_user %}
{% include post/flattr_button.html %}
{% endif %}
...
To make flattr discoverable by programs (feed reader, podcatcher, browser extensions...), a [payment relation link](http://developers.flattr.net/feed/) is needed in html head as well as in the atom feed.
First add this (lengthy) template...
{% raw %}
``` html source/_includes/flattr_param.html
{% 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 }}&user_id={{site.flattr_user | cgi_escape }}&title={{ flattr_title | cgi_escape }}&category=text&description={{ flattr_description | truncate: 1000 | cgi_escape }}&tags={{ item.categories | join: "," | cgi_escape }}{% endcapture %}
```
{% endraw %}
... then include it in your feed ...
{% raw %}
``` xml source/atom.xml
---
layout: nil
---
<![CDATA[{{ site.title }}]]>
...
{% for post in site.posts limit: 20 %}
<![CDATA[{{ post.title | cdata_escape }}]]>{{ post.date | date_to_xmlschema }}{{ site.url }}{{ post.id }}
{% if site.flattr_user %}
{% include flattr_param.html %}
{% endif %}
{% endfor %}
```
{% endraw %}
and in your head template:
{% raw %}
``` html source/_includes/custom/head.html
{% if site.flattr_user %}
{% include flattr_param.html %}
{% endif %}
```
{% endraw %}
Because not (yet) all feed reader support this feature, you can add a dedicated flattr link.
Therefor create a new template:
{% raw %}
```html source/_includes/flattr_feed_button.html
{% include flattr_param.html %}
```
{% endraw %}
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:
{% raw %}
``` xml source/atom.xml
---
layout: nil
---
<![CDATA[{{ site.title }}]]>
...
{% for post in site.posts limit: 20 %}
<![CDATA[{{ post.title | cdata_escape }}]]>{{ post.date | date_to_xmlschema }}{{ site.url }}{{ post.id }}
{% if site.flattr_user %}
{% include flattr_param.html %}
{% endif %}
{% endfor %}
```
{% endraw %}
This will add a flattr button to each entry in your feed.
Preview:
{% include flattr_param.html %}
[{% img left https://api.flattr.com/button/flattr-badge-large.png Alt Flattr this %}](https://flattr.com/submit/auto?{{ flattr_param }})
That's all folks! I hope you will become rich by your flattr income.
