social-buttons

Готовое решение для добавления кнопок социальных сетей на сайт.

Usage no npm install needed!

<script type="module">
  import socialButtons from 'https://cdn.skypack.dev/social-buttons';
</script>

README

Social Buttons

Готовое решение для добавления кнопок социальных сетей на сайт.

Быстрый старт

  • Подключить SocialButtons.css и SocialButtons.js или их минифицированные версии
  • Создать экземпляр кнопок с помощью вызова new SocialButtons, передав нужные параметры
  • При необходимости подключить es6-promise.js
  • Никакие дополнительные библиотеки (например jQuery) для работы не требуются
  • Установить можно так же из NPM:
    npm install social-buttons

Какие сервисы поддерживаются?

На данный момент это - Вконтакте, Facebook, Google+, Одноклассники, Twitter, Мой Мир, Livejournal, Linkedin
Функциональные названия:
['facebook', 'vkontakte', 'odnoklassniki', 'googleplus', 'twitter', 'moimir', 'lj', 'linkedin']

Параметры

services - Массив сервисов, кнопки которых должны быть сгенерированы в текущем виджете
components - Какие элементы кнопки должны быть отрисованы.
Доступные значения: icon, text, count (положение элементов в массиве не имеет значения)
counter - Отображать ли счетчики публикаций. По умолчанию false
outputCountCallback - Функция для изменения отображения счетчика, ожидается, что будет возращен результат модификации.
В единственном параметре можно получить текущий счетчик. theme - Варианты отображения кнопок. Изначально доступно несколько тем: default, color
Вы так же можете создать свою тему, добавив соответствующие стили, сами кнопки получат постфикс вида - b-social-button--yourtheme
showZeros - Показывать ли счетчики, если они равны нулю. По умолчанию - false
buttonSize - Размер кнопок: small, middle, large или любое другое значение, которое может быть преобразовано в число
id - Уникальный идентификатор DOM элемента, к которому будет привязан и отрисован виджет кнопок
url - URL расшариваемой публикации, параметр имеет наивысшей приоритет, если он не указан значение берется из meta тега property="og:url, по умолчанию текущий url
title - Заголовок расшариваемой публикации, параметр имеет наивысше йприоритет, если он не указан значение берется из meta тега property="og:url, по умолчанию title текущей страницы
description - Описание расшариваемой публикации, параметр имеет наивысшей приоритет, если он не указан значение берется из meta тега property="og:description
image - Изображение расшариваемой публикации, параметр имеет наивысшей приоритет, если он не указан значение берется из meta тега property="property="og:image
helpers - Объект кастомизации кнопок виджета, для каждой социальной сети содержит дочерний объект, который доступен по ключу (названию сервиса), например "vkontakte", который в свою очередь имеет следующее поля:

  • text - Текст кнопки
  • title - Тег title для кнопки
  • counter - Пользовательская функция, переопределяет сервис получение счетчика по-умолчанию
  • customClass - Дополнительный класс для кастомизации

callbacks - Объект с функциями, которые будут вызваны при наступлении определенных событий, по-умолчанию все функции объекта callbacks равны - NULL.

  • create - виджет успешно создан
  • share - попытка расшаривания публикации
    Так же Для каждой функции при создании в параметре можно получить полезные данные о событии

Рекомендации

Используйте Open Graph разметку на странице.
Это поможет подхватывать социальным сетям правильные данные при публикации.
<meta property="og:url" content="share url">
<meta property="og:title" content="share title">
<meta property="og:description" content="share content">
<meta property="og:image" content="share image">

Проблемы и решения

Скрипт не работает, не отображается ни одна кнопка

Стоит проверить консоль:
Ошибка: #yourID not found!
Решение:

  • Вызов new SocialButtons необходимо осуществить после загрузки DOM дерева - DOMContentLoaded
  • Проверьте наличие элемента c ID - yourID на вашей странице

Ошибка: Uncaught ReferenceError: Promise is not defined
Решение: Подключите файл es6-promise.js

Не отображается счетчик публикаций

Некоторые социальные сети не позволяют получить количество публикаций (шаринга), например у Twitter, такая возможность отсутствует

Публикуется неправильный контент

Выполните рекомендации из предыдущего раздела

Кроссбраузерность

Все современные браузеры.
IE начиная с 9 версии и выше.

Демонстрация

Посмотреть пример