|
|
|
@ -11,6 +11,8 @@ categories:
|
|
|
|
|
- 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.
|
|
|
|
|
|
|
|
|
@ -28,11 +30,11 @@ To add a flattr button to the sharing section of your posts, add this template:
|
|
|
|
|
<a class="FlattrButton" style="display:none;"
|
|
|
|
|
title="{{ page.title }}"
|
|
|
|
|
data-flattr-uid="{{ site.flattr_user }}"
|
|
|
|
|
data-flattr-tags="{{ page.tags }}"
|
|
|
|
|
data-flattr-tags="{{ page.categories | join: "," }}"
|
|
|
|
|
data-flattr-button="compact"
|
|
|
|
|
data-flattr-category="text"
|
|
|
|
|
href="{{ site.url }}{{ page.url }}">
|
|
|
|
|
{{ page.content[0,500] }}
|
|
|
|
|
{% if page.description %}{{ page.description }}{% else %}{{page.content | truncate: 500}}{% endif %}
|
|
|
|
|
</a>
|
|
|
|
|
```
|
|
|
|
|
{% endraw %}
|
|
|
|
@ -41,7 +43,6 @@ 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[ */
|
|
|
|
@ -75,29 +76,39 @@ 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] }}
|
|
|
|
|
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>
|
|
|
|
|
</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.
|
|
|
|
|
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 %}
|
|
|
|
|
``` xml source/_includes/flattr_payment_link.xml
|
|
|
|
|
<link rel="payment" href="https://flattr.com/submit/auto?url={{ url }}&user_id={{ site.flattr_user | cgi_escape }}&title={{ post.title | cgi_escape }}&category=text{% unless post.categories == empty %}&tags={{ post.categories | join: ', ' | cgi_escape }}{% endunless %}{% if post.description %}&description={{ post.description | cgi_escape }}{% endif %}" type="text/html" />
|
|
|
|
|
``` 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:
|
|
|
|
|
... then include it in your feed ...
|
|
|
|
|
|
|
|
|
|
{% raw %}
|
|
|
|
|
``` xml source/atom.xml
|
|
|
|
@ -115,8 +126,11 @@ layout: nil
|
|
|
|
|
<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>
|
|
|
|
|
{% if site.flattr_user %}
|
|
|
|
|
{% include flattr_payment_link.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>
|
|
|
|
@ -126,15 +140,39 @@ layout: nil
|
|
|
|
|
```
|
|
|
|
|
{% endraw %}
|
|
|
|
|
|
|
|
|
|
and in your head template:
|
|
|
|
|
|
|
|
|
|
{% raw %}
|
|
|
|
|
``` html source/_includes/custom/head.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>
|
|
|
|
|
|
|
|
|
|
{% include flattr_param.html %}
|
|
|
|
|
<link rel="payment" href="https://flattr.com/submit/auto?{{ flattr_param }}" type="text/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 %}
|
|
|
|
|
```xml source/_includes/flattr_feed_button.html
|
|
|
|
|
<a href="https://flattr.com/submit/auto?url={{ site.url | cgi_escape }}{{ post.url | cgi_escape }}&user_id={{ site.flattr_user | cgi_escape }}&title={{ post.title | cgi_escape }}&category=text{% unless post.categories == empty %}&tags={{ post.categories | join: ', ' | cgi_escape }}{% endunless %}{% if post.description %}&description={{ post.description | cgi_escape }}{% endif %}">
|
|
|
|
|
```html source/_includes/flattr_feed_button.html
|
|
|
|
|
{% include flattr_payment_link.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" />
|
|
|
|
|
alt="Flattr this"/>
|
|
|
|
|
</a>
|
|
|
|
|
```
|
|
|
|
|
{% endraw %}
|
|
|
|
@ -160,8 +198,11 @@ layout: nil
|
|
|
|
|
<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>
|
|
|
|
|
{% 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 %}
|
|
|
|
@ -176,6 +217,6 @@ 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&user_id=Mic92&title=Add+Flattr+to+Octopress&category=text&tags=feed%2C+flattr%2C+octopress&description=how+to+add+flattr+button+and+flattr+payment+link+to+your+octopress)
|
|
|
|
|
[{% 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.
|
|
|
|
|