Кнопки социальных сетей на сайт: практическое руководство

Кнопки социальных сетей на сайт — это простой способ дать посетителю возможность поделиться страницей в один клик. Главное здесь не количество кнопок, а удобство и корректная реализация без лишней нагрузки на сайт. Ниже конкретное руководство: как сделать рабочие кнопки самостоятельно с помощью HTML и JavaScript.

Почему стоит делать кнопки вручную

• Минимальная нагрузка — никаких тяжёлых плагинов и сторонних скриптов.
• Полный контроль — вы точно знаете, какой код работает на странице.
• Гибкость — легко изменить текст, порядок и внешний вид.
• Совместимость — одинаково работает в WordPress, статике и шаблонах.

Базовая HTML-разметка кнопок

Начнём с простой разметки. Это обычные ссылки, которые будут обрабатываться через JavaScript.

<div>
  <a href="#" data-share="vk">Поделиться ВКонтакте</a>
  <a href="#" data-share="ok">Поделиться в Одноклассниках</a>
  <a href="#" data-share="tg">Поделиться в Telegram</a>
  <a href="#" data-share="wa">Поделиться в WhatsApp</a>
</div>

JavaScript-реализация кнопок

Скрипт автоматически подставляет текущий адрес страницы и заголовок документа.

<script>
document.addEventListener('click', function (e) {
  var btn = e.target.closest('[data-share]');
  if (!btn) return;

  e.preventDefault();

  var url = encodeURIComponent(window.location.href);
  var title = encodeURIComponent(document.title);
  var shareType = btn.getAttribute('data-share');
  var shareUrl = '';

  switch (shareType) {
    case 'vk':
      shareUrl ='https://vk.com/share.php?url=' + url;
      break;

    case 'ok':
      shareUrl ='https://connect.ok.ru/offer?url=' + url;
      break;

    case 'tg':
      shareUrl ='https://t.me/share/url?url=' + url + '&text=' + title;
      break;

    case 'wa':
      shareUrl ='https://wa.me/?text=' + title + '%20' + url;
      break;
  }

  if (shareUrl) {
    window.open(shareUrl, '_blank', 'width=600,height=400');
  }
});
</script>

Этот код можно вставить:

• в файл шаблона темы;
• в футер сайта;
• через пользовательский JS в WordPress.

Как это работает

• Пользователь кликает по ссылке.
• JavaScript перехватывает клик.
• Формируется ссылка нужной соцсети.
• Открывается новое окно с формой «Поделиться».

Никакие API-ключи и регистрации не требуются.

jQuery-вариант (если используется на сайте)

Если на сайте уже подключён jQuery, можно использовать более компактный вариант.

<script>
jQuery(function ($) {
  $('[data-share]').on('click', function (e) {
    e.preventDefault();

    var url = encodeURIComponent(window.location.href);
    var title = encodeURIComponent(document.title);
    var type = $(this).data('share');
    var shareUrl = '';

    if (type ==='vk') {
      shareUrl ='https://vk.com/share.php?url=' + url;
    } else if (type ==='ok') {
      shareUrl ='https://connect.ok.ru/offer?url=' + url;
    } else if (type ==='tg') {
      shareUrl ='https://t.me/share/url?url=' + url + '&text=' + title;
    } else if (type === 'wa') {
      shareUrl ='https://wa.me/?text=' + title + '%20' + url;
    }

    window.open(shareUrl, '_blank', 'width=600,height=400');
  });
});
</script>

Практические советы

• Размещайте кнопки после статьи или рядом с заголовком.
• Не используйте больше 3–4 кнопок.
• Проверяйте работу на мобильных устройствах.
• Не оборачивайте кнопки в nofollow без необходимости.

Итог

Самостоятельная реализация кнопок шаринга — это простой и надёжный способ добавить функциональность без плагинов. Такой подход понятен, легко поддерживается и полностью контролируется вами.