Создаём идеальный плагин кнопок «Поделиться» для WordPress

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

📌 Проблема типовых решений

Большинство плагинов для социальных кнопок страдают одними и теми же недостатками:

• Перегруженность и медленная работа — многие решения тащат тяжёлые библиотеки, скрипты и стили, замедляя загрузку сайта.
• Отсутствие гибких настроек показа — стандартные плагины часто не умеют тонко настраивать поведение: когда появляться, сколько висеть и как реагировать на действия пользователя.
• Навязчивость — кнопки постоянно висят на странице, отвлекают и мешают читать контент.
• Зависимость от внешних сервисов — многие используют сторонние скрипты (Яндекс.Поделиться, share42.com), которые могут тормозить или стать недоступными.
• Сложность интеграции — для настройки нужно лезть в дебри админки или править код.

Наш подход решает все эти проблемы.

🚀 Наш плагин: Лёгкость, Ум и Эффективность

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

1. Идеальный тайминг: Появляется, когда пользователь готов

Плагин не показывает кнопки сразу при загрузке страницы, пока посетитель ещё не успел ознакомиться с содержанием. Вместо этого он появляется через 45 секунд — идеальный момент, когда пользователь уже изучил материал и может захотеть им поделиться.

2. Минимализм в действии: Показывается 1 раз и только при необходимости

Кнопка работает по принципу «умного помощника»:

• Она появляется только один раз за посещение страницы — не надоедает при обновлении или возвращении.
• Если пользователь не двигает мышью, кнопка остаётся на экране до 30 секунд — даёт время заметить и нажать.
• Как только пользователь начинает взаимодействие (двигает мышью), плагин даёт ещё 4 секунды на клик, а затем плавно исчезает.
• Если посетитель наводит курсор на кнопку, таймер останавливается — человек явно заинтересовался, и мы не мешаем ему принять решение.

Эта поведенческая модель не раздражает, не отвлекает от контента и при этом эффективно выполняет свою задачу.

3. Универсальный «Предпросмотр»: Лучше, чем стандартный шеринг

Обычные кнопки «Поделиться» просто открывают окно с формой, где пользователь может вручную написать текст. Наш плагин использует режим предпросмотра (WidgetSharePreview) для ВКонтакте и Одноклассников.

Чем это лучше?

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

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

4. Техническое совершенство: Лёгкость и независимость

В отличие от монструозных плагинов, наше решение:

• Не использует внешние скрипты — весь код находится внутри плагина, он не зависит от работоспособности сторонних сервисов (Яндекс, share42.com).
• Не тащит лишние библиотеки — помимо встроенного в WordPress jQuery, не подключается ничего лишнего.
• Не создаёт лишних запросов к базе данных или внешним API.
• Имеет минимальный вес — один PHP-файл со стилями и скриптами внутри, который не замедляет ваш сайт.

5. Простота и понятность для пользователя

Кнопки имеют интуитивно понятный дизайн с подписями «ВК» и «ОК». Это ясно, лаконично и не требует дополнительных пояснений. Адаптивный дизайн обеспечивает корректное отображение на любых устройствах — от больших мониторов до смартфонов.

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

📄 Код плагина:

<?php
/**
 * Plugin Name: SocialShareButtons (ВК + ОК)
 * Description: Плавающие кнопки для публикации в ВКонтакте и Одноклассниках
 * Version: 1.0.8
 * 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();

                // === 30 СЕКУНД — И ИСЧЕЗАЕТ ===
                hideTimeout = setTimeout(function() {
                    if (!isHovering && isVisible) {
                        hideButtons();
                    }
                }, 30000);
            }

            function hideButtons() {
                if (!isVisible) return;

                container.removeClass("show").addClass("hiding");
                isVisible = false;
                isHiddenForever = true;
                sessionStorage.setItem(pageKey, "true");

                if (hideTimeout) {
                    clearTimeout(hideTimeout);
                    hideTimeout = null;
                }
            }

            // === ПОЯВЛЯЕТСЯ ЧЕРЕЗ 45 СЕКУНД ===
            setTimeout(showButtons, 45000);

            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();
                            }
                        }, 30000 - 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();
                                }
                            }, 30000 - elapsed);
                        }
                    } else {
                        hideTimeout = setTimeout(function() {
                            if (!isHovering && isVisible) {
                                hideButtons();
                            }
                        }, 30000 - 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.zip