Как сделать соцсети на сайте: HTML-код, иконки, виджеты ВК и Telegram

Чтобы добавить соцсети на сайт, поставьте текст или иконку со ссылкой на публичный профиль, канал или сообщество в шапку, подвал или блок контактов: в HTML для этого служит элемент <a> с атрибутом href. Готовый HTML-код можно вставить в свою страницу, а в конструкторе выбрать готовый блок; виджет показывает публикации или даёт подписаться, кнопка «Поделиться» передаёт адрес страницы, превью задаёт её вид в сообщении.

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

Начните с одного основного канала и одного запасного. Для сайта услуг это может быть канал с работами и способ связи; для личного портфолио достаточно профиля с актуальными примерами. Если страница уже содержит способы связи, кликабельные ссылки, кнопки и телефон помогут отделить контакты от социальных площадок.

Как поставить ссылки на профили с иконками в HTML

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

Для публичного канала, группы или аккаунта Telegram с именем пользователя подходит адрес t.me/username или username.t.me, где имя пишется без @, как объясняет справка Telegram. Для сайта нужен полный адрес; в примере стоит https://t.me/vash_kanal. Замените его и https://vk.com/vash_profil своими адресами, иначе ссылки останутся заглушками.

1. Запишите в таблицу название площадки, полный публичный адрес и цель перехода: читать, смотреть работы или написать.
2. Подготовьте SVG-иконки и сохраните их на сайте по путям /icons/telegram.svg и /icons/vk.svg, которые указаны в примере. Если файлы лежат иначе, замените пути в src.
3. Вставьте ссылки в блок контактов, подвал либо на страницу автора. Если страницы ещё нет, начните с шаблона index.html с <meta charset="UTF-8">.
4. Сохраните страницу и откройте её на телефоне и компьютере. Пройдите по каждой ссылке без входа в свой аккаунт.

Ссылки в примере открываются в новой вкладке. Атрибут rel="noopener" закрывает ей доступ к window.opener. Современные браузеры уже подразумевают это поведение при target="_blank", но явный атрибут оставляют для старых браузеров. CSS разместите в <head>, а блок <nav> в выбранном месте внутри <body>; видимые подписи объясняют, куда ведут значки.

<style>
  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }
  .social-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 24px;
    min-height: 24px;
  }
</style>

<nav class="social-links" aria-label="Соцсети">
  <a href="https://t.me/vash_kanal" target="_blank" rel="noopener">
    <img src="/icons/telegram.svg" alt="" width="24" height="24">
    Наш канал в Telegram
  </a>
  <a href="https://vk.com/vash_profil" target="_blank" rel="noopener">
    <img src="/icons/vk.svg" alt="" width="24" height="24">
    Работы во ВКонтакте
  </a>
</nav>

Иконке рядом с видимой подписью оставьте пустой alt="": имя ссылки уже даёт текст. Иконка без текстового имени может быть непонятна человеку с экранным диктором. Учебное руководство W3C объясняет, как передать назначение функционального изображения и когда пустой alt помогает избежать повторов. Название действия полезнее описания логотипа.

Если оставляете только значок, задайте имя на самой ссылке через aria-label, например «Наш канал в Telegram». Такое имя заменяет видимую подпись для вспомогательных технологий, но посетитель, который смотрит на страницу, по-прежнему видит лишь иконку. Поэтому там, где рядом стоят несколько площадок и результат перехода может быть неясен, сохраните подписи из основного примера.

<nav class="social-links" aria-label="Соцсети">
  <a href="https://t.me/vash_kanal" target="_blank" rel="noopener"
     aria-label="Наш канал в Telegram">
    <img src="/icons/telegram.svg" alt="" aria-hidden="true" width="24" height="24">
  </a>
</nav>

Атрибут aria-hidden="true" в этом варианте стоит на картинке. На саму ссылку или её обёртку его не ставьте: ссылка получает фокус с клавиатуры, и скрывать её от вспомогательных технологий нельзя.

Для области нажатия задайте минимум 24×24 CSS-пикселя по критерию WCAG 2.2. В примере этот размер обеспечивают min-width и min-height, а gap раздвигает соседние ссылки. Размер картинки и размер ссылки проверяйте отдельно: нажимать посетитель будет на ссылку.

Где взять иконки соцсетей

SVG-иконки VK, Telegram, Одноклассников и YouTube есть в Simple Icons. Значка мессенджера Max там нет: иконка с названием Max в этом наборе относится к другому продукту, поэтому логотип Max берите у самого сервиса. Скачайте файлы и положите их по путям из примера либо поменяйте src на свои.

Проект Simple Icons распространяется под CC0 1.0, однако авторы предупреждают о лицензиях отдельных иконок и правилах брендов. Проверьте сведения у выбранного значка: общая лицензия проекта не означает, что каждый логотип можно использовать на тех же условиях.

Логотипы Telegram можно взять и с официальной страницы. Telegram разрешает использовать их в том числе в кнопках отправки в Telegram, если оформление не создаёт впечатления, что вы официально представляете сервис.

По теме: Как сделать пост на сайте в 2026: запись, новость и статья

Как добавить соцсети в Тильде, WordPress, Wix и uKit

В конструкторе код не нужен: в готовом блоке или виджете вы выбираете сеть и вписываете публичный адрес. HTML-пример выше пригодится для страницы, которую вы правите кодом.

В Тильде откройте «Контент» блока, в котором есть вкладка «Ссылки на мессенджеры и сервисы». Раскройте её и нажмите «Добавить пункт». Для своей площадки выберите иконку Website, впишите название и ссылку, загрузите изображение со своей иконкой. Если на странице нужна отдельная кнопка, настройте её в Тильде.

В WordPress используйте блок Social Icons, или «Иконки социальных сетей». В нём есть VK и Telegram. Добавляйте адреса по очереди, чтобы каждый значок вёл к нужному профилю:

1. Нажмите «+» в редакторе, найдите Social Icons и добавьте блок. Можно набрать /social icons в новом абзаце.
2. Нажмите «+» внутри блока и выберите сеть.
3. Нажмите на добавленную иконку, вставьте адрес профиля и нажмите Enter.
4. Повторите для остальных площадок, затем проверьте переходы на сохранённой странице.

Для распространения материала в WordPress.com предусмотрен отдельный блок Sharing Buttons. Social Icons ведёт в ваши профили, а Sharing Buttons нужен, если посетитель должен отправить кому-то саму статью.

В Wix Editor откройте Add Elements → Social → Social Bar и перетащите панель на страницу. Нажмите Set Social Links, выберите иконку, откройте поле ссылки и укажите Web Address. Вставьте публичный адрес, выберите новое или текущее окно и нажмите Done. Повторите для каждой иконки.

В uKit разместите виджет «Соцсети» и нажмите на него. Откройте панель настроек слева, включите ползунок нужной сети и введите ссылку на свой профиль, канал или группу. В списке есть ВКонтакте, Telegram, Max и YouTube.

Нужен ли виджет сообщества ВКонтакте

Для перехода в сообщество достаточно ссылки; виджет ВКонтакте нужен, если посетитель должен увидеть ленту или подписаться прямо на странице. Сначала поставьте ссылку. Добавляйте виджет, когда просмотр публикаций на сайте помогает посетителю принять решение.

В официальном конструкторе виджета ВКонтакте вставьте ссылку на сообщество, выберите вид и скопируйте код. В примере используется стена сообщества: mode: 4, ширина auto и высота 400 пикселей. Число 12345678 обозначает ID-заглушку; замените его ID своего сообщества без знака минус. Подключение openapi.js разместите в <head>, а контейнер и вызов виджета в <body>.

<script src="https://vk.ru/js/api/openapi.js?169"></script>

<div id="vk_groups"></div>
<script>
  VK.Widgets.Group("vk_groups", {mode: 4, width: "auto", height: 400}, 12345678);
</script>

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

• mode: 1 показывает только название сообщества, mode: 3 участников, mode: 4 стену.
• width задаёт ширину от 120 пикселей; значение auto подстраивает её под родительский блок.
• height задаёт высоту от 200 до 1200 пикселей. Для режимов 1 и 3 высота определяется автоматически.
• group_id указывается без знака минус. Виджет позволяет подписаться на сообщество, оставаясь на странице.

Конструктор выдаёт код без VK.init, хотя в пошаговом тексте той же страницы этот вызов есть. Если виджет не появляется, создайте приложение типа «Веб-сайт» и добавьте VK.init перед вызовом виджета, указав ID приложения в apiId и onlyWidgets: true. В справке по Open API параметр apiId обязателен для инициализации; это не означает, что его надо добавлять к каждому коду из конструктора.

Не копируйте случайный скрипт «кнопок соцсетей» с неизвестного сайта. Для стороннего кода проверьте загрузку, доступ к сведениям о посетителях и возможность отключения. Если такой проверки нет, оставьте обычные ссылки. При сбое встраивания проверьте iframe, скрипты и CSP, а для размещения блока среди остальных страниц используйте план многостраничного сайта.

По теме: Как сделать Дискорд на сайте: ссылка и официальный виджет

Как встроить пост из Telegram

Сообщение из публичного канала или группы можно встроить через Telegram Post Widget. Откройте ссылку вида t.me/канал/номер в браузере, нажмите «< > EMBED» и скопируйте код. Сообщения из закрытых групп и каналов этот способ не встраивает. В примере замените vash_kanal/1 именем своего публичного канала и номером нужного поста, сохранив подключение скрипта и атрибут ширины.

<script async src="https://telegram.org/js/telegram-widget.js?24"
        data-telegram-post="vash_kanal/1"
        data-width="100%"></script>

Для комментариев к статьям из канала предназначен Discussion Widget. Если в канале вы публикуете ссылки на статьи сайта, укажите канонический адрес текущей статьи тегом <link rel="canonical" href="..."> в <head>: он нужен этому варианту встраивания обсуждений. Виджет поста показывает одно выбранное сообщение, обсуждения подключаются отдельно.

Если вы собираете сайт для Telegram-канала, сохраните рядом обычную ссылку на канал и её понятную подпись. Перед размещением поста посмотрите, что остаётся на странице при недоступности площадки, и убедитесь, что встроенное сообщение помещается на мобильном экране.

Как сделать кнопку «Поделиться» без сторонних скриптов

Кнопку «Поделиться» можно сделать обычной ссылкой, которая передаёт выбранной сети адрес страницы. Для Telegram используйте https://t.me/share/url?url={url}&text={text}. Параметр text необязателен, а оба значения должны быть URL-кодированы. В примере передаётся только адрес https://example.ru/statya, уже закодированный как https%3A%2F%2Fexample.ru%2Fstatya; замените его закодированным адресом своей страницы.

Для ВКонтакте прямая ссылка имеет вид https://vk.ru/share.php?url={адрес_страницы} и работает без JavaScript на вашем сайте. Документация также даёт вариант со скриптом share.js и вызовом VK.Share.button(). Для простых ссылок ниже этот скрипт не нужен. Кириллические адреса для публикации ВКонтакте передавайте в Punycode, как указано в документации.

<a href="https://t.me/share/url?url=https%3A%2F%2Fexample.ru%2Fstatya" target="_blank" rel="noopener">
  Поделиться в Telegram
</a>
<a href="https://vk.ru/share.php?url=https%3A%2F%2Fexample.ru%2Fstatya" target="_blank" rel="noopener">
  Поделиться ВКонтакте
</a>

Готовые блоки «Поделиться» сторонних сервисов, например Яндекса, подключают на страницу внешний скрипт. Прямые ссылки Telegram и ВКонтакте передают адрес страницы без него; после вставки проверьте результат на телефоне.

По теме: Как сделать сайт для телеграм-канала в 2026: визитка, посты, заявки

Как настроить превью ссылки через Open Graph

Превью ссылки задайте тегами Open Graph в <head> страницы. Протокол Open Graph определяет четыре обязательных свойства: og:title, og:type, og:image и og:url. В примере замените заголовок, адрес страницы и адрес изображения своими значениями. Адреса https://example.ru/statya и https://example.ru/preview.jpg служат заглушками: og:url должен содержать канонический адрес страницы, а og:image адрес картинки для превью.

<meta property="og:title" content="Название вашей статьи">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.ru/preview.jpg">
<meta property="og:url" content="https://example.ru/statya">

ВКонтакте берёт заголовок из og:title, mrc__share_title или twitter:title, а при их отсутствии из <title>. Картинку берёт из og:image, twitter:image или image; если таких тегов нет, рассматривает первые 8 элементов <img> и предлагает изображения шире и выше 130 пикселей. Картинка шире 537 пикселей показывается крупно.

В Тильде превью задаётся в «Настройки страницы → Соцсети → Отображение в соцсетях и мессенджерах». Если в Telegram остался прежний предпросмотр, справка Тильды предлагает бота @WebpageBot: запустите его командой Start, затем отправьте до 10 ссылок, превью которых нужно обновить. Указывайте адрес той страницы, для которой изменили заголовок или изображение.

Во ВКонтакте сохранённое превью сбрасывает метод pages.clearCache: он очищает кеш внешней страницы. Вызвать его можно прямо на странице метода, там понадобится access token (как его получить, описывает та же справка Тильды). Вставьте адрес страницы и нажмите «Выполнить»; при удачной очистке метод возвращает 1. Сначала внесите нужные значения в теги или настройки конструктора, потом сбрасывайте кеш.

Как проверить работу и найти сбой

Проверьте сохранённую страницу с клавиатуры и телефона: ссылка видна без наведения, текст объясняет место назначения, клавиша Tab выделяет её, Enter открывает нужный публичный адрес, а на телефоне ссылку не перекрывают другие элементы. Если после клика открывается ваш личный редактор профиля, замените адрес публичным. Если площадка требует вход, проверьте страницу из другого браузера и решите, предупреждать ли посетителя об этом.

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

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

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

Частые вопросы

Можно ли добавить только значки без текста?

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

Где лучше поставить ссылки?

Разместите их там, где человек уже выбирает способ связи: рядом с контактами или в подвале. На странице услуги можно добавить ссылку на портфолио рядом с примерами, если это помогает проверить работы.

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

Это отдельный сценарий: передавать адрес текущей страницы, а не адрес вашего профиля. Сначала проверьте официальную ссылку публикации конкретной площадки и поведение на телефоне. Если нужной кнопки нет, посетитель может скопировать адрес страницы обычными средствами браузера. Для Telegram используйте https://t.me/share/url?url={url}&text={text} с URL-кодированными значениями (документация Telegram); для ВКонтакте https://vk.ru/share.php?url={адрес_страницы} (документация ВК).

Как сделать кнопку входа через соцсети?

Для входа через Telegram подключите Telegram Login: ему нужен бот и разрешённые адреса сайта, зарегистрированные в @BotFather. Такая кнопка решает задачу входа на сайт; обычная ссылка, виджет поста и кнопка «Поделиться» вход не добавляют.