Skip to content

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

License

Notifications You must be signed in to change notification settings

maxulyanov/SocialButtons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

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