thumb

Flattr це безкоштовний і простий спосіб заробити гроші з блогу. Як ви можете бачити мій Jekyll веб-сайт розміщений в Github використовується в основному як блог. Розмістивши маленьку кнопку Flattr в кінці кожного поста в блозі, трохи вище розділу коментарів, Я можу бути впевненим в тому, що відвідувачі мого блогу мають можливість подякувати мене за статтю. У цій статті Я покажу вам, як легко використовувати Flattr, щоб показати кнопку «Дякую» в Jekyll.

Далі покрокова інструкція про те, як це зробити.

Реєстрація.

По-перше тобі потрібен аккаунт Flattr. Зареєструйся в Flattr використовуючи наступне посилання: Flattr

Створення шаблону з Flattr Loader script.

Створи файл з ім’ям flattr-script.html в _includes каталозі твого Jekyll веб-сайту. Вставте наступне вміст в цей файл:

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

Це повністю готовий до використання код. Для отримання додаткової інформації дивись Embedded buttons на сторінці документації Flattr.

Створення шаблону з кнопкою Flattr.

Створи файл з ім’ям flattr-button.html в _includes каталозі твого Jekyll веб-сайту. Вставте наступне вміст в цей файл:


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

Примітка: Опція style="display:none;" потрібна для того, щоб уникнути показу кнопки під час завантаження сторінки.

Примітка: Заміни YOUR-USER-NAME на твоє власне ім’я з облікового запису Fllatr.

Примітка: Мінлива data-flattr-category може бути встановлена в будь-яку з доступних категорій: text, images, video, audio, software, people, rest.

Примітка: Так як пости на моєму блозі доступні на двох мовах (англійською та російською) то Я встановив динамічний атрибут мови. Якщо пости на твоєму Jekyll веб-сайті написані тільки на одній мові то заміни {{ page.lang }} кодом актуального для вас мови. Всі доступні коди мов можеш знайти тут.

Примітка: Виріши яку кнопку ти хочеш використовувати - компактну або класичну. Щоб переключитися на класичну, все що тобі потрібно це повністю видалити рядокdata-flattr-button="compact".

Примітка: Переконайся, що ти встановив page.excerpt через “Front Matter” у верхній частині твого поста. Дивись наступний приклад:

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

Виклик шаблону flattr-script з основного шаблону блогу.

Перейди в каталог _layouts, знайди файл default.html і встав наступний код прямо перед тегом </head>:

{% include flattr-script.html %}

Завдяки цьому шаблон flattr-script буде додано до кожної сторінки твого веб-сайту.

Примітка: Деякі теми мають відокремлений файл з head секцією (<head></head> теги). Цей файл може називатися наприклад head.html і розташовуватися в каталозі _includes.

Виклик шаблону flattr-button з шаблону поста.

Перейди в каталог _layouts і знайди файл post.html (або будь-який інший файл макета в який ти хочеш вбудувати кнопку Flattr) і встав наступний код:

{% include flattr-button.html %}

Я розмістив цей код відразу після {{ content }}, але місце розміщення повністю залежить від тебе. У моєму випадку копка Flattr буде показуватися в кінці кожного поста в блозі, трохи вище секції з коментарями.

Висновок

Якщо все зроблено правильно, то кнопка Flattr повинна з’явиться на сторінках які активовані після наступної генерації сторінок. Тепер кнопка Flattr буде автоматично додаватися до всіх постів з коротким змістом на Flattr сторінці твоїх “thing”.

Підтримка браузерами

Кнопки повинні підтримувати всі сучасні браузери, такі як останні версії Firefox, Safari, Chrome а також Internet Explorer 8 і новіше. У старих браузерах, таких як Internet Explorer 7 - кнопки просто не будуть показуватися.

Якщо ця стаття допомогла вам, будь ласка, залиште коментар :smiley:

Дякую за прочитання!