Навіщо на сайті потрібні кнопки шарінгу в соціальні мережі і як їх реалізувати
Кнопки шарінгу в соціальні мережі — це простий інструмент, який дозволяє читачам швидко поділитися контентом зі своєю аудиторією. Вони не гарантують вірусного ефекту, але значно спрощують поширення матеріалів, особливо якщо стаття справді корисна.
Для інформаційних сайтів, блогів, особистих проєктів і експертних статей кнопки «Поділитися» є логічним доповненням до контенту.
1. Чому кнопки шарінгу варто додавати в статті
1.1. Зручність для читача
Більшість користувачів не копіює посилання вручну. Якщо кнопки шарінгу відсутні, навіть зацікавлений читач часто просто закриває сторінку.
Кнопка «Поділитися»:
- знімає зайві дії;
- дозволяє зробити репост у 1 клік;
- працює як ненав’язливе запрошення поширити матеріал.
1.2. Додаткове поширення контенту
Навіть кілька репостів:
- збільшують охоплення статті;
- приводять нових читачів;
- продовжують «життя» матеріалу після публікації.
1.3. Звичний елемент інтерфейсу
Для більшості користувачів кнопки соціальних мереж під статтею — це вже стандарт. Їх відсутність часто сприймається не як свідоме рішення, а як недопрацювання.
2. Варіанти додавання кнопок шарінгу на сайт
На практиці найчастіше використовують три підходи.
2.1. Сторонні сервіси шарінгу
Це сервіси, які надають готові кнопки у вигляді вставленого JavaScript-коду.
Переваги та недоліки сервісів
| Плюси | Мінуси |
|---|---|
| Швидке підключення | Залежність від стороннього сервісу |
| Не потрібно писати код | Сервіси можуть закриватися або ставати платними |
| Мінімальні налаштування | Часто додається сторонній JS або реклама |
| Працює «з коробки» | Менший контроль над дизайном і поведінкою |
| Додаткові запити, що впливають на швидкість |
На багатьох сайтах з часом такі рішення прибирають саме через нестабільність і сторонній код. Я вже пройшов цей путь і до мене часто звертаються клієнти що треба міняти чи переробляти.
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/JS;
- хоче керувати кнопками через адмінку.
За своєю суттю плагін робить те саме, що й ручна вставка коду, але логіка винесена в окремий модуль і доповнена налаштуваннями в інтерфейсі WordPress.
3. Опис плагіна Ash Plugins — Share Buttons
Плагін створений як легке рішення для додавання кнопок шарінгу без роботи з кодом теми. Він не використовує сторонні сервіси і не додає зайвих залежностей.
3.1. Що робить плагін
Плагін дозволяє:
- виводити кнопки шарінгу через свій шорткод
- кнорка для виводу шоркоду додана в редактор WordPress ( і класичний і гутенберг)
- або через функцію в шаблоні теми.
Шорткод:
[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 рази.
Потрібен сайт з нуля, оптимізація існуючого проекту або доопрацювання функціоналу?
📩 Напишіть у будь-який месенджер — обговоримо ваш проект!
Поки що нема коментарів.