Інтеграція кнопки Flatr в веб-сайт на Jekyll
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 - кнопки просто не будуть показуватися.
Якщо ця стаття допомогла вам, будь ласка, залиште коментар
Дякую за прочитання!
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.