Создаём идеальный плагин кнопок «Поделиться» для WordPress
Создаём идеальный плагин кнопок «Поделиться» для WordPress.
Социальные кнопки — неотъемлемая часть любого современного сайта. Они помогают посетителям делиться контентом, увеличивая охват и привлекая новую аудиторию. Но как сделать так, чтобы эти кнопки не раздражали, а работали эффективно? В этой статье мы разберём, как создать собственный лёгкий и ненавязчивый плагин для кнопок ВКонтакте и Одноклассников, который по всем параметрам превосходит типовые решения.
📌 Проблема типовых решений
Большинство плагинов для социальных кнопок страдают одними и теми же недостатками:
Перегруженность и медленная работа — многие решения тащат тяжёлые библиотеки, скрипты и стили, замедляя загрузку сайта.
Отсутствие гибких настроек показа — стандартные плагины часто не умеют тонко настраивать поведение: когда появляться, сколько висеть и как реагировать на действия пользователя.
Навязчивость — кнопки постоянно висят на странице, отвлекают и мешают читать контент.
Зависимость от внешних сервисов — многие используют сторонние скрипты (Яндекс.Поделиться, share42.com), которые могут тормозить или стать недоступными.
Сложность интеграции — для настройки нужно лезть в дебри админки или править код.
Наш подход решает все эти проблемы.
🚀 Наш плагин: Лёгкость, Ум и Эффективность
Мы создали плагин, который фокусируется на главном: ненавязчиво предложить пользователю поделиться контентом в нужный момент. Вот ключевые принципы, заложенные в его основу:
1. Идеальный тайминг: Появляется, когда пользователь готов
Плагин не показывает кнопки сразу при загрузке страницы, пока посетитель ещё не успел ознакомиться с содержанием. Вместо этого он появляется через 2 секунды — идеальный момент, когда пользователь уже начал изучать материал и может заинтересоваться им.
2. Минимализм в действии: Показывается 1 раз и только при необходимости
Кнопка работает по принципу «умного помощника»:
Она появляется только один раз за посещение страницы — не надоедает при обновлении или возвращении.
Если пользователь не двигает мышью, кнопка остаётся на экране до 8 секунд — даёт время заметить и нажать.
Как только пользователь начинает взаимодействие (двигает мышью), плагин даёт ещё 4 секунды на клик, а затем плавно и бесшовно исчезает.
Если посетитель наводит курсор на кнопку, таймер останавливается — человек явно заинтересовался, и мы не мешаем ему принять решение.
Эта поведенческая модель не раздражает, не отвлекает от контента и при этом эффективно выполняет свою задачу.
3. Универсальный «Предпросмотр»: Лучше, чем стандартный шеринг
Обычные кнопки «Поделиться» просто открывают окно с формой, где пользователь может вручную написать текст. Наш плагин использует режим предпросмотра (WidgetSharePreview) для ВКонтакте и Одноклассников.
Чем это лучше?
Наглядность. Пользователь сразу видит, как будет выглядеть его будущая публикация: заголовок, описание, картинка.
Контроль. Можно убедиться, что пост выглядит привлекательно, и при необходимости отредактировать текст до публикации.
Выше конверсия. Готовый, красивый превью стимулирует пользователя нажать «Отправить» чаще, чем пустая форма.
Кроме того, ссылки для предпросмотра построены так, что работают для любого сайта без регистрации приложений и получения токенов — это настоящая универсальность.
4. Техническое совершенство: Лёгкость и независимость
В отличие от монструозных плагинов, наше решение:
Не использует внешние скрипты — весь код находится внутри плагина, он не зависит от работоспособности сторонних сервисов (Яндекс, share42.com).
Не тащит лишние библиотеки — помимо встроенного в WordPress jQuery, не подключается ничего лишнего.
Не создаёт лишних запросов к базе данных или внешним API.
Имеет минимальный вес — один PHP-файл со стилями и скриптами внутри, который не замедляет ваш сайт.
5. Простота и понятность для пользователя
Кнопки имеют интуитивно понятный дизайн с подписями «ВК» и «ОК». Это ясно, лаконично и не требует дополнительных пояснений. Адаптивный дизайн обеспечивает корректное отображение на любых устройствах — от больших мониторов до смартфонов.
Мы создали не просто плагин, а продуманный инструмент для повышения вовлечённости. Он учитывает психологию пользователя, технически совершенен и предлагает уникальную функцию предпросмотра, которая выделяет его среди аналогов.
Код:
<?php
/**
* Plugin Name: Social Share Buttons (ВК + ОК)
* Description: Плавающие кнопки для публикации в ВКонтакте и Одноклассниках
* Version: 1.1.1
* Author: Ваше имя
*/
if (!defined('ABSPATH')) {
exit;
}
class SocialSharePlugin {
public function __construct() {
add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
add_action('wp_footer', array($this, 'render_buttons'));
}
public function enqueue_scripts() {
wp_add_inline_style('wp-block-library', $this->get_styles());
wp_add_inline_script('jquery', $this->get_scripts());
}
private function get_styles() {
return '
#social-share-container {
position: fixed;
left: -90px;
top: 50%;
transform: translateY(-50%);
z-index: 999999;
background: white;
padding: 14px 10px;
border-radius: 0 14px 14px 0;
box-shadow: 0 4px 25px rgba(0,0,0,0.2);
transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
opacity: 0;
pointer-events: none;
}
#social-share-container.show {
left: 0;
opacity: 1;
pointer-events: auto;
}
#social-share-container.hiding {
left: -90px;
opacity: 0;
pointer-events: none;
}
.social-share-title {
font-size: 10px;
color: #999;
text-align: center;
margin-bottom: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.social-share-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.social-share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
position: relative;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: 900;
color: white;
letter-spacing: 0.5px;
}
.social-share-btn:hover {
transform: scale(1.12) rotate(-2deg);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.social-share-btn:active {
transform: scale(0.92);
}
.vk-btn {
background: #4C75A3;
}
.vk-btn:hover {
background: #3A5E82;
}
.ok-btn {
background: #F58220;
}
.ok-btn:hover {
background: #D66E1A;
}
.social-share-close {
position: absolute;
top: -10px;
right: -10px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid white;
background: #ff4444;
color: white;
font-size: 14px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
line-height: 1;
font-weight: bold;
box-shadow: 0 2px 8px rgba(255,68,68,0.3);
}
#social-share-container:hover .social-share-close {
display: flex;
}
@media (max-width: 768px) {
#social-share-container {
top: auto;
bottom: 100px;
transform: none;
left: -80px;
border-radius: 0 14px 14px 0;
padding: 12px 8px;
}
.social-share-btn {
width: 42px;
height: 42px;
font-size: 16px;
}
.social-share-title {
font-size: 9px;
}
}
';
}
private function get_scripts() {
return '
jQuery(document).ready(function($) {
var container = $("#social-share-container");
var pageKey = "socialShareShown_" + window.location.pathname;
var hasShown = sessionStorage.getItem(pageKey);
var hideTimeout = null;
var isHovering = false;
var isVisible = false;
var startTime = null;
var isHiddenForever = false;
function showButtons() {
if (hasShown || isHiddenForever) return;
container.removeClass("hiding").addClass("show");
isVisible = true;
startTime = Date.now();
hideTimeout = setTimeout(function() {
if (!isHovering && isVisible) {
hideButtons();
}
}, 8000);
}
function hideButtons() {
if (!isVisible) return;
container.removeClass("show").addClass("hiding");
isVisible = false;
isHiddenForever = true;
sessionStorage.setItem(pageKey, "true");
if (hideTimeout) {
clearTimeout(hideTimeout);
hideTimeout = null;
}
}
setTimeout(showButtons, 2000);
var mouseMoved = false;
$(document).on("mousemove", function(e) {
if (!isVisible || isHiddenForever) return;
if (mouseMoved) return;
mouseMoved = true;
if (startTime) {
var elapsed = Date.now() - startTime;
if (elapsed > 4000) {
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function() {
if (!isHovering && isVisible) {
hideButtons();
}
}, 4000);
} else {
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function() {
if (!isHovering && isVisible) {
hideButtons();
}
}, 8000 - elapsed);
}
}
});
container.on("mouseenter", function() {
if (!isVisible) return;
isHovering = true;
if (hideTimeout) {
clearTimeout(hideTimeout);
hideTimeout = null;
}
});
container.on("mouseleave", function() {
if (!isVisible) return;
isHovering = false;
if (startTime) {
var elapsed = Date.now() - startTime;
if (mouseMoved) {
if (elapsed > 4000) {
hideTimeout = setTimeout(function() {
if (!isHovering && isVisible) {
hideButtons();
}
}, 4000);
} else {
hideTimeout = setTimeout(function() {
if (!isHovering && isVisible) {
hideButtons();
}
}, 8000 - elapsed);
}
} else {
hideTimeout = setTimeout(function() {
if (!isHovering && isVisible) {
hideButtons();
}
}, 8000 - elapsed);
}
}
});
// === УНИВЕРСАЛЬНАЯ КНОПКА ВКОНТАКТЕ (ПРЕДПРОСМОТР) ===
$(".vk-share-btn").on("click", function(e) {
e.preventDefault();
var url = encodeURIComponent(window.location.href);
var title = encodeURIComponent(document.title);
var shareUrl = "https://vk.com/share.php?url=" + url + "&title=" + title + "&description=" + title;
window.open(shareUrl, "_blank", "width=600,height=500");
setTimeout(hideButtons, 500);
});
// === УНИВЕРСАЛЬНАЯ КНОПКА ОДНОКЛАССНИКИ (ПРЕДПРОСМОТР) ===
$(".ok-share-btn").on("click", function(e) {
e.preventDefault();
var url = encodeURIComponent(window.location.href);
var shareUrl = "https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st.shareUrl=" + url;
window.open(shareUrl, "_blank", "width=600,height=500");
setTimeout(hideButtons, 500);
});
$(".social-share-close").on("click", function(e) {
e.stopPropagation();
hideButtons();
sessionStorage.setItem(pageKey, "true");
});
});
';
}
public function render_buttons() {
?>
<div id="social-share-container">
<button class="social-share-close" aria-label="Закрыть">✕</button>
<div class="social-share-title">Поделиться</div>
<div class="social-share-buttons">
<!-- ВКонтакте (универсальный предпросмотр) -->
<button class="social-share-btn vk-btn vk-share-btn" aria-label="Поделиться ВКонтакте">
ВК
</button>
<!-- Одноклассники (универсальный предпросмотр) -->
<button class="social-share-btn ok-btn ok-share-btn" aria-label="Поделиться Одноклассниками">
ОК
</button>
</div>
</div>
<?php
}
}
new SocialSharePlugin();
?>Это идеальное решение для владельцев сайтов, которые хотят получить максимум социального трафика, не перегружая свой ресурс и не раздражая посетителей. Попробуйте, и вы увидите разницу!
Скачать архив social-share-plugin
Добавить комментарий