Домой | Сайтостроение | Кнопки поделиться в соц сетях для сайта WordPress без плагина!
кнопки поделиться в соц сетях для сайта
кнопки поделиться в соц сетях для сайта

Кнопки поделиться в соц сетях для сайта WordPress без плагина!

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

Как создать кнопки поделиться в соц сетях для сайта WordPress без применения плагина? Узнай сейчас!

Здравствуйте, уважаемые друзья и гости блога! Сейчас Вы узнаете, как самостоятельно и без особых проблем создать кнопки поделиться в соц сетях для сайта WordPress без плагина. Эти кнопки соц сетей удивительно легки и функциональны. А что их такими делает? Давайте с вами сейчас это узнаем?! Поехали ...

Блок поделиться или социальные кнопки для сайта без плагина на WordPress!

Представляю Вашему вниманию несколько блоков красивых кнопок, которые Вы сможете установить на своем сайте не используя специальные плагины:

Блок поделиться без счетчиков

кнопки поделиться без счетчика
кнопки поделиться без счетчика

Для того, чтобы начать использовать данные наборы социальных кнопок на своем сайте, Вам необходимо подключить стили с внешнего источника. А это делается при помощи короткого кода, который будет представлен чуть ниже ...

Его нужно установить в фал header.php вашей активной темы WordPress. За счет него будут подключены стили для ваших будущих кнопок социальных сетей с внешнего ресурса.

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

Как Вы смогли уже увидеть на картинке выше и ниже, блоки кнопки поделиться в соц сетях для сайта, представлены в нескольких видах, а именно:

  • Классический горизонтальный — для него нужны вот эти стили и скрипты:
<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>

 

  • Плоский горизонтальный — для него нужны вот такие стили и скрипты:
<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>

 

  • Бирман горизонтальный — для этого блока поделиться необходимы вот эти стили и скрипты:
<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>

 

  •  Классический вертикальный — вот стили и скрипты для него:
<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>

 

  •  Плоский вертикальный — это его стили и скрипты:
<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>

 

  •  Бирман вертикальный — для него подойдут вот такие скрипты и стили:
<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>

 

  •  Классический одной кнопкой — стили и скрипты вот такие:
<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>

 

  •  Плоский одной кнопкой — вот такие скрипты и стили:
<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>

 

  • Бирман одной кнопкой — для них нужны вот эти стили и скрипты:
<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>

Что нужно сделать, чтобы кнопки поделиться в соц сетях для сайта появились?

Теперь Вам нужно, чтобы сами кнопки появились у Вас на сайте. Для этого в файл single.php вставьте вот этот код, который будет отвечать за вывод блока кнопок поделиться в соц сетях на вашем сайте в нужном месте:

  • Для горизонтального блока кнопок:

 

<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>

 

  •  Для вертикального блока кнопок:
<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>

 

  • Для блока поделиться одной кнопкой:
<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>

 

  • Плоский горизонтальный с счетчиком:
<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>

 

  • Бирман горизонтальный с счетчиком:
<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>

 

  • Классический вертикальный с счетчиком:
<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>

 

  • Плоский вертикальный с счетчиком:
<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>

 

  • Бирман вертикальный с счетчиком:
<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>

 

  • Классический одной кнопкой с счетчиком:
<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>

 

  • Плоский одной кнопкой с счетчиком:
<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>

 

  • Бирман одной кнопкой с счетчиком:
<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>

Не забудьте про этот код!

Это код, который нужно вставлять в файл single.php для появления блока поделиться в соц сетях на сайте ...

  • Для горизонтального блока кнопок с счетчиком:
<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>

 

  • Для вертикального блока кнопок с счетчиком:
<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>

 

  • Для блока поделиться одной кнопкой с счетчиком:
<div class="social-likes social-likes_single" 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>

Как-то все получилось все длинно и не понятно? Неправда ли?! Давайте теперь коротко и ясно ...

Кнопки поделиться в соц сетях для сайта без плагина на WordPress!

Сейчас представлю Вам несколько сгруппированных кодов для вставки на Ваш сайт, только Вы их разделите сами:

  • Первая строка кода — это стили, которые нужно подключать в файл header.php
  • Вторая и третья строки кода — это скрипт, который можно подключать как header.php, так и в файл footer.php (но лучше в footer.php!)
  • Остальная часть кода заключенная в теги <div></div> — это нужно вставить в файл 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_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-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">
  <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_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-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">
  <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>
  •  Кнопки соцсетей — Бирман одной кнопкой с счетчиком:

Бирман одной кнопкой с счетчиком
Бирман одной кнопкой с счетчиком

<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-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>

Теперь Вы знаете как создать блок поделиться и можете самостоятельно сделать любые кнопки поделиться в соц сетях для сайта WordPress без плагина!

Если кому-то не совсем все понятно? Тогда пишите в комментариях и постараюсь объяснить каждому из Вас!

А кому не хочется заморачиваться с кодами и их вставками на своем сайте, а может быть Вы даже и не знаете, где находятся эти файлы, в которые нужно вставлять эти коды? Тогда в своем следующем материале я Вам расскажу о том, как вставить любой код на свой сайт без проблем. Справится даже новичок!

А пока, до свидания и до новых встреч! Всем удачи и благополучия!

Ждем Ваших оценок, друзья!


Рейтинг!

Если статья была Вам полезна, тогда оцените ее в звездном рейтинге! Спасибо за участие!


Рейтинг пользователя:
5
( 2 голоса)


Про Валерий Бородин

Проверьте также

шаблоны лендинг пейдж бесплатно

Шаблоны Лендинг Пейдж бесплатно? — Да, это для Вас друзья!

Скачать шаблоны Лендинг Пейдж бесплатно — 25 штук для создания своего инфопродукта можно здесь! Здравствуйте, уважаемые …

2 комментария

  1. Евгений

    Крайне полезная и подробная информация. Мне как начинающему разработчику было очень полезно прочитать данный материал, почерпнул для себя массу полезного. Буду в дальнейшем использовать в своей работе.

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

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

Политика конфиденциальности