Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/maxulyanov/SocialButtons

Готовое решение для добавления кнопок социальных сетей на сайт
https://github.com/maxulyanov/SocialButtons

facebook odnoklassniki share shared-services social social-buttons twitter vkontakte

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README 

        
# Social Buttons



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



[![](http://m-ulyanov.github.io/social-buttons/social-buttons-promo.png)](https://github.com/M-Ulyanov/SocialButtons)



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

- Подключить 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 разметку на странице. 


Это поможет подхватывать социальным сетям правильные данные при публикации.


``


``


``


``



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

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

Стоит проверить консоль:


Ошибка: `#yourID not found!`


Решение: 


- Вызов new SocialButtons необходимо осуществить после загрузки DOM дерева - DOMContentLoaded


- Проверьте наличие элемента c ID - yourID на вашей странице



Ошибка: `Uncaught ReferenceError: Promise is not defined`


Решение: Подключите файл `es6-promise.js`



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

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


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



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



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

Все современные браузеры.


IE начиная с 9 версии и выше.



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

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