5.7 KiB
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 |
|
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:
{% raw %}
<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 %}
{% 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 %}
<div class="share">
{% if site.flattr_user %}
{% include post/flattr_button.html %}
{% endif %}
...
</div>
{% endraw %}
The result will look like this:
To make flattr discoverable in your feed by rss reader and podcatcher, a payment relation link is needed in your atom feed.
First add this (lengthy) template...
{% raw %}
<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" />
{% endraw %}
... then include it in your feed:
{% raw %}
---
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 %}
<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 %}">
<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 %}
---
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 %}
That's all folks! I hope you will become rich by your flattr income.