Кнопки поделиться в соц сетях для сайта

Кнопки поделиться в соц сетях для сайта

Для того, чтобы начать использовать данные наборы социальных кнопок на своем сайте, Вам необходимо подключить стили с внешнего источника. А это делается при помощи короткого кода, который будет представлен чуть ниже … Его нужно установить в фал header.php вашей активной темы WordPress. За счет него будут подключены стили для ваших будущих кнопок социальных сетей с внешнего ресурса. Затем, нужно подключить скрипты, которые отвечают за загрузку блока кнопок соц сетей на вашем сайте, которые необходимо подключать в файл header.php или в файл footer.php, чтобы они загружались не из шапки вашего сайта (это может несколько замедлить загрузку сайта!). Но есть некоторые нюансы. Давайте сейчас с ними будем разбираться … Как Вы смогли уже увидеть на картинке выше и ниже, блоки кнопки поделиться в соц сетях для сайта, представлены в нескольких видах.

Первая строка кода — это стили, которые нужно подключать в файл header.php Вторая и третья строки кода — это скрипт, который можно подключать как header.php, так и в файл footer.php (но лучше в footer.php!) Остальная часть кода заключенная в теги— это нужно вставить в файл single.php вашей активной темы оформления сайта на WordPress, чтобы кнопки поделиться в соц сетях для сайта начали отображаться на Ваших страницах

Кнопки соцсетей — Классические горизонтальные без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_classic.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes" data-counters="no">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Классические вертикальные без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_classic.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_vertical" data-counters="no">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Классические одной кнопкой без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_classic.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_single" data-counters="no" data-single-title="Поделиться">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Плоские горизонтальные без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_flat.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes" data-counters="no">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Плоские вертикальные без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_flat.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_vertical" data-counters="no">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Плоские одной кнопкой без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_flat.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_single" data-counters="no" data-single-title="Поделиться">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Бирман горизонтальные без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_birman.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes" data-counters="no">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Бирман вертикальные без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_birman.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_vertical" data-counters="no">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Бирман одной кнопкой без счетчика:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_birman.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_single" data-counters="no" data-single-title="Поделиться">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Классичесие горизонтальные с счетчиком:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_classic.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Классичесие вертикальные с счетчиком:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_classic.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_vertical">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

 Кнопки соцсетей — Плоские горизонтальные с счетчиком:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_flat.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Плоские вертикальные с счетчиком:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_flat.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_vertical">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Бирман горизонтальные с счетчиком:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_birman.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Кнопки соцсетей — Бирман вертикальные с счетчиком:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_birman.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>
...
<div class="social-likes social-likes_vertical">
  <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
  <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
  <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
  <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
  <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
  <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

Первая строка кода — это стили, которые нужно подключать в файл header.php Вторая и третья строки кода — это скрипт, который можно подключать как header.php, так и в файл footer.php (но лучше в footer.php!) Остальная часть кода заключенная в теги— это нужно вставить в файл single.php вашей активной темы оформления сайта на WordPress, чтобы кнопки поделиться в соц сетях для сайта начали отображаться на Ваших страницах

0
React Плюсы Минусы использования Установка и базовая настройка web сервер на windows

Комментариев нет

Нет комментариев

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *