add flattr to head tag

This commit is contained in:
Jörg Thalheim 2013-01-21 01:18:38 +01:00
parent 3dd76aa869
commit 12c391c840
8 changed files with 90 additions and 29 deletions

View File

@ -7,7 +7,7 @@ title: ~/git/blog
subtitle: hot and spicy
author: Jörg Thalheim
simple_search: http://www.duckduckgo.com/
description: a tech blog about the latest shit
description: a tech blog
# Default date format is "ordinal" (resulting in "July 22nd 2007")
# You can customize the format as defined in

View File

@ -11,4 +11,7 @@
})();
/* ]]> */
</script>
{% include flattr_param.html %}
<link rel="payment" href="https://flattr.com/submit/auto?{{ flattr_param }}" type="text/html" />
{% endif %}

View File

@ -1,4 +1,5 @@
<a href="https://flattr.com/submit/auto?url={{ site.url | cgi_escape }}{{ post.url | cgi_escape }}&amp;user_id={{ site.flattr_user | cgi_escape }}&amp;title={{ post.title | cgi_escape }}&amp;category=text{% unless post.categories == empty %}&amp;tags={{ post.categories | join: ', ' | cgi_escape }}{% endunless %}{% if post.description %}&amp;description={{ post.description | cgi_escape }}{% endif %}">
{% 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"/>
</a>

View File

@ -0,0 +1,14 @@
{% if post %}
{% assign item = post %}
{% else %}
<!-- index or other page -->
{% 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

@ -1 +0,0 @@
<link rel="payment" href="https://flattr.com/submit/auto?url={{ url }}&amp;user_id={{ site.flattr_user | cgi_escape }}&amp;title={{ post.title | cgi_escape }}&amp;category=text{% unless post.categories == empty %}&amp;tags={{ post.categories | join: ', ' | cgi_escape }}{% endunless %}{% if post.description %}&amp;description={{ post.description | cgi_escape }}{% endif %}" type="text/html" />

View File

@ -1,9 +1,9 @@
<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>

View File

@ -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[ */
@ -77,27 +78,37 @@ The result will look like this:
<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>
</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 }}&amp;user_id={{ site.flattr_user | cgi_escape }}&amp;title={{ post.title | cgi_escape }}&amp;category=text{% unless post.categories == empty %}&amp;tags={{ post.categories | join: ', ' | cgi_escape }}{% endunless %}{% if post.description %}&amp;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 }}&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 %}
``` 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,13 +140,37 @@ 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 }}&amp;user_id={{ site.flattr_user | cgi_escape }}&amp;title={{ post.title | cgi_escape }}&amp;category=text{% unless post.categories == empty %}&amp;tags={{ post.categories | join: ', ' | cgi_escape }}{% endunless %}{% if post.description %}&amp;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"/>
</a>
@ -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&amp;user_id=Mic92&amp;title=Add+Flattr+to+Octopress&amp;category=text&amp;tags=feed%2C+flattr%2C+octopress&amp;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.

View File

@ -21,7 +21,10 @@ 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 %}
{% if site.flattr_user %}
{% include flattr_payment_link.html %}
<link rel="payment" href="https://flattr.com/submit/auto?{{ flattr_param }}" type="text/html" />
{% endif %}
<id>{{ site.url }}{{ post.id }}</id>
<content type="html"><![CDATA[
<img src="//piwik.higgsboson.tk/piwik.php?idsite=1&action_name={{post.title | cgi_escape}}" style="border:0" alt="" />