move flattr code to external files

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

View File

@ -25,52 +25,15 @@ flattr_user: YourFlattrName
``` ```
To add a flattr button to the sharing section of your posts, add this template: To add a flattr button to the sharing section of your posts, add this template:
{% raw %} {% include_code source/_includes/post/flattr_button.html lang:html flattr/flattr_buttom.html %}
``` 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 %}
and add the following javascript to your custom head.html and add the following javascript to your custom head.html
{% raw %} {% include_code source/_includes/custom/head.html lang:html flattr/head.html %}
``` 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 %}
Now include it in your sharing template: Now include it in your sharing template:
{% raw %} {% include_code source/_includes/post/sharing.html lang:html flattr/sharing.html %}
``` html source/_includes/post/sharing.html
<div class="share">
{% if site.flattr_user %}
{% include post/flattr_button.html %}
{% endif %}
...
</div>
```
{% endraw %}
The result will look like this: 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... First add this (lengthy) template...
{% raw %} {% include_code source/_includes/flattr_param.html lang:html flattr/flattr_param.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 }}&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 %}
... then include it in your feed ... ... then include it in your feed ...
{% raw %} {% include_code source/atom.xml lang:xml flattr/atom.xml %}
``` 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 %}
and in your head template: and in your head template:
{% raw %} {% include_code source/_includes/custom/head.html lang:html flattr/head2.html %}
``` 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. Because not (yet) all feed reader support this feature, you can add a dedicated flattr link.
Therefor create a new template: Therefor create a new template:
{% raw %} {% include_code source/_includes/flattr_feed_button.html lang:html flattr/flattr_feed_buttom.html %}
```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 %}
Compared to the other button, this one will not require javascript, which isn't Compared to the other button, this one will not require javascript, which isn't
always available in feed readers. always available in feed readers.
Finally add it your feed template: Finally add it your feed template:
{% raw %} {% include_code source/atom.xml lang:xml flattr/atom2.xml %}
``` 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 %}
This will add a flattr button to each entry in your feed. This will add a flattr button to each entry in your feed.
Preview: Preview:
{% include flattr_param.html %} {% 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. That's all folks! I hope you will become rich by your flattr income.

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>

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>

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>

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>

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 %}

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 %}

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 %}

View File

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