Всем привет! Про актуальность кнопок «Поделиться» на сайте думаю говорить не нужно, т.к. это является неотъемлемым элементом на многих ресурсах в сети. Для этого существуют множество сервисов, которые удобно использовать для быстрого подключения у себя на сайте. Так думал и я, до определённого момента, пока не начались с ними проблемы. В моём случае были установлены социальные кнопки от Pluso. Сервис вполне популярный, однако, в один прекрасный момент кнопки перестали отображаться на сайте. В ходе недолгих разбирательств было выяснено, что у домена закончился срок действия сертификата, и браузер соответственно блокировал подключение (CORS).
В самом деле, это мелочь, а не проблема, и продлить сертификат вопрос пары минут — подумал я, и решил написать владельцам сервиса, чтобы продлили сертификат. Прошло время, но изменений по сервису не последовало. Кнопки продолжали блокироваться браузером, сертификат висел просроченным длительное время, и судя по всему сервис просто забросили.
Такой расклад показал актуальность установки своих кнопок на сайт, вместо сторонних сервисов. На самом деле, такая необходимость может возникнуть с любыми сторонними сервисами. И чем больше у вас подключается элементов с чужих ресурсов, тем больше у вас становится зависимость от качества работы последних. Ну да ладно, это уже тема для отдельного разговора. Давайте поговорим о том, как можно сделать свои социальные кнопки на сайт.
К счастью, изобретать колесо с нуля не пришлось, т.к. уже есть готовые решения, которые могут позволить самостоятельно реализовать кнопки на сайте. Речь идёт про библиотеку Sharer.js, которая прекрасно справляется с решением этой задачи.
Проект живёт по этому адресу:
https://ellisonleao.github.io/sharer.js/
На странице проекта есть небольшой мануал по подключению данной библиотеки на свой сайт. Традиционно, установка библиотеки может быть выполнена через пакетный менеджер NPM, Bower либо установить его самостоятельно.
Установка Sharer.js с помощью NPM
npm install sharer.js
Установка Sharer.js с помощью Bower
bower install sharerjs
Для ручной установки достаточно скачать файл библиотеки с GitHub:
https://github.com/ellisonleao/sharer.js
После чего следует подключить библиотеку у себя на сайте, в заголовке страницы между тегами head.
<script src="path/to/sharer.min.js"></script>
Если решили подключить через CDN, то можно так:
<script src="https://cdn.jsdelivr.net/sharer.js/latest/sharer.min.js"></script>
После подключения библиотеки Sharer.js мы можем поговорить о самих кнопках. Давайте рассмотрим некоторые из популярных социальных кнопок:
Кнопка «поделиться» в Twitter
<button class="button" data-sharer="twitter" data-title="Checkout Sharer.js!" data-hashtags="awesome, sharer.js" data-url="https://ellisonleao.github.io/sharer.js/">Share on Twitter</button>
Кнопка «поделиться» в Facebook
<button class="button" data-sharer="facebook" data-hashtag="hashtag" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>
Кнопка «поделиться» в Вконтакте
<button class="button" data-sharer="vk" data-caption="Sharer.js is the ultimate sharer js lib" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on VK</button>
Кнопка «поделиться» через Telegram
<button class="button" data-sharer="telegram" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/" >Share on Telegram</button>
Кнопка «поделиться» через Email
<button class="button" data-sharer="email" data-title="Awesome Url" data-url="https://ellisonleao.github.io/sharer.js/" data-subject="Hey! Check out that URL" data-to="some@email.com">Share via Email</button>
Подобным образом может добавляться множество кнопок. Подробный список кнопок вы можете посмотреть на странице проекта, там их целое множество. Есть общие параметры для этих кнопок, которые вам предстоит подставлять при загрузке вашей страницы.
Атрибуты кнопок
data-url — Необходимо вставить URL текущей страницы;
data-title — Заголовок для поста;
data-image (необязательно) – Ссылка на картинку;
data-caption (необязательно) – Подпись;
Дополнительные атрибуты для соц сетей, таких как Twitter и Facebook:
data-hashtag – хештеги для публикации;
Дополнительные атрибуты для кнопки Email:
data-subject — Тема письма;
to – Получатель (значение по умолчанию);
В чём плюсы подобного решения. Подключать скрипт со своего ресурса иногда бывает весьма полезно, и связано это со стабильностью работы. Другой и жирный плюс – это возможность самостоятельной стилизации кнопок под ваш проект. Так же вы можете задавать нужные заголовки, описания и фото, хештеги (в случае с Twitter-ом). Собственно, установил данные кнопки на свой проект, и пока всем доволен.
