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 версии и выше.

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

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