Mic92/blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

move flattr code to external files

Browse Source
This commit is contained in:
Jörg Thalheim 2014-11-01 13:25:14 +01:00
parent 2674164aea
commit 92a5df6e3a
9 changed files with 122 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
source/_posts/2013-01-20-add-flattr-to-octopress.markdown
View File

@ -25,52 +25,15 @@ 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.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>
```
{% endraw %}
{% include_code source/_includes/post/flattr_button.html lang:html flattr/flattr_buttom.html %}
and add the following javascript to your custom head.html
{% 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>
{% endif %}
```
{% endraw %}
{% include_code source/_includes/custom/head.html lang:html flattr/head.html %}
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 %}
{% include_code source/_includes/post/sharing.html lang:html flattr/sharing.html %}
The result will look like this:
@ -90,134 +53,34 @@ To make flattr discoverable by programs (feed reader, podcatcher, browser extens
First add this (lengthy) template...
{% raw %}
``` 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 }}&amp;user_id={{site.flattr_user | cgi_escape }}&amp;title={{ flattr_title | cgi_escape }}&amp;category=text&amp;description={{ flattr_description | truncate: 1000 | cgi_escape }}&amp;tags={{ item.categories | join: "," | cgi_escape }}{% endcapture %}
```
{% endraw %}
{% include_code source/_includes/flattr_param.html lang:html flattr/flattr_param.html %}
... then include it in your feed ...
{% raw %}
``` xml source/atom.xml
---
layout: null
---
<?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>
<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 }}
]]></content>
</entry>
{% endfor %}
</feed>
```
{% endraw %}
{% include_code source/atom.xml lang:xml flattr/atom.xml %}
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 %}
{% 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:
{% raw %}
```html source/_includes/flattr_feed_button.html
{% include flattr_param.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"/>
</a>
```
{% endraw %}
{% 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:
{% raw %}
``` xml source/atom.xml
---
layout: null
---
<?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>
<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 %}
]]></content>
</entry>
{% endfor %}
</feed>
```
{% endraw %}
{% 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 https://api.flattr.com/button/flattr-badge-large.png Alt Flattr this %}](https://flattr.com/submit/auto?{{ flattr_param }})
[{% 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.

25
source/downloads/code/flattr/atom.xml Normal file
View File

@ -0,0 +1,25 @@
---
layout: null
---
<?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>
<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 }}
]]></content>
</entry>
{% endfor %}
</feed>

26
source/downloads/code/flattr/atom2.xml Normal file
View File

@ -0,0 +1,26 @@
---
layout: null
---
<?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>
<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 %}
]]></content>
</entry>
{% endfor %}
</feed>

9
source/downloads/code/flattr/flattr_buttom.html Normal file
View File

@ -0,0 +1,9 @@
<a class="FlattrButton" style="display:none;"
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>

5
source/downloads/code/flattr/flattr_feed_buttom.html Normal file
View File

@ -0,0 +1,5 @@
{% include flattr_param.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"/>
</a>

13
source/downloads/code/flattr/flattr_param.html Normal file
View File

@ -0,0 +1,13 @@
{% 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 }}&amp;user_id={{site.flattr_user | cgi_escape }}&amp;title={{ flattr_title | cgi_escape }}&amp;category=text&amp;description={{ flattr_description | truncate: 1000 | cgi_escape }}&amp;tags={{ item.categories | join: "," | cgi_escape }}{% endcapture %}

13
source/downloads/code/flattr/head.html Normal file
View File

@ -0,0 +1,13 @@
{% 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 %}

16
source/downloads/code/flattr/head2.html Normal file
View File

@ -0,0 +1,16 @@
{% 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 %}

6
source/downloads/code/flattr/sharing.html Normal file
View File

@ -0,0 +1,6 @@
<div class="share">
{% if site.flattr_user %}
{% include post/flattr_button.html %}
{% endif %}
...
</div>