Всем привет! В этом материале рассмотрим небольшую и простую javascript библиотеку Sharer.js , которая позволит вам создавать свои собственные кнопки "поделиться".

Как создать кнопку поделиться.

Всем привет! В этом материале рассмотрим небольшую и простую javascript библиотеку Sharer.js, которая позволит вам создавать свои собственные кнопки "поделиться".

Сейчас на многих сайтах вы можете встретить кнопки "поделиться", которые позволяют рассказать друзьям о какой-то записи в разных социальных сетях. Это достаточно удобно, и поэтому была создана Sharer.jsjavascript библиотека, которая позволит вам очень быстро и просто создавать свои собственные настриваемые кнопки "поделиться" для более чем 20 социальных сетей! Отдельным плюсом данной библиотеки будет то, что она не имеет зависимостей и достаточно мало весит.

Итак, что вам нужно сделать, чтобы начать пользоваться?

1) Зайдите на официальный сайт

2) Установите библиотеку, используя NPM, Bower или скачав ее самостоятельно

npm install sharer.js // NPM
bower install sharerjs // Bower

3) Подключите последнюю сжатую версию на сайт

<script src="path/to/sharer.min.js"></script>

Или используйте CDN

<script src="https://cdn.jsdelivr.net/sharer.js/latest/sharer.min.js"></script>

Если вы используете Meteor, можете сделать так

meteor add ellisonleao:sharerjs

Теперь давайте рассмотрим, как добавить кнопку "поделиться" для ВКонтакте

<button class="sharer 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>

Вам доступны следующие атрибуты:

  • data-url
  • data-title
  • data-image(необязательно) – ссылка на картинку
  • data-caption(необязательно)

Вот и все! Кнопки для других социальных сетей создаются аналогичным образом.

А у меня на этом все. Надеюсь, библиотека вам пригодится! Спасибо за внимание!