Сегодня расскажем как добавить кнопку для сбора пожертвований (донатов) к блогу или сайту.
Зачем блогеру нужна кнопка "Поддержать"
Ведение блога — это не только творчество, но и регулярные усилия: подбор тем, написание, редактирование, поддержка сайта. Монетизация через рекламу не всегда подходит, а донаты позволяют читателю напрямую выразить благодарность. Даже небольшие суммы помогают автору продолжать развивать проект.
Выбор сервиса для сбора пожертвований
Существует множество сервисов, которые позволяют собрать пожертвования (донаты) с пользователей:
Быстрый поиск в интернете выдал следующие результаты:
- BuyMeACoffee - на первый взгляд - то что нужно, но находится за рубежом и не обслуживает клиентов из РФ;
- Ko-fi - аналогично BuyMeACoffee, но ещё говорят и кидает на деньги если ты из РФ;
- Coindrop - интересный open-source сервис, но как мне показалось больше подходит для крипты;
- ЮKassa - всё хорошо, я им даже пользовался в "У нас праздник", но не работает с физ. лицами;
- ЮMoney - та же ЮKassa, но вид сбоку;
- CloudTips - сервис для чаевых и донатов от Т-банка, предназначен именно для физиков и безвозмездных пожертвований.
| Сервис | Комиссия | Платежные методы | Особенности |
|---|---|---|---|
| BuyMeACoffee | ~5% | Карты, Apple Pay, PayPal | Простая настройка, англ. интерфейс |
| Ko-fi | 0% (в free), 5% (Gold) | PayPal | Простой виджет, поддержка целей |
| CloudTips | 5% | Карты РФ | Подходит для российских блогеров |
| Donorbox | 0–1.5% + Stripe/PayPal | Stripe, PayPal | Много кастомизации, подписки |
| ЮMoney/ЮKassa | 3–6% | Карты, СБП | Легальная интеграция в РФ |
В итоге я решил создать себе страницу на CloudTips.
Как выглядит "правильная" кнопка доната (требования к кнопке)
Советы по оформлению:
- Цвет — контрастный, выделяющийся на фоне сайта
- Надпись — короткая и мотивирующая:
Поддержать,Купить кофе,Помочь блогу - Размер — не слишком маленький, кнопка должна быть заметной
- Положение — в шапке, футере и внутри постов
Пример кнопки:
<a
href="https://www.buymeacoffee.com/yourname"
target="_blank"
rel="noopener noreferrer"
class="donate-button"
>
☕ Поддержать
</a>Стилизуем через CSS:
.donate-button {
background-color: #ffdd00;
color: #000;
padding: 0.6em 1em;
font-weight: bold;
border-radius: 8px;
text-decoration: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.donate-button:hover {
transform: scale(1.05);
}Где размещать кнопку
- В шапке сайта — рядом с навигацией;
- В конце каждого поста — после текста;
- В сайдбаре (если есть);
- В футере — для постоянного доступа;
- Плавающая кнопка (например, снизу справа);
Продвинутые приёмы
- QR-код для доната — удобно если вас читают с десктопа, а платить будут с мобильного;
- Inline‑форма — некоторые сервисы позволяют вставлять форму прямо в пост;
- Цели/прогресс — показывайте цель сбора и текущий прогресс (мотивация!);
Интеграция в соцсетях
- Telegram: закрепите ссылку в описании канала
- YouTube: добавьте кнопку в описание профиля
Частые вопросы
Нужно ли платить налоги?
Всё сложно, но на практике часто проще заплатить налог, чем потом объяснять и доказывать банку и налоговой что ты не верблюд.
Какой сервис выбрать?
Для международной аудитории — BuyMeACoffee или Donorbox. Для РФ — CloudTips или ЮMoney.
Люди не донатят, что делать?
Добавьте личный призыв, расскажите, зачем поддержка важна, дайте стимул: «донаты помогут выпустить книгу».
Кнопка доната — это не про навязчивость, а про возможность поддержать полезный контент. Сделайте её видимой, дружелюбной и понятной — и она начнёт работать.
P.S. Моя реализации кнопки для донатов на react
Компонент DonateButton
import classNames from "classnames";
import React from "react";
import { FaHeart } from "react-icons/fa";
import styles from "./DonateButton.module.css";
const DONATION_LINK = "https://pay.cloudtips.ru/p/7d0e9b9f";
const DonateButton: React.FC = () => {
return (
<a
href={DONATION_LINK}
rel="noreferrer"
target="_blank"
className={classNames(
"bg-red-600 rounded-md p-2 text-white flex flex-row gap-2 justify-center items-center text-xl",
styles.wrap
)}
>
<FaHeart size={20} className={styles.heart} />
<span>Отправить донат</span>
</a>
);
};
export default DonateButton;Стили для компонента
.wrap {
animation: glow 800ms ease-out infinite alternate;
border-color: rgb(153, 51, 51);
box-shadow:
0 0 5px rgba(255, 0, 0, 0.2),
inset 0 0 5px rgba(255, 0, 0, 0.1);
color: rgb(255, 238, 238);
outline: none;
}
@keyframes glow {
0% {
border-color: rgb(153, 51, 51);
box-shadow:
0 0 5px rgba(255, 0, 0, 0.2),
inset 0 0 5px rgba(255, 0, 0, 0.1);
}
100% {
border-color: rgb(255, 102, 102);
box-shadow:
0 0 20px rgba(255, 0, 0, 0.6),
inset 0 0 10px rgba(255, 0, 0, 0.4);
}
}
.heart {
animation: heartbeat 0.9s linear infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1.05);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}На этом всё! 🎉
