Easy flattr integration for octopress

As you can see at the date below, this post is quite old, but was not published until now. Perhaps someone can still use it..

Today Manu spend about five minutes to hook me up on Octopress. After playing around with it for some time I did a quick search for some plugins. I couldn’t locate a flattr plugin so I had to fire up vim.

After trying to build a jekyll plugin at first, I think I found an easy solution when you want to include a flattr button on per post basis.

Let’s dive right in..

At first consult http://developers.flattr.net/button/ to get the flattr script loader in its freshest version and put it inside the custom head html file.

source/_includes/custom/head.html

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

Let’s use a simple option to activate a flattr button for a specific post.

The yaml head for this post

---
layout: post
title: "Easy flattr integration for octopress"
date: 2012-01-03 22:05
comments: true
categories: octopress, ruby, liquidtags, flattr
flattr: true
---

Now we need a query to check the flattr setting within each post and display it where applicable.

source/_layouts/post.html

...
<p class="meta">
      {% include post/author.html %}
      {% include post/date.html %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}
      {% include post/categories.html %}

      {% if page.flattr == true %}
      <div class="flattr" style="float: right; margin-top: -1.75em;"><a class="FlattrButton" style="display:none;" title="{{ @page.title }}" data-flattr-uid="{{ @site.flattr_user }}" data-flattr-button="{{ @site.flattr_button }}" data-flattr-tags="{{ @page.categories | join:',' }}" data-flattr-category="rest" data-flattr-lang="{{ @site.flattr_lang }}" href="{{ @site.url }}{{ @page.url }}"></a></div> 
      {% endif %}
</p>
...

I wanted the button on the right side of the meta section at the bottom of a post, so it would only show up when a single post is displayed.

Feel free to to find a different spot for the snippet, you just have to copy/paste the {% if page.flattr == true %}..{% endif %} block to any place you desire. If you want the button not aligned to the right delete style="float: right; margin-top: -1.75em" from the div tag. I have to admit the margin-top style is a crude hack..

Beware: This file could change with every octopress update. I havn’t found a suitable place for the code within the source/_includes/custom/ files for my needs. So, check after each update if the button code is still there.

Finally we need new settings:

_config.yml

...
# Flattr
flattr_user: your_flattr_username
flattr_lang: en_GB
flattr_button: compact

The three values should be pretty self-explanatory:

• your Flattr Username
• the language you are going to use for your posts (see flattr help for more information)
• the style of the flattr button - at the time of writing you can choose between compact and default

When everything went well, the flattr button should show up with the next page generation on activated posts.