maxulyanov / socialbuttons

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

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

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

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