How to add a Flattr button on every tumblr post

When I first started using Flattr (If you don’t know about Flattr yet, check it out! It’s pretty cool), I wanted an easy way to add Flattr buttons to my tumblog posts. I found this blog post that explained how to do it. This worked great for awhile, but recently my buttons recently stopped working and were just displaying “Error”. On investigation, I discovered that it only occured (for whatever reason) on posts which hadn’t yet been flattr’d.

I found that if I upgraded the button HTML to the HTML 5 version, they started working again. I also took the time to make several upgrades to the button HTML. The buttons now:

  • Use the title of each post as the Flattr title (this will be empty if you don’t set a title on your post, so make sure to always set a title!)
  • Submit the tags of the post as the tags for the Flattr “thing”
  • Intelligently use a meaningful description based on the post type.

To do this on your own blog, the changes are quite minimal. First, you need to change your doctype to HTML 5. That usually means changing the first line or two of HTML to this:

<!DOCTYPE html>

Next, as before, you need to add Flattr’s JavaScript code just before your closing </head> tag (note, if you have already done this, don’t do it again!):

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

Finally, and this requires some basic HTML knowledge, you need to find the title section for your posts and add the following HTML:

<div class="flattr">
    <a class="FlattrButton" style="display:none;"
        title="{Title}"
        data-flattr-uid ="<your-flattr-id>"
        data-flattr-tags="blog post{block:Tags},{Tag}{/block:Tags}"
        data-flattr-category="text"
        data-flattr-button="compact"
        data-flattr-lang="<your-lang-code>"
        href="{Permalink}">
        {block:Text}{PlaintextBody}{/block:Text}
        {block:Photo}Photo: {PlaintextCaption}{/block:Photo}
        {block:Photoset}
            Photo set ({PhotoCount}){block:Caption}:
                {PlaintextCaption}{/block:Caption}
        {/block:Photoset}
        {block:Quote}
            {PlaintextQuote} - {PlaintextSource}
        {/block:Quote}
        {block:Link}
            {PlaintextName}{block:Description}: 
                {Description}{/block:Description}
        {/block:Link}
        {block:Chat}
            {block:Lines}
                {PlaintextName}: {PlaintextLine}
            {/block:Lines}
        {/block:Chat}
        {block:Audio}
            Audio{block:Caption}: {PlaintextCaption}{/block:Caption}
        {/block:Audio}
        {block:Video}
            Video{block:Caption}: {PlaintextCaption}{/block:Caption}
        {/block:Video}
        {block:Answer}
            Question: {PlaintextQuestion} 
            Answer: {PlaintextAnswer}
        {/block:Answer}
    </a>
</div>

and replace <your-flattr-id> with your Flattr ID and <your-lang-code> with the code for your language. The button will appear wherever you place this HTML. You might be wondering if using HTML5 is going to kill support for a lot of browsers. Never fear, only IE <= 7 will have trouble viewing the buttons (the rest of the post will display fine, they simply won’t see a button) and that is most likely a very small percentage of your visitors (2.8% for me), unless you are writing a blog about IE7. ;) Another thing to consider is that this will future-proof your code, since HTML 5 is going to be around for a looong time.

That’s it! Enjoy Flattr buttons on every blog post. Feel free to click the button on this post if it helped you. ;)