Зачем на сайте нужны кнопки шаринга в социальные сети и как их реализовать
Кнопки шаринга в социальные сети — это простой инструмент, который позволяет читателям быстро поделиться контентом со своей аудиторией. Они не гарантируют вирусного эффекта, но значительно упрощают распространение материалов, особенно если статья действительно полезна.
Для информационных сайтов, блогов, личных проектов и экспертных статей кнопки «Поделиться» являются логичным дополнением к контенту.
1. Почему кнопки шаринга стоит добавлять в статьи
1.1. Удобство для читателя
Большинство пользователей не копирует ссылку вручную. Если кнопок шаринга нет, даже заинтересованный читатель часто просто закрывает страницу.
Кнопка «Поделиться»:
- убирает лишние действия;
- позволяет сделать репост в 1 клик;
- работает как ненавязчивое приглашение поделиться материалом.
1.2. Дополнительное распространение контента
Даже несколько репостов:
- увеличивают охват статьи;
- приводят новых читателей;
- продлевают «жизнь» материала после публикации.
1.3. Привычный элемент интерфейса
Для большинства пользователей кнопки социальных сетей под статьей — это уже стандарт. Их отсутствие часто воспринимается не как осознанное решение, а как недоработка.
2. Варианты добавления кнопок шаринга на сайт
На практике чаще всего используют три подхода.
2.1. Сторонние сервисы шаринга
Это сервисы, которые предоставляют готовые кнопки в виде вставленного JavaScript-кода.
Преимущества и недостатки сервисов
| Плюсы | Минусы |
|---|---|
| Быстрое подключение | Зависимость от стороннего сервиса |
| Не нужно писать код | Сервисы могут закрываться или становиться платными |
| Минимальные настройки | Часто добавляется сторонний JavaScript-код или реклама |
| Работает «из коробки» | Меньше контроля над дизайном и поведением |
| Дополнительные запросы, которые влияют на скорость |
На многих сайтах со временем такие решения убирают именно из-за нестабильности и стороннего кода. Я уже прошел этот путь, и ко мне часто обращаются клиенты с просьбой заменить или переделать такие кнопки.
2.2. Самописные кнопки через код в теме
Второй вариант — добавить кнопки шаринга непосредственно в тему сайта с помощью PHP, HTML, CSS и JavaScript.
В последнее время я ставлю именно так: код уже встроен в мой стартер Ash-Panel, мне нужно только стилизовать его под цветовую схему сайта.
Преимущества и недостатки самописного решения
| Плюсы | Минусы |
|---|---|
| Полный контроль над кодом | Нужно работать с кодом темы |
| Отсутствие сторонних сервисов | Настройка через правку файлов |
| Максимальная скорость | При смене темы код нужно переносить |
| Можно реализовать любой дизайн | Нет удобной админки |
Здесь в статье можно привести примеры PHP и CSS, которые вы используете в темах.
Пример PHP-кода (место для вставки):
<?php
$url = rawurlencode(get_permalink())
$title = rawurlencode(wp_strip_all_tags(get_the_title()));
$image = rawurlencode((string) get_the_post_thumbnail_url(null, ‘large’));
// Pinterest «create pin» (работает без их JS)
$pinterest_url = «https://www.pinterest.com/pin/create/button/?url={$url}&media={$image}&description={$title}»;
?>
<div class=»share-list»>
<span class=»share-item»>
<a title=»facebook» href=»https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>» class=»share-link share-link—facebook» rel=»nofollow» target=»_blank»>
<svg width=»30″ height=»30″ x=»0″ y=»0″ viewBox=»0 0 155.139 155.139″ style=»enable-background:new 0 0 512 512″ xml:space=»preserve» ><g><path d=»M89.584 155.139V84.378h23.742l3.562-27.585H89.584V39.184c0-7.984 2.208-13.425 13.67-13.425l14.595-.006V1.08C115.325.752 106.661 0 96.577 0 75.52 0 61.104 12.853 61.104 36.452v20.341H37.29v27.585h23.814v70.761h28.48z» ></path></g></svg>
</a>
</span>
<span class=»share-item»>
<a title=»twitter» href=»https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&hashtags=my_hashtag» class=»social-tw» rel=»nofollow» target=»_blank»>
<svg width=»30″ height=»30″ x=»0″ y=»0″ viewBox=»0 0 512 512″ style=»enable-background:new 0 0 512 512″ xml:space=»preserve»><g><path d=»M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z» ></path></g></svg>
</a>
</span>
<span class=»share-item»>
<a title=»Pinterest»
href=»<?php echo esc_url($pinterest_url); ?>»
class=»share-link share-link—pinterest»
rel=»nofollow noopener noreferrer»
target=»_blank»>
<svg width=»30″ height=»30″ x=»0″ y=»0″ viewBox=»0 0 511.977 511.977″ style=»enable-background:new 0 0 512 512″ xml:space=»preserve»><g><path d=»M262.948 0C122.628 0 48.004 89.92 48.004 187.968c0 45.472 25.408 102.176 66.08 120.16 6.176 2.784 9.536 1.6 10.912-4.128 1.216-4.352 6.56-25.312 9.152-35.2.8-3.168.384-5.92-2.176-8.896-13.504-15.616-24.224-44.064-24.224-70.752 0-68.384 54.368-134.784 146.88-134.784 80 0 135.968 51.968 135.968 126.304 0 84-44.448 142.112-102.208 142.112-31.968 0-55.776-25.088-48.224-56.128 9.12-36.96 27.008-76.704 27.008-103.36 0-23.904-13.504-43.68-41.088-43.68-32.544 0-58.944 32.224-58.944 75.488 0 27.488 9.728 46.048 9.728 46.048S144.676 371.2 138.692 395.488c-10.112 41.12 1.376 107.712 2.368 113.44.608 3.168 4.16 4.16 6.144 1.568 3.168-4.16 42.08-59.68 52.992-99.808 3.968-14.624 20.256-73.92 20.256-73.92 10.72 19.36 41.664 35.584 74.624 35.584 98.048 0 168.896-86.176 168.896-193.12C463.62 76.704 375.876 0 262.948 0z» ></path></g></svg>
</a>
</span>
<span class=»share-item»>
<a title=»linkedin» href=»http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo(‘name’); ?>» rel=»nofollow» target=»_blank»>
<svg width=»30″ height=»30″ x=»0″ y=»0″ viewBox=»0 0 100 100″ style=»enable-background:new 0 0 512 512″ xml:space=»preserve»><g><path d=»M90 90V60.7c0-14.4-3.1-25.4-19.9-25.4-8.1 0-13.5 4.4-15.7 8.6h-.2v-7.3H38.3V90h16.6V63.5c0-7 1.3-13.7 9.9-13.7 8.5 0 8.6 7.9 8.6 14.1v26H90zM11.3 36.6h16.6V90H11.3zM19.6 10c-5.3 0-9.6 4.3-9.6 9.6s4.3 9.7 9.6 9.7 9.6-4.4 9.6-9.7-4.3-9.6-9.6-9.6z» ></path></g></svg>
</a>
</span>
<span class=»share-item»>
<a title=»viber» href=»viber://forward?text=<?php the_permalink(); ?>» class=»share-link share-link—telegram» rel=»nofollow» target=»_blank»>
<svg width=»30″ height=»30″ x=»0″ y=»0″ viewBox=»0 0 24 24″ style=»enable-background:new 0 0 512 512″ xml:space=»preserve»><g><path d=»M23.155 13.893c.716-6.027-.344-9.832-2.256-11.553l.001-.001C17.814-.6 7.392-1.035 3.7 2.471 2.042 4.186 1.458 6.703 1.394 9.819c-.064 3.117-.14 8.956 5.301 10.54H6.7l-.005 2.419s-.037.98.589 1.177c.716.232 1.04-.223 3.267-2.883 3.724.323 6.584-.417 6.909-.525.752-.252 5.007-.815 5.695-6.654zM10.918 19.37s-2.357 2.939-3.09 3.702c-.24.248-.503.225-.499-.267 0-.323.018-4.016.018-4.016-4.613-1.322-4.341-6.294-4.291-8.895.05-2.602.526-4.733 1.93-6.168C8.225.689 17.362 1.368 19.69 3.556c2.846 2.523 1.833 9.651 1.839 9.894-.585 4.874-4.033 5.183-4.667 5.394-.271.09-2.786.737-5.944.526z» ></path><path d=»M12.222 4.297c-.385 0-.385.6 0 .605 2.987.023 5.447 2.105 5.474 5.924 0 .403.59.398.585-.005h-.001c-.032-4.115-2.718-6.501-6.058-6.524z» ></path><path d=»M16.151 10.193c-.009.398.58.417.585.014.049-2.269-1.35-4.138-3.979-4.335-.385-.028-.425.577-.041.605 2.28.173 3.481 1.729 3.435 3.716zM15.521 12.774c-.494-.286-.997-.108-1.205.173l-.435.563c-.221.286-.634.248-.634.248-3.014-.797-3.82-3.951-3.82-3.951s-.037-.427.239-.656l.544-.45c.272-.216.444-.736.167-1.247-.74-1.337-1.237-1.798-1.49-2.152-.266-.333-.666-.408-1.082-.183h-.009c-.865.506-1.812 1.453-1.509 2.428.517 1.028 1.467 4.305 4.495 6.781 1.423 1.171 3.675 2.371 4.631 2.648l.009.014c.942.314 1.858-.67 2.347-1.561v-.007c.217-.431.145-.839-.172-1.106-.562-.548-1.41-1.153-2.076-1.542z» ></path><path d=»M13.169 8.104c.961.056 1.427.558 1.477 1.589.018.403.603.375.585-.028-.064-1.346-.766-2.096-2.03-2.166-.385-.023-.421.582-.032.605z» ></path></g></svg>
</a>
</span>
<span class=»share-item»>
<a title=»telegram» href=»https://t.me/share/url?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>» class=»share-link share-link—telegram» rel=»nofollow» target=»_blank»>
<svg width=»30″ height=»30″ x=»0″ y=»0″ viewBox=»0 0 24 24″ style=»enable-background:new 0 0 512 512″ xml:space=»preserve»><g><path d=»m9.417 15.181-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931L23.93 3.821l.001-.001c.321-1.496-.541-2.081-1.527-1.714l-21.29 8.151c-1.453.564-1.431 1.374-.247 1.741l5.443 1.693L18.953 5.78c.595-.394 1.136-.176.691.218z» ></path></g></svg>
</a>
</span>
<span class=»share-item»>
<a title=»whatsapp» href=»whatsapp://send» data-text=»<?php the_title(); ?>» data-href=»<?php the_permalink(); ?>» class=»wa_btn wa_btn_s» >
<svg width=»30″ height=»30″ x=»0″ y=»0″ viewBox=»0 0 24 24″ style=»enable-background:new 0 0 512 512″ xml:space=»preserve» class=»»><g><path d=»m17.507 14.307-.009.075c-2.199-1.096-2.429-1.242-2.713-.816-.197.295-.771.964-.944 1.162-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.293-.506.32-.578.878-1.634.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.576-.05-.997-.042-1.368.344-1.614 1.774-1.207 3.604.174 5.55 2.714 3.552 4.16 4.206 6.804 5.114.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345z» class=»»></path><path d=»M20.52 3.449C12.831-3.984.106 1.407.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c7.905 4.27 17.661-1.4 17.665-10.449 0-3.176-1.24-6.165-3.495-8.411zm1.482 8.417c-.006 7.633-8.385 12.4-15.012 8.504l-.36-.214-3.75.975 1.005-3.645-.239-.375c-4.124-6.565.614-15.145 8.426-15.145a9.865 9.865 0 0 1 7.021 2.91 9.788 9.788 0 0 1 2.909 6.99z»></path></g></svg>
</a>
</span>
</div>?>
Пример CSS (место для вставки):
.share-list {
display: flex;
justify-content: center;
}
.share-list .share-item {
margin: 5px;
cursor: pointer;
}
.share-list .share-item svg {
width: 30px;
height: 30px;
padding: 6px;
border-radius: 3px;
background-color: #333;
color: #ffffff;
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* hover — на контейнер */
.share-list .share-item:hover svg {
background-color: red;
transform: translateY(-2px);
}
/* SVG внутри работает через currentColor */
.share-list .share-item svg path {
fill: currentColor;
}
2.3. Плагин для кнопок шаринга (как альтернатива работе с кодом)
Плагин в этом случае не является «лучшим» или «обязательным» решением. Это альтернатива для тех, кто:
- не хочет редактировать файлы темы;
- не уверенно чувствует себя в PHP и JavaScript;
- хочет управлять кнопками через админку.
По сути, плагин делает то же самое, что и ручная вставка кода, но логика вынесена в отдельный модуль и дополнена настройками в интерфейсе WordPress.
3. Описание плагина Ash Plugins — Share Buttons
Плагин создан как легкое решение для добавления кнопок шаринга без работы с кодом темы. Он не использует сторонние сервисы и не добавляет лишних зависимостей.
3.1. Что делает плагин
Плагин позволяет:
- выводить кнопки шаринга через свой шорткод;
- кнопка для вставки шорткода добавлена в редактор WordPress (и классический, и Gutenberg);
- или через функцию в шаблоне темы.
Шорткод:
[ash-plugins-share-buttons]
Вывод в шаблоне темы:
<?php if (function_exists(‘ash_plugins_share_buttons’)) echo ash_plugins_share_buttons(); ?>
3.2. Настройки через админку
Через панель управления WordPress можно:
- включать или выключать отдельные социальные сети;
- менять цвета кнопок;
- менять цвет текста и иконок кнопки «Поделиться»;
- добавлять собственные CSS-стили (через редактор с подсветкой кода).
3.3. Сравнение: код в теме vs плагин
| Критерий | Код в теме | Плагин |
|---|---|---|
| Скорость | Максимальная | Такая же |
| Контроль | Полный | Полный |
| Работа с кодом | Требуется | Не обязательна |
| Перенос между темами | Нужно вручную | Автоматически |
| Настройка | Через файлы | Через админку |
Вывод
Кнопки шаринга — это не обязательный, но полезный элемент для статей и блогов. Способ реализации зависит от опыта работы с кодом, структуры проекта и личных предпочтений.
Кто-то выберет самописное решение в теме, кто-то — плагин как более удобный интерфейс для управления. Главное, чтобы кнопки были легкими, стабильными и не мешали контенту.
Скачать плагин шаринга в социальные сети бесплатно
Подписывайтесь на Telegram-канал, где я делюсь практическими решениями для WordPress и веб-разработки: https://t.me/AshifinStudio
FAQ
| Вопрос | Ответ |
|---|---|
| Влияют ли кнопки шаринга на SEO? | Косвенно. Репосты могут приводить дополнительный трафик и увеличивать охват контента, что положительно влияет на поведенческие сигналы. |
| Почему не стоит полностью полагаться на сторонние сервисы шаринга? | Такие сервисы могут стать недоступными, изменить условия (стать платными) или добавлять сторонний код и лишние запросы, что влияет на скорость и контроль. |
| Чем плагин отличается от самописного кода в теме? | Функционально они могут быть похожи, но плагин удобнее для управления через админку и не привязан к конкретной теме. |
| Как быстро вставить кнопки в Gutenberg? | Можно использовать шорткод в блоке Shortcode или кнопку в тулбаре редактора, которая вставляет шорткод кнопок. |
| Что делать, если Pinterest подменяет кнопку своим виджетом? | Не подключайте pinit.js на страницах, где вы используете собственные кнопки, или используйте share-URL Pinterest без официального скрипта. |
Разрабатываю сайты без использования конструкторов — только чистый, валидный код. Это обеспечивает высокую скорость загрузки и отличные показатели в Google PageSpeed, а значит — стоимость клика в рекламе в 2–3 раза ниже.
Нужен сайт с нуля, оптимизация существующего проекта или доработка функционала?
📩 Пишите в любой мессенджер — обсудим ваш проект!
Поки що нема коментарів.