blog/source/_posts/2013-01-20-add-flattr-to-octopress.markdown

layout	title	date	comments	description	published	categories
post	Add Flattr to Octopress	2013-01-20 11:35	true	how to add flattr button and flattr payment link to your octopress	yes	flattr octopress feed

Update add payment relation to header, thanks to @voxpelli

In this article I will show how to add {% img left https://flattr.com/_img/icons/flattr_logo_16.png 14 14 %}Flattr to your {% img left /favicon.png 14 14 %} octopress blog and feed.

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

# Flattr
flattr_user: YourFlattrName

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

{% include_code source/_includes/post/flattr_button.html lang:html flattr/flattr_buttom.html %}

and add the following javascript to your custom head.html

{% include_code source/_includes/custom/head.html lang:html flattr/head.html %}

Now include it in your sharing template:

{% include_code source/_includes/post/sharing.html lang:html flattr/sharing.html %}

The result will look like this:

{% if page.description %}{{ page.description }}{% else %}{{page.content | truncate: 500}}{% endif %}

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

{% include_code source/_includes/flattr_param.html lang:html flattr/flattr_param.html %}

... then include it in your feed ...

{% include_code source/atom.xml lang:xml flattr/atom.xml %}

and in your head template:

{% include_code source/_includes/custom/head.html lang:html flattr/head2.html %}

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

Therefor create a new template:

{% include_code source/_includes/flattr_feed_button.html lang:html flattr/flattr_feed_buttom.html %}

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:

{% include_code source/atom.xml lang:xml flattr/atom2.xml %}

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

Preview:

{% include flattr_param.html %} [{% img left //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.