thumb

Flattr is a free and easy way to earn money from blog posts. My Github hosted Jekyll website is being used primarily as a blog as you can see. By placing a small Flattr button at the end of each blog post, just above the comments section, I can ensure that visitors of my blog have an opportunity to thank me for the article. In this article, I will show you how to easily use Flattr to show “Thanks” button in Jekyll.

Getting started

Now, step by step guide on how I did it.

Sign up for Flattr

First of all, you need a Flattr account. Sign up for Flattr using the following link: Flattr

Create the template with Flattr Loader script

Create a file called flattr-script.html in the _includes catalog of your Jekyll website. Insert the following content into that file:

<script type="text/javascript">
    /* <![CDATA[ */
    (function() {
        var s = document.createElement('script');
        var t = document.getElementsByTagName('script')[0];

        s.type = 'text/javascript';
        s.async = true;
        s.src = '//api.flattr.com/js/0.6/load.js?'+
                    'mode=auto' +
                    '&html5-key-prefix=data-flattr';

        t.parentNode.insertBefore(s, t);
    })();
    /* ]]> */
</script>

This is a ready to use code. For further information see Embedded buttons on the Flattr docs.

Create the template with Flattr button

Create a file called flattr-button.html in the _includes catalog of your Jekyll website. Insert the following content into that file:


<a class="FlattrButton" style="display:none;"
    title="{{ page.title }}"
    data-flattr-uid="YOUR-USER-NAME"
    data-flattr-tags="{{ page.tags }}"
    data-flattr-category="text"
    data-flattr-language="{{ page.lang }}"
    data-flattr-button="compact"
    href="{{ site.url }}{{ page.url }}">
    {{ page.excerpt }}
</a>

Note: The style="display:none;" option needed to avoid that the embedded button definition is shown while the page is loading.

Note: Replace the YOUR-USER-NAME with your own user name from your Fllatr account.

Note: The data-flattr-category variable can be set to any of the available categories: text, images, video, audio, software, people, rest.

Note: Since my blog supports both english and russian posts so I define a dynemic language attribute. If your Jekyll-website is written in one language only then replace the {{ page.lang }} with your actual language code. All available language codes you can find here.

Note: Decide which button you want to use – compact or classic. To switch to classic, all you need to do is deleting the data-flattr-button="compact" line completely.

Note: Make sure you’ve set page.excerpt via “Front Matter” on top of your posting. See the following example:

---
layout: post
lang: en_EN
title:  "This is the first post on my blog"
date: 2016-07-04 17:49:00
category: blogging
tags: "post, jekyll, blogging"
excerpt: "Teaser text ..."
---

Call the flattr-script template from a default template

Go into the _layouts catalog, find the default.html file and insert the following code right before the </head> tag:

{% include flattr-script.html %}

This will ensure that the flattr-script template will be added to every page of your website.

Note: Some themes have a separated file with head section (<head></head> tags). This file can be named head.html and be placed in the _includes catalog.

Call the flattr-button template from a post template

Go into the _layouts catalog, find the post.html file (or any layout file for which you would like Flattr button displayed) and insert the following code:

{% include flattr-button.html %}

I place this right after the {{ content }}, but the placements is totally up to you. In my case a Flattr button will be displayed at the end of each blog post, just above the comments section.

Browser support

The buttons should support all modern browsers like the latest version of Firefox, Safari and Chrome and also Internet Explorer 8 and newer. It will degrade nicely in older browsers like Internet Explorer 7 – it will just not show.

Conclusion

When everything went well, the Flattr button should show up with the next page generation on activated posts. Now you’ve got Flattr button automatically add to all your post with the page excerpt on the Flattr page of your “thing”.

If this article has helped you then please leave a comment :smiley:

Thanks for reading!