Добавляем кнопку для сбора пожертвований (донатов) к блогу

Сегодня расскажу как я добавлял кнопку для сбора пожертвований (донатов) к блогу.

Ведение блога — это не только творчество, но и регулярные усилия: подбор тем, написание, редактирование, поддержка сайта. Монетизация через рекламу не всегда подходит, а донаты позволяют читателю напрямую выразить благодарность. Даже небольшие суммы помогают автору продолжать развивать проект.

ℹ️ По данным [Patreon], регулярная поддержка позволяет авторам увеличивать доход в среднем на 25–40 % ежемесячно.

Существует множество сервисов, которые позволяют собрать пожертвования (донаты) с пользователей:

Быстрый поиск в интернете выдал следующие результаты:

• BuyMeACoffee - на первый взгляд - то что нужно, но находится за рубежом и не обслуживает клиентов из РФ;
• Ko-fi - аналогично BuyMeACoffee, но ещё говорят и кидает на деньги если ты из РФ;
• Coindrop - интересный open-source сервис, но как мне показалось больше подходит для крипты;
• ЮKassa - всё хорошо, я им даже пользовался в "У нас праздник", но не работает с физ. лицами;
• ЮMoney - та же ЮKassa, но вид сбоку;
• CloudTips - сервис для чаевых и донатов от Т-банка, предназначен именно для физиков и безвозмездных пожертвований.

⚠️ Перед выбором уточните юридические нюансы и условия вывода средств.

В итоге я решил создать себе страницу на 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.

❓ Люди не донатят, что делать?

Добавьте личный призыв, расскажите, зачем поддержка важна, дайте стимул: «донаты помогут выпустить книгу».

Кнопка доната — это не про навязчивость, а про возможность поддержать полезный контент. Сделайте её видимой, дружелюбной и понятной — и она начнёт работать.

Компонент 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);
  }
}

На этом всё! 🎉

Увидеть результат можно под этим и другими постами 🙂

Подписывайтесь на мой Youtube канал, Telegram и на сообщество Вконтакте

Если статья была вам полезна, то не забудьте поддержать автора 🤗