---
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
---

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
<a class="FlattrButton" style="display:none;"
    title="{{ page.title }}"
    data-flattr-uid="{{ site.flattr_user }}"
    data-flattr-tags="{{ page.tags }}"
    data-flattr-button="compact"
    data-flattr-category="text"
    href="{{ site.url }}{{ page.url }}">
    {{ page.content[0,500] }}
</a>
```
{% endraw %}

and add the following javascript to your custom head.html

{% raw %}
``` html source/_includes/custom/head.html
 {% include custom/richobject.html %}
 {% 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 = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
         t.parentNode.insertBefore(s, t);
     })();
 /* ]]> */
 </script>
 {% endif %}
```
{% endraw %}

Now include it in your sharing template:

{% raw %}
``` html source/_includes/post/sharing.html
<div class="share">
    {% if site.flattr_user %}
    {% include post/flattr_button.html %}
    {% endif %}
    ...
</div>
```
{% endraw %}

The result will look like this:

<div>
<a class="FlattrButton" style="display:none;"
  title="{{ page.title }}"
  data-flattr-uid="{{ site.flattr_user }}"
  data-flattr-tags="{{ page.tags }}"
  data-flattr-button="compact"
  data-flattr-category="text"
  href="{{ site.url }}{{ page.url }}">
  {{ page.content[0,500] }}
</a>
</div>

To make flattr discoverable in your feed by rss reader and podcatcher, a [payment relation link](http://developers.flattr.net/feed/) is needed in your atom feed.

First add this (lengthy) template...

{% raw %}
``` xml source/_includes/flattr_payment_link.xml
<link rel="payment" href="https://flattr.com/submit/auto?url={{ url }}&amp;user_id={{ site.flattr_user | cgi_escape }}&amp;title={{ post.title | cgi_escape }}&amp;category=text{% unless post.categories == empty %}&amp;tags={{ post.categories | join: ', ' | cgi_escape }}{% endunless %}{% if post.description %}&amp;description={{ post.description | cgi_escape }}{% endif %}" type="text/html" />
```
{% endraw %}



... then include it in your feed:

{% raw %}
``` xml source/atom.xml
---
layout: nil
---
<?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>
    {% if site.flattr_user %}{% include flattr_payment_link.xml %}{% endif %}
    <id>{{ site.url }}{{ post.id }}</id>
    <content type="html"><![CDATA[
      {{ post.content | expand_urls: site.url | cdata_escape }}
    ]]></content>
  </entry>
  {% endfor %}
</feed>
```
{% endraw %}

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

Therefor create a new template:

{% raw %}
```xml source/_includes/flattr_feed_button.html
<a href="https://flattr.com/submit/auto?url={{ site.url | cgi_escape }}{{ post.url | cgi_escape }}&amp;user_id={{ site.flattr_user | cgi_escape }}&amp;title={{ post.title | cgi_escape }}&amp;category=text{% unless post.categories == empty %}&amp;tags={{ post.categories | join: ', ' | cgi_escape }}{% endunless %}{% if post.description %}&amp;description={{ post.description | cgi_escape }}{% endif %}">
      <img src="https://api.flattr.com/button/flattr-badge-large.png"
           alt="Flattr this" />
</a>
```
{% 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
---
<?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>
    {% if site.flattr_user %}{% include flattr_payment_link.xml %}{% endif %}
    <id>{{ site.url }}{{ post.id }}</id>
    <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>
```
{% endraw %}

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

Preview:

[{% img left https://api.flattr.com/button/flattr-badge-large.png Alt Flattr this %}](https://flattr.com/submit/auto?url=http%3A%2F%2Fblog.higgsboson.tk%2Fblog%2F2013%2F01%2F20%2Fadd-flattr-to-octopress%2F&amp;user_id=Mic92&amp;title=Add+Flattr+to+Octopress&amp;category=text&amp;tags=feed%2C+flattr%2C+octopress&amp;description=how+to+add+flattr+button+and+flattr+payment+link+to+your+octopress)

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