Кнопки «расшаривания» в социальные сети

В кнопках расшаривания в социальные сети SIMAI Framework вы можете изменять внешний вид в соотвествии с вашими задачами.

Структура кнопок

Для того чтобы создать кнопки расшаривания вам необходимо создать следующую структуру

<div class="sf-share" data-url="Адрес расшаиваемой страницы">

	<div class="sf-share-btn" data-service="ID социальной сети">
		<div class="sf-share-icon">Иконка</div>
		<div class="sf-share-title">Описание</div>
		<div class="sf-share-counter">Счетчик</div>
	</div>
</div>

Кнопки поддерживаются для следующих социальных сетей:

  • facebook - Facebook
  • vkontakte - Вконтакте
  • twitter - Facebook
  • plusone - Google Plus
  • pinterest - Pinterest
  • odnoklassniki - Одноклассники
  • mailru - МойМир

Код социальной сети указывается в кнопке социальной сети, в дата-атрибуте data-service. Если вам не нужна какая либо социальная сеть, то для нее не нужно указывать код кнопки. Также в самой кнопке вы самостоятельно решаете какие блоки (иконка, текст, счетчик) вам нужны для отображения.

Примеры реализации

Использутей иконочные шрифты и модификаторы, чтобы создать любой внешний вид кнопок

Кнопки с иконкой, описанием и счетчиком

Поделиться
в Фейсбуке
10
Поделиться
в ВКонтакте
5
Поделиться
в Твиттер
125
Поделиться
в ГуглПлюс
125
Поделиться
в Пинтерест
18
Поделиться
в Одноклассники
87
Поделиться
в МойМир
87
<div class="sf-share" data-url="https://simai.studio">
  <div class="sf-share-btn bg-fb theme-dark mr-2 mb-2" data-service="facebook">
    <div class="sf-share-icon p-2"><i class="fab fa-facebook-f fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Фейсбуке</div>
    <div class="sf-share-counter p-2 t-2">10</div>
  </div>
  <div class="sf-share-btn bg-vk theme-dark mr-2 mb-2" data-service="vkontakte">
    <div class="sf-share-icon p-2"><i class="fab fa-vk fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в ВКонтакте</div>
    <div class="sf-share-counter p-2 t-2">5</div>
  </div>
  <div class="sf-share-btn bg-tw theme-dark mr-2 mb-2" data-service="twitter">
    <div class="sf-share-icon p-2"><i class="fab fa-twitter fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Твиттер</div>
    <div class="sf-share-counter p-2 t-2">125</div>
  </div>
  <div class="sf-share-btn bg-gp theme-dark mr-2 mb-2" data-service="plusone">
    <div class="sf-share-icon p-2"><i class="fab fa-google-plus-g fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в ГуглПлюс</div>
    <div class="sf-share-counter p-2 t-2">125</div>
  </div>
  <div class="sf-share-btn bg-pr theme-dark mr-2 mb-2" data-service="pinterest">
    <div class="sf-share-icon p-2"><i class="fab fa-pinterest-p fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Пинтерест</div>
    <div class="sf-share-counter p-2 t-2">18</div>
  </div>
  <div class="sf-share-btn bg-ok theme-dark mr-2 mb-2" data-service="odnoklassniki">
    <div class="sf-share-icon p-2"><i class="fab fa-odnoklassniki fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Одноклассники</div>
    <div class="sf-share-counter p-2 t-2">87</div>
  </div>
  <div class="sf-share-btn bg-mr theme-dark mr-2 mb-2" data-service="mailru">
    <div class="sf-share-icon p-2"><i class="far fa-at fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в МойМир</div>
    <div class="sf-share-counter p-2 t-2">87</div>
  </div>
</div>

Кнопки с описанием и счетчиком

Поделиться
в Фейсбуке
10
Поделиться
в ВКонтакте
5
Поделиться
в Твиттер
125
Поделиться
в ГуглПлюс
125
Поделиться
в Пинтерест
18
Поделиться
в Одноклассники
87
Поделиться
в МойМир
87
<div class="sf-share" data-url="https://simai.studio">
  <div class="sf-share-btn bg-fb theme-dark mr-2 mb-2" data-service="facebook">
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Фейсбуке</div>
    <div class="sf-share-counter p-2 t-2">10</div>
  </div>
  <div class="sf-share-btn bg-vk theme-dark mr-2 mb-2" data-service="vkontakte">
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в ВКонтакте</div>
    <div class="sf-share-counter p-2 t-2">5</div>
  </div>
  <div class="sf-share-btn bg-tw theme-dark mr-2 mb-2" data-service="twitter">
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Твиттер</div>
    <div class="sf-share-counter p-2 t-2">125</div>
  </div>
  <div class="sf-share-btn bg-gp theme-dark mr-2 mb-2" data-service="plusone">
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в ГуглПлюс</div>
    <div class="sf-share-counter p-2 t-2">125</div>
  </div>
  <div class="sf-share-btn bg-pr theme-dark mr-2 mb-2" data-service="pinterest">
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Пинтерест</div>
    <div class="sf-share-counter p-2 t-2">18</div>
  </div>
  <div class="sf-share-btn bg-ok theme-dark mr-2 mb-2" data-service="odnoklassniki">
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Одноклассники</div>
    <div class="sf-share-counter p-2 t-2">87</div>
  </div>
  <div class="sf-share-btn bg-mr theme-dark mr-2 mb-2" data-service="mailru">
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в МойМир</div>
    <div class="sf-share-counter p-2 t-2">87</div>
  </div>
</div>

Кнопки с иконкой и описанием

Поделиться
в Фейсбуке
Поделиться
в ВКонтакте
Поделиться
в Твиттер
Поделиться
в ГуглПлюс
Поделиться
в Пинтерест
Поделиться
в Одноклассники
Поделиться
в МойМир
<div class="sf-share" data-url="https://simai.studio">
  <div class="sf-share-btn bg-fb theme-dark mr-2 mb-2" data-service="facebook">
    <div class="sf-share-icon p-2"><i class="fab fa-facebook-f fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Фейсбуке</div>
  </div>
  <div class="sf-share-btn bg-vk theme-dark mr-2 mb-2" data-service="vkontakte">
    <div class="sf-share-icon p-2"><i class="fab fa-vk fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в ВКонтакте</div>
  </div>
  <div class="sf-share-btn bg-tw theme-dark mr-2 mb-2" data-service="twitter">
    <div class="sf-share-icon p-2"><i class="fab fa-twitter fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Твиттер</div>
  </div>
  <div class="sf-share-btn bg-gp theme-dark mr-2 mb-2" data-service="plusone">
    <div class="sf-share-icon p-2"><i class="fab fa-google-plus-g fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в ГуглПлюс</div>
  </div>
  <div class="sf-share-btn bg-pr theme-dark mr-2 mb-2" data-service="pinterest">
    <div class="sf-share-icon p-2"><i class="fab fa-pinterest-p fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Пинтерест</div>
  </div>
  <div class="sf-share-btn bg-ok theme-dark mr-2 mb-2" data-service="odnoklassniki">
    <div class="sf-share-icon p-2"><i class="fab fa-odnoklassniki fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в Одноклассники</div>
  </div>
  <div class="sf-share-btn bg-mr theme-dark mr-2 mb-2" data-service="mailru">
    <div class="sf-share-icon p-2"><i class="far fa-at fa-lg"></i></div>
    <div class="sf-share-title t--2 py-2 px-3 br-1 bl-1">Поделиться<br>в МойМир</div>
  </div>
</div>

Кнопки с иконкой и счетчиком

<div class="sf-share" data-url="https://simai.studio">
  <div class="sf-share-btn bg-fb theme-dark mr-2 mb-2" data-service="facebook">
    <div class="sf-share-icon p-2 t-1"><i class="fab fa-facebook-f"></i></div>
    <div class="sf-share-counter p-2 t-1 bl-1">10</div>
  </div>
  <div class="sf-share-btn bg-vk theme-dark mr-2 mb-2" data-service="vkontakte">
    <div class="sf-share-icon p-2 t-1"><i class="fab fa-vk"></i></div>
    <div class="sf-share-counter p-2 t-1 bl-1">5</div>
  </div>
  <div class="sf-share-btn bg-tw theme-dark mr-2 mb-2" data-service="twitter">
    <div class="sf-share-icon p-2 t-1"><i class="fab fa-twitter"></i></div>
    <div class="sf-share-counter p-2 t-1 bl-1">125</div>
  </div>
  <div class="sf-share-btn bg-gp theme-dark mr-2 mb-2" data-service="plusone">
    <div class="sf-share-icon p-2 t-1"><i class="fab fa-google-plus-g"></i></div>
    <div class="sf-share-counter p-2 t-1 bl-1">125</div>
  </div>
  <div class="sf-share-btn bg-pr theme-dark mr-2 mb-2" data-service="pinterest">
    <div class="sf-share-icon p-2 t-1"><i class="fab fa-pinterest-p"></i></div>
    <div class="sf-share-counter p-2 t-1 bl-1">18</div>
  </div>
  <div class="sf-share-btn bg-ok theme-dark mr-2 mb-2" data-service="odnoklassniki">
    <div class="sf-share-icon p-2 t-1"><i class="fab fa-odnoklassniki"></i></div>
    <div class="sf-share-counter p-2 t-1 bl-1">87</div>
  </div>
  <div class="sf-share-btn bg-mr theme-dark mr-2 mb-2" data-service="mailru">
    <div class="sf-share-icon p-2 t-1"><i class="far fa-at"></i></div>
    <div class="sf-share-counter p-2 t-1 bl-1">87</div>
  </div>
</div>

Кнопки только с иконкой

<div class="sf-share" data-url="https://simai.studio">
  <div class="sf-share-btn bg-fb theme-dark mr-2 mb-2" data-service="facebook">
    <div class="sf-share-icon p-2"><i class="fab fa-facebook-f"></i></div>
  </div>
  <div class="sf-share-btn bg-vk theme-dark mr-2 mb-2" data-service="vkontakte">
    <div class="sf-share-icon p-2"><i class="fab fa-vk"></i></div>
  </div>
  <div class="sf-share-btn bg-tw theme-dark mr-2 mb-2" data-service="twitter">
    <div class="sf-share-icon p-2"><i class="fab fa-twitter"></i></div>
  </div>
  <div class="sf-share-btn bg-gp theme-dark mr-2 mb-2" data-service="plusone">
    <div class="sf-share-icon p-2"><i class="fab fa-google-plus-g"></i></div>
  </div>
  <div class="sf-share-btn bg-pr theme-dark mr-2 mb-2" data-service="pinterest">
    <div class="sf-share-icon p-2"><i class="fab fa-pinterest-p"></i></div>
  </div>
  <div class="sf-share-btn bg-ok theme-dark mr-2 mb-2" data-service="odnoklassniki">
    <div class="sf-share-icon p-2"><i class="fab fa-odnoklassniki"></i></div>
  </div>
  <div class="sf-share-btn bg-mr theme-dark mr-2 mb-2" data-service="mailru">
    <div class="sf-share-icon p-2"><i class="far fa-at"></i></div>
  </div>
</div>

Модификация иконок

Используйте модификаторы для изменения представления иконок.

&<div class="sf-share" data-url="https://simai.studio">
  <div class="sf-share-btn bg-fb theme-dark mr-2 mb-2 circle" data-service="facebook">
    <div class="sf-share-icon p-2"><i class="fab fa-facebook-f"></i></div>
  </div>
  <div class="sf-share-btn bg-vk theme-dark mr-2 mb-2 circle" data-service="vkontakte">
    <div class="sf-share-icon p-2"><i class="fab fa-vk"></i></div>
  </div>
  <div class="sf-share-btn bg-tw theme-dark mr-2 mb-2 circle" data-service="twitter">
    <div class="sf-share-icon p-2"><i class="fab fa-twitter"></i></div>
  </div>
  <div class="sf-share-btn bg-gp theme-dark mr-2 mb-2 circle" data-service="plusone">
    <div class="sf-share-icon p-2"><i class="fab fa-google-plus-g"></i></div>
  </div>
  <div class="sf-share-btn bg-pr theme-dark mr-2 mb-2 circle" data-service="pinterest">
    <div class="sf-share-icon p-2"><i class="fab fa-pinterest-p"></i></div>
  </div>
  <div class="sf-share-btn bg-ok theme-dark mr-2 mb-2 circle" data-service="odnoklassniki">
    <div class="sf-share-icon p-2"><i class="fab fa-odnoklassniki"></i></div>
  </div>
  <div class="sf-share-btn bg-mr theme-dark mr-2 mb-2 circle" data-service="mailru">
    <div class="sf-share-icon p-2"><i class="far fa-at"></i></div>
  </div>
</div>
<div class="sf-share" data-url="https://simai.studio">
  <div class="sf-share-btn by-1 bl-1" data-service="facebook">
    <div class="sf-share-icon p-2 c-fb"><i class="fab fa-facebook-f"></i></div>
  </div>
  <div class="sf-share-btn by-1 bl-1" data-service="vkontakte">
    <div class="sf-share-icon p-2 c-vk"><i class="fab fa-vk"></i></div>
  </div>
  <div class="sf-share-btn by-1 bl-1" data-service="twitter">
    <div class="sf-share-icon p-2 c-tw"><i class="fab fa-twitter"></i></div>
  </div>
  <div class="sf-share-btn by-1 bl-1" data-service="plusone">
    <div class="sf-share-icon p-2 c-gp"><i class="fab fa-google-plus-g"></i></div>
  </div>
  <div class="sf-share-btn by-1 bl-1" data-service="pinterest">
    <div class="sf-share-icon p-2 c-pr"><i class="fab fa-pinterest-p"></i></div>
  </div>
  <div class="sf-share-btn by-1 bl-1" data-service="odnoklassniki">
    <div class="sf-share-icon p-2 c-ok"><i class="fab fa-odnoklassniki"></i></div>
  </div>
  <div class="sf-share-btn b-1" data-service="mailru">
    <div class="sf-share-icon p-2 c-mr"><i class="far fa-at"></i></div>
  </div>
</div>