add flattr to octopress

source/_includes/flattr_feed_button.html

@@ -0,0 +1,4 @@
+<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 %}">
+      <img src="https://api.flattr.com/button/flattr-badge-large.png"
+           alt="Flattr this" />
+</a>

source/_includes/flattr_payment_link.html

@@ -1,7 +0,0 @@
-<link rel="payment" 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 %}" type="text/html" />

source/_includes/flattr_payment_link.xml

@@ -0,0 +1 @@
+<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" />

source/_includes/post/sharing.html

@@ -2,6 +2,7 @@
     {% if site.flattr_user %}
     {% include post/flattr_button.html %}
     {% endif %}
+
 	<div class="addthis_toolbox addthis_default_style ">
 	{% if site.facebook_like %}
 	<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
@@ -12,7 +13,6 @@
     {% if site.google_plus_one %}
 	<a class="addthis_button_google_plusone" g:plusone:size="{{ site.google_plus_one_size }}"></a>
     {% endif %}
-	<a class="addthis_counter addthis_pill_style"></a>
 	</div>
   <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid={{ site.addthis_profile_id }}"></script>
 </div>

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

@@ -0,0 +1,181 @@
+---
+layout: post
+title: "Add Flattr to Octopress"
+date: 2013-01-20 11:35
+comments: true
+description: "how to add flattr button and flattr payment link to your octopress"
+published: yes
+categories:
+- flattr
+- octopress
+- feed
+---
+
+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.
+
+First of all add your flattr user name (also known as user id) to the
+configuration:
+
+```yaml _config.yml
+# Flattr
+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.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 %}
+``` html source/_includes/custom/head.html
+ {% 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 %}
+``` 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:
+
+<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] }}
+</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.
+
+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" />
+```
+{% endraw %}
+
+
+
+... then include it in your feed:
+
+{% raw %}
+``` xml source/atom.xml
+---
+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 %}
+```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 %}">
+      <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 %}
+``` xml source/atom.xml
+---
+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 %}](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)
+
+That's all folks! I hope you will become rich by your flattr income.

source/atom.xml

@@ -21,11 +21,12 @@ 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.html %}{% endif %}
+    {% if site.flattr_user %}{% include flattr_payment_link.xml %}{% 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="" />
       {{ post.content | expand_urls: site.url | cdata_escape }}
+      {% if site.flattr_user %} {% include flattr_feed_button.html %} {% endif %}
     ]]></content>
   </entry>
   {% endfor %}