diff --git a/source/_includes/flattr_feed_button.html b/source/_includes/flattr_feed_button.html new file mode 100644 index 0000000..be1e626 --- /dev/null +++ b/source/_includes/flattr_feed_button.html @@ -0,0 +1,4 @@ + + Flattr this + diff --git a/source/_includes/flattr_payment_link.html b/source/_includes/flattr_payment_link.html deleted file mode 100644 index 4d2902f..0000000 --- a/source/_includes/flattr_payment_link.html +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/source/_includes/flattr_payment_link.xml b/source/_includes/flattr_payment_link.xml new file mode 100644 index 0000000..0600155 --- /dev/null +++ b/source/_includes/flattr_payment_link.xml @@ -0,0 +1 @@ + diff --git a/source/_includes/post/sharing.html b/source/_includes/post/sharing.html index c7bd480..779bdbe 100644 --- a/source/_includes/post/sharing.html +++ b/source/_includes/post/sharing.html @@ -2,17 +2,17 @@ {% if site.flattr_user %} {% include post/flattr_button.html %} {% endif %} +
{% if site.facebook_like %} - {% endif %} + {% endif %} {% if site.twitter_tweet_button %} {% endif %} {% if site.google_plus_one %} {% endif %} -
diff --git a/source/_posts/2013-01-20-add-flattr-to-octopress.markdown b/source/_posts/2013-01-20-add-flattr-to-octopress.markdown new file mode 100644 index 0000000..b7c6a21 --- /dev/null +++ b/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 + +``` +{% 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 %} + + {% endif %} +``` +{% endraw %} + +Now include it in your sharing template: + +{% raw %} +``` html source/_includes/post/sharing.html +
+ {% if site.flattr_user %} + {% include post/flattr_button.html %} + {% endif %} + ... +
+``` +{% endraw %} + +The result will look like this: + +
+ +
+ +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 + +``` +{% endraw %} + + + +... then include it in your feed: + +{% raw %} +``` xml source/atom.xml +--- +layout: nil +--- + + + <![CDATA[{{ site.title }}]]> + + ... + + {% for post in site.posts limit: 20 %} + + <![CDATA[{{ post.title | cdata_escape }}]]> + + {{ post.date | date_to_xmlschema }} + {% if site.flattr_user %}{% include flattr_payment_link.xml %}{% endif %} + {{ site.url }}{{ post.id }} + + + {% endfor %} + +``` +{% 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 + + Flattr this + +``` +{% 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 +--- + + + <![CDATA[{{ site.title }}]]> + + ... + + {% for post in site.posts limit: 20 %} + + <![CDATA[{{ post.title | cdata_escape }}]]> + + {{ post.date | date_to_xmlschema }} + {% if site.flattr_user %}{% include flattr_payment_link.xml %}{% endif %} + {{ site.url }}{{ post.id }} + + + {% endfor %} + +``` +{% 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&user_id=Mic92&title=Add+Flattr+to+Octopress&category=text&tags=feed%2C+flattr%2C+octopress&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. diff --git a/source/atom.xml b/source/atom.xml index e9e386c..b30fe74 100644 --- a/source/atom.xml +++ b/source/atom.xml @@ -21,11 +21,12 @@ layout: nil <![CDATA[{{ post.title | cdata_escape }}]]> {{ post.date | date_to_xmlschema }} - {% if site.flattr_user %}{% include flattr_payment_link.html %}{% endif %} + {% if site.flattr_user %}{% include flattr_payment_link.xml %}{% endif %} {{ site.url }}{{ post.id }} {{ post.content | expand_urls: site.url | cdata_escape }} + {% if site.flattr_user %} {% include flattr_feed_button.html %} {% endif %} ]]> {% endfor %}