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

87 lines
2.8 KiB
Markdown
Raw Normal View History

2013-01-20 16:55:35 +00:00
---
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
---
2013-01-21 00:18:38 +00:00
**Update** add payment relation to header, thanks to [@voxpelli](https://twitter.com/voxpelli)
2013-01-20 16:55:35 +00:00
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:
2014-11-01 12:25:14 +00:00
{% include_code source/_includes/post/flattr_button.html lang:html flattr/flattr_buttom.html %}
2013-01-20 16:55:35 +00:00
and add the following javascript to your custom head.html
2014-11-01 12:25:14 +00:00
{% include_code source/_includes/custom/head.html lang:html flattr/head.html %}
2013-01-20 16:55:35 +00:00
Now include it in your sharing template:
2014-11-01 12:25:14 +00:00
{% include_code source/_includes/post/sharing.html lang:html flattr/sharing.html %}
2013-01-20 16:55:35 +00:00
The result will look like this:
<div>
<a class="FlattrButton" style="display:none;"
2013-01-21 00:18:38 +00:00
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 %}
2013-01-20 16:55:35 +00:00
</a>
</div>
2013-01-21 00:18:38 +00:00
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.
2013-01-20 16:55:35 +00:00
First add this (lengthy) template...
2014-11-01 12:25:14 +00:00
{% include_code source/_includes/flattr_param.html lang:html flattr/flattr_param.html %}
2013-01-20 16:55:35 +00:00
2013-01-21 00:18:38 +00:00
... then include it in your feed ...
2013-01-20 16:55:35 +00:00
2014-11-01 12:25:14 +00:00
{% include_code source/atom.xml lang:xml flattr/atom.xml %}
2013-01-20 16:55:35 +00:00
2013-01-21 00:18:38 +00:00
and in your head template:
2014-11-01 12:25:14 +00:00
{% include_code source/_includes/custom/head.html lang:html flattr/head2.html %}
2013-01-21 00:18:38 +00:00
2013-01-20 16:55:35 +00:00
Because not (yet) all feed reader support this feature, you can add a dedicated flattr link.
Therefor create a new template:
2014-11-01 12:25:14 +00:00
{% include_code source/_includes/flattr_feed_button.html lang:html flattr/flattr_feed_buttom.html %}
2013-01-20 16:55:35 +00:00
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:
2014-11-01 12:25:14 +00:00
{% include_code source/atom.xml lang:xml flattr/atom2.xml %}
2013-01-20 16:55:35 +00:00
This will add a flattr button to each entry in your feed.
Preview:
2013-01-21 06:46:02 +00:00
{% include flattr_param.html %}
2014-11-01 12:25:14 +00:00
[{% img left //api.flattr.com/button/flattr-badge-large.png Alt Flattr this %}](https://flattr.com/submit/auto?{{ flattr_param }})
2013-01-20 16:55:35 +00:00
That's all folks! I hope you will become rich by your flattr income.