Плагин для социальных сетей, разработанный специально для Publii CMS, предоставляет веб-сайтам широкую интеграцию с социальными сетями. Он поддерживает широкий спектр из 39 различных платформ и улучшает видимость контента и вовлечение пользователей благодаря настраиваемым и визуально привлекательным кнопкам для социальных сетей. С помощью настроек цвета платформы вы можете легко подбирать цвета кнопок для различных платформ социальных сетей, не требуя ручной настройки цвета.

Установка и совместимость

Чтобы использовать плагин для социальных сетей, убедитесь, что ваша Publii CMS обновлена до версии 0.43.1 или выше. Этот плагин разработан для совместимости с последними версиями темы Publii, особенно с теми, которые будут выпущены примерно в октябре -ноябре 2023 года.

Чтобы добавить поддержку плагина социального обмена в ваши старые или пользовательские темы Publii, выполните следующие действия:

1. Найдите соответствующий файл: откройте проводник и перейдите в Documents/Publii/sites/YOUR_SITE/input/themes/YOUR_THEME каталог, где YOUR_SITE указано название вашего сайта, а YOUR_THEME - папка с темой, которую вы используете в данный момент.
2. Отредактируйте файл post.hbs: Используйте предпочитаемый вами редактор кода, чтобы открыть post.hbs файл, расположенный в папке вашей темы.
3. Вставьте код социального обмена:
   1. Найдите подходящее место в post.hbs файле, где вы хотите разместить кнопки социальных сетей. Обычно он размещается в нижней части шаблона публикации и выглядит следующим образом: {{> share-buttons}}
   2. Замените приведенный выше код пользовательским фрагментом кода для социальных сетей: {{{@customSocialSharing}}}.

   Например, ваш код может выглядеть примерно так:

   {{#if @config.post.displayShareButtons}}
     {{#checkIfAll @plugins.socialSharing @plugins.socialSharing.state}}
       <div class="post__share">
           {{{@customSocialSharing}}}
       </div>
     {{/checkIfAll}}          
   {{/if}}

Общие настройки

Режимы отображения кнопок

• Только значок: отображает только значок социальной платформы, обеспечивая чистый и минималистичный внешний вид. Идеально подходит для веб-сайтов с современным, лаконичным дизайном.
• Только текст: показывает только название социальной платформы. Этот режим полезен пользователям, которые предпочитают текстовые надписи для наглядности и доступности.
• Значок и текст: Сочетает в себе значок и текстовую метку, предлагая комплексное представление, которое является одновременно визуально привлекательным и информативным.

Варианты макета

• Горизонтальная компоновка: выравнивает кнопки по линейному ряду. Подходит для верхних и нижних колонтитулов или любого горизонтального пространства в макете вашего веб-сайта.
• Вертикальная компоновка: кнопки располагаются столбцом, что идеально подходит для боковых панелей или узких вертикальных пространств, таких как всплывающие окна.

Типы кнопок

• Кнопки ссылок: Эти кнопки, оформленные в виде текстовых ссылок со значками, предлагают простой и минималистичный подход. Цвет текста и значка можно настроить в соответствии с тематикой вашего сайта.
• Контурные кнопки: Эти кнопки имеют четкую рамку, придающую элегантный и определенный вид. Цвет рамки можно настроить в соответствии с дизайном вашего сайта или цветовой схемой социальной платформы.
• Сплошные кнопки: Сплошные кнопки имеют смелый, насыщенный цвет, привлекающий больше внимания. Они включают функцию "Регулировки яркости при наведении курсора мыши", позволяющую кнопке слегка менять цвет при наведении курсора мыши, улучшая взаимодействие.

Настройка цвета

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

В зависимости от выбранного вами типа кнопки (ссылка, контурная или сплошная) у вас будет возможность гибко настраивать различные элементы кнопок с цветовыми вариантами, специфичными для каждой платформы:

Кнопки ссылок:

• Текст: Выберите цвет текста кнопок со ссылками.
• Значок: Выберите цвет значков внутри кнопок ссылок.
• Как для значков, так и для текста: Примените раскраску к тексту и значкам внутри кнопок ссылок.

Описанные кнопки:

• Граница: Если вы используете выделенные кнопки, вы можете выбрать этот параметр, чтобы раскрасить границу.
• Текст и значки: Эта опция позволяет раскрасить текст и значки выделенных кнопок.
• Границы, текст и значки: Эта всеобъемлющая опция позволяет вам раскрашивать границы, текст и значки для выделенных кнопок.

Сплошные кнопки:

• Фон: Вы также можете раскрасить фон сплошных кнопок, предоставляя дополнительные возможности настройки.

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

Социальные платформы

В этом разделе вы можете выбрать и настроить различные платформы социальных сетей для обмена контентом со своего веб-сайта. Это позволяет изменять порядок социальных кнопок с помощью метода перетаскивания и переименования кнопок. Например, вы можете переименовать кнопку с "Facebook" на "Поделиться с Facebook" для более точного руководства пользователя.

Этот раздел не только позволяет выбирать кнопки для обмена в социальных сетях, но и предоставляет несколько дополнительных опций, которые необходимы для конкретных платформ.

• Идентификатор приложения Facebook: Введите здесь свой идентификатор приложения Facebook. Этот идентификатор необходим для включения таких функций, как обмен через Facebook Messenger.
• Дескриптор Twitter: Определите дескриптор вашей учетной записи Twitter. Этот дескриптор добавляется при обмене контентом через Twitter, например, "через @TwitterHandle". Если оставить поле пустым, используется дескриптор автора в Twitter.
• Текст предупреждения в буфере обмена: Настройте текст предупреждения при копировании URL-адреса в буфер обмена. Текст по умолчанию - "URL скопирован в буфер обмена".
• Метка домена Mastodon: Настройте текст метки для поля ввода домена Mastodon. Эта метка отображается как приглашение, когда пользователям предлагается ввести свой домен Mastodon.

Варианты оформления

• Цвет текста: Позволяет настраивать цвет текста на кнопках, обеспечивая соответствие цветовой гамме вашего веб-сайта.
• Цвет текста при наведении курсора мыши: Определяет цвет текста при наведении курсора мыши на кнопку.
• Цвет значка: Настраивает цвет значков внутри кнопки. Эта настройка доступна при соблюдении определенных стилей кнопок и условий платформы по цветовому оформлению.
• Цвет значка при наведении курсора мыши: Изменяет цвет значка при наведении курсора мыши, улучшая взаимодействие с пользователем.
• Цвет текста в рамке: изменяет цвет текста для кнопок с рамками. Этот параметр используется в зависимости от стиля кнопки и условий использования цвета границ для конкретной платформы.
• Цвет фона: Задает цвет фона кнопок, обеспечивая гармоничную интеграцию с дизайном сайта. Это зависит от стиля кнопок и настроек цвета фона платформы.
• Настройка яркости: Изменяет яркость цвета фона социальной платформы при наведении курсора мыши, предлагая настраиваемый визуальный эффект. Эта функция позволяет осветлять или затемнять цвет кнопки при наведении курсора мыши, обеспечивая динамическую визуальную обратную связь с пользователями.
• Ширина границы: Позволяет устанавливать ширину границы для кнопок, предоставляя способ настроить эстетику кнопок на основе требований дизайна.
• Эффект наведения на кнопку: Выберите эффект наведения на кнопки. Доступные опции включают: Нет, Перевод вверх, масштабирование, поворот, перекос, масштабирование и перевод, перевод XY, поворот и масштабирование и пользовательский. Эта функция улучшает взаимодействие, позволяя выполнять разнообразные анимации и преобразования при наведении курсора мыши.
• Заполнение кнопок: Настраивает заполнение вокруг кнопок, обеспечивая удобное расстояние и соответствие общему дизайну.
• Радиус границы кнопки: Определяет радиус границы кнопок, позволяя создавать закругленные или острые края в зависимости от стилистических предпочтений.
• Семейство шрифтов: Выберите семейство шрифтов для текста кнопки, обеспечивая типографское соответствие дизайну вашего сайта. Этот параметр поддерживает официальные шрифты темы Publii и позволяет настраивать спецификации шрифтов. Он совместим с CSS-шрифтовыми переменными темы, что позволяет легко согласовать его с общей эстетикой дизайна вашего веб-сайта.
• Размер шрифта: Настраивает размер шрифта для текста кнопки, приводя его в соответствие с типографикой вашего веб-сайта для получения целостного внешнего вида.

Расширенная настройка

• CSS-класс контейнера: Определите пользовательский CSS-класс для контейнера. Значение по умолчанию - "scl-container". Этот параметр обеспечивает расширенный стиль и управление макетом.
• Класс CSS кнопок: Задайте определенный класс CSS для кнопок. Значение по умолчанию - "scl-btn". Полезно при применении пользовательских стилей и поведений к кнопкам.
• CSS-класс всплывающего контейнера темы: Укажите имя класса CSS для всплывающего контейнера темы со значением по умолчанию js-post__share-popup. Сохраняйте этот класс по умолчанию, если только вы не используете пользовательское всплывающее окно для отображения кнопок социальных сетей с названием вашего класса. Имя класса по умолчанию является неотъемлемой частью официальных тем Publii, где кнопки социальных сетей отображаются во всплывающем окне, активируемом кнопкой "Поделиться". Изменяйте этот класс, только если вы используете свою реализацию popup с другим именем класса, поскольку это крайне важно для обеспечения корректного функционирования плагина в таких индивидуальных настройках.
• Всплывающее окно для социальных сетей: Включите или отключите всплывающее окно для кнопок социальных сетей. Эта функция улучшает взаимодействие с пользователем, предоставляя специальный интерфейс для обмена.
• Ширина всплывающего окна: Определяет ширину всплывающего окна в пикселях. Этот параметр активен, только если включено всплывающее окно для социальных сетей.
• Высота всплывающего окна: Установите высоту всплывающего окна в пикселях. Эта конфигурация применима, когда активна функция всплывающего окна для социальных сетей.

Оптимизированная производительность: интеллектуальное отображение значков и выборочная загрузка CSS

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

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

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

Вывод HTML и доступность

Плагин отличается производительностью и демонстрирует приверженность доступности. Это видно по создаваемому им динамически генерируемому HTML-коду, который включает в себя специфические атрибуты ARIA (доступные расширенные интернет-приложения), адаптированные к типу кнопок.

Например, в зависимости от выбранного варианта отображения ("Только значок", "только текст" или "Оба варианта") плагин добавляет необходимые атрибуты ARIA для улучшения доступности. Этот подход особенно полезен для программ чтения с экрана и вспомогательных технологий, гарантируя, что все пользователи могут эффективно взаимодействовать с кнопками социального обмена, независимо от их способностей.

Ниже приведен пример HTML-кода, сгенерированного плагином для трех разных платформ, демонстрирующий, как он адаптируется к различным сценариям, уделяя приоритетное внимание доступности и производительности.

<!-- Example of generated HTML for three platforms -->
<div class="scl-container">
    <!-- Diaspora Button -->
    <a href="https://share.diasporafoundation.org/..." class="scl-btn p-diaspora" aria-label="Diaspora">
        <svg width="24" height="24" aria-hidden="true" ...></svg>
        <span>Diaspora</span>
    </a>
    <!-- Digg Button -->
    <a href="https://digg.com/submit?url=..." class="scl-btn p-digg" aria-label="Digg">
        <svg width="40" height="24" aria-hidden="true" ...></svg>
        <span>Digg</span>
    </a>
    <!-- Email Button -->
    <a href="mailto:?subject=..." class="scl-btn p-email" aria-label="Email">
        <svg width="24" height="24" aria-hidden="true" ...></svg>
        <span>Email</span>
    </a>
</div>

Хотя плагин предлагает широкие возможности оформления через свой пользовательский интерфейс, он позволяет продвинутым пользователям напрямую манипулировать стилями с помощью переменных CSS. Эти переменные генерируются динамически и могут быть скорректированы, чтобы адаптировать внешний вид кнопок общего доступа к конкретным потребностям веб-сайта.

Ниже приведен список переменных CSS, доступных для настройки, классифицированных по различным стилям кнопок: "Ссылки", "Контурные кнопки" и "Сплошные кнопки". Каждая категория включает переменные для цветов, состояний наведения, цветов значков, границ и многого другого, что позволяет создавать детальный и точный стиль.

/* Links */

  --scl-link-color: Color of the link text;
  --scl-link-color-hover: Hover color of the link text;
  --scl-link-icon-color: Color of the link icon;
  --scl-link-icon-color-hover: Hover color of the link icon;


/* Outlined buttons */

  --scl-outlined-color: Text color for outlined button;
  --scl-outlined-color-hover: Hover text color for outlined button;
  --scl-outlined-icon-color: Icon color for outlined button;
  --scl-outlined-icon-color-hover: Hover icon color for outlined button;
  --scl-outlined-border-color: Border color for outlined button;
  --scl-outlined-border-color-hover: Hover border color for outlined button;
  --scl-outlined-border-width: Border width for outlined button;
  --scl-btn-padding: Padding for button;


/* Solid buttons */

  --scl-btn-bg: Background color of the button;
  --scl-btn-bg-hover: Hover background color of the button;
  --scl-btn-txticon-color: Text and icon color for button with background;
  --scl-btn-txticon-color-hover: Hover text and icon color for button with background;
  --scl-btn-padding: Padding for button with background;
  --scl-hsla-luminance: Luminance adjustment for button with background;


/* General Variables */

  --scl-container-gap: Gap between container elements;
  --scl-container-direction: Layout direction of the container (row/column);
  --scl-btn-hover-effect: Hover effect for buttons;
  --scl-btn-gap: Gap between buttons;
  --scl-btn-transition: Transition effect for buttons;
  --scl-btn-border-radius: Border radius for buttons;
  --scl-btn-font-family: Font family for buttons;
  --scl-btn-font-size: Font size for buttons;
  --scl-icon-size: Size of the icon;

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