Генератор share-ссылок для соцсетей — кнопки «Поделиться» для сайта

Под статьёй нужны кнопки «Поделиться». У каждой площадки свой формат ссылки: VK ждёт один параметр, Telegram другой, WhatsApp склеивает текст и адрес в одно сообщение. Ещё всё это надо закодировать, иначе заголовок с кавычкой или кириллицей ломает ссылку.

Генератор share-ссылок для соцсетей выше закрывает вопрос за один заход. Вписали адрес, заголовок и текст: забрали шесть ссылок и готовый HTML-блок с кнопками.

Кому пригодится генератор кнопок «Поделиться»

Редактору блога, который ставит кнопки под каждой статьёй. Маркетологу, который руками разносит анонс по чатам. Владельцу магазина: кнопка в карточке товара начинается с такой же ссылки.

Продажнику тоже найдётся применение. Ссылка на WhatsApp открывает мессенджер с уже набранным сообщением, текст и адрес страницы идут вместе.

Что вписывать в три поля

Над формой стоит галочка согласия. Пока она не отмечена, поля заблокированы. Отметили, и форма ожила. При следующей загрузке страницы галочку придётся поставить заново.

• Адрес страницы. Без него ничего не соберётся: пока адрес не распознан, под полем висит подсказка. Схему можно не писать, https подставится сам.
• Заголовок. Его забирают VK, Одноклассники и тема письма.
• Текст для шаринга. Его забирают Telegram, WhatsApp и X.

Заполнять оба поля не обязательно. Оставите одно, инструмент подставит его и туда, и туда.

Какое поле куда уходит

Полей два, потому что площадки читают разные параметры. Вот кто что берёт.

• VK и Одноклассники берут адрес и заголовок. Текст для шаринга они не читают.
• Telegram и X берут адрес и текст.
• WhatsApp берёт текст, а адрес приклеивает к нему в конец. Уходит одно сообщение.
• Письмо забирает всё: заголовок в тему, текст и адрес в тело.

Что делать с результатом

Шесть ссылок копируются по одной. Это для случая, когда надо быстро кинуть анонс в чат или собрать кнопки руками в конструкторе.

Ниже лежит готовый HTML сразу со всеми кнопками: обёртка с классом share-buttons и шесть ссылок с подписями. Внешние открываются в новой вкладке, почтовая остаётся в текущей. Фрагмент вставляют в шаблон сайта, в подвал статьи или в карточку товара.

Стилей в блоке нет. Вставите как есть, и получите шесть синих подчёркнутых слов в столбик. Оформление пишете сами: раскладываете обёртку во флекс, убираете подчёркивание, добавляете иконки. Класс share-buttons для этого и отдан.

Одна оговорка. Адрес страницы зашит в ссылки намертво. Для каждой новой статьи фрагмент придётся пересобрать или подставлять адрес шаблоном сайта.

На блоге это решают шаблоном. Соберите фрагмент один раз и замените в нём адрес на переменную своей CMS: в Drupal это url узла, в WordPress вызов the_permalink, в Битриксе поле DETAIL_PAGE_URL. Дальше каждая статья подставит свой адрес сама.

Как посчитать клики по кнопкам

Кнопки стоят, и сразу возникает второй вопрос: жмут их или нет. Сама ссылка ничего не считает.

Первый путь через Метрику. Повесьте цель на клик по ссылке внутри блока share-buttons, а площадку передавайте параметром события. Отчёт покажет, какая кнопка работает, а какая висит для красоты.

Второй путь через метку в адресе. Прогоните адрес через генератор UTM-меток, задайте свой источник для каждой площадки и уже размеченный адрес вставьте сюда. Тогда в отчётах виден уже не сам клик, а что человек сделал после перехода.

Второй путь честнее, он считает переходы, а не нажатия. Первый проще, в ссылках ничего менять не надо.

Нужны ли кнопки шаринга вообще

Спор старый, и ответ у него неудобный. По нашему опыту доля кликов по таким кнопкам маленькая, счёт идёт на доли процента от просмотров.

Смысл не в доле. Кнопки дешёвые: один раз вставили в шаблон и забыли про них. Работают они там, где делиться привычно: инструкции, подборки, разборы, база знаний. В карточке товара и на лендинге толку почти нет, а место кнопки занимают.

Отсюда и правило. В блоге ставьте, в коммерческих разделах не тратьте на них внимание читателя.

На что обратить внимание

Картинку в превью ссылка не задаёт. Как выглядит карточка в VK или Telegram, решают мета-теги самой страницы: og:title, og:description, og:image. Нет их, площадка возьмёт первое, что найдёт, или не покажет ничего. Соберите теги генератором Open Graph и Twitter Card и положите в шаблон.

Кодирование инструмент берёт на себя. Кавычки, пробелы, кириллица и вопросительные знаки доедут до площадки целыми.

Почтовая ссылка собирается через mailto, поэтому откроется тот клиент, который назначен на устройстве. Если почта не настроена, кнопка не сделает ничего.

Ссылки стоит проверить до того, как они уедут в шаблон. Откройте каждую и посмотрите, что подставилось: заголовок, текст, адрес.

Форматы у площадок живут своей жизнью: адреса и имена параметров иногда меняются. Мы следим за этим и правим генератор. Если фрагмент лежит у вас в шаблоне давно, раз в полгода пересоберите его заново.

Считается всё в браузере. Адрес, заголовок и текст на сервер не уходят.