Integrate Flatr button to Jekyll website
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 namedhead.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
Thanks for reading!
Arthur is a designer and full stack software engineer. He is the founder of Space X-Chimp and the blog My Cyber Universe. His personal website can be found at arthurgareginyan.com.