все о заработке в интернете
инфо-бизнесе с нуля, электронной коммерции
Мой профиль Вконтакте

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

Здравствуйте, уважаемые читатели. Как у вас дела? Сегодня я хотел бы поделиться с вами тем, как установить кнопки социальных сетей для сайта. Существует масса вариантов. Вы можете взять кнопки социальных сетей для сайта у Яндекса, у различных сервисов, которых полно в интернете.

Также вы можете поставить их с помощью всяческих плагинов. Но делать это я вам не рекомендую. Причины я описывал в предыдущих статьях.

  1. Как создать карту сайта без плагина.
  2. Редирект после первого комментария без плагина.

А в этой статье я расскажу, как поставить кнопки без плагина. Вы наверное видели у меня в конце статей есть такие кнопки. Я поставил только самые необходимые и популярные. Их у меня 5. Мне именно такой вот дизайн понравился.

социальные кнопки на моем сайте

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

Где я их взял и как установил. Заходим на сайт разработчика http://sapegin.github.io/social-likes/ru/ . Вы можете выбрать несколько дизайнов: классический, плоский (как у меня) и легкий.

сайт разработчика кнопок социальных сетей

Выбираете как они будут располагаться у вас на блоге. Потом отмечаете необходимые социальные сети. Их здесь 7. Остальные настройки нам не нужны. После нужных настроек необходимо скачать сами файлы. Жмем «скачать кнопки».

Распаковываем архив. Там будет 2 файла – скрипт и стили кнопок социальных сетей. Но нам понадобится еще один файл. А именно, скрипт jquery. Скачиваем его вот отсюда (версию 1.11.1).

Все файлы у нас теперь есть. Далее их нужно поместить в корневую папку нашего блога. Она имеет вид типа: public, httpdocs. Создаем здесь отдельную папочку для наших файлов и загружаем их сюда.

Затем в админ панели блога открываем файл header.php и перед закрывающим тегом </head> добавляем строки:

<link rel="stylesheet" href="http://alex-bestbusiness.com/sbox/sl/social-likes_flat.css">

<script src="http://alex-bestbusiness.com/sbox/sl/ jquery-1.11.1.min.js "></script>
<script src="http://alex-bestbusiness.com/sbox/sl/social-likes.min.js"></script>

Вы здесь прописываете адрес папки, где располагается ваш скрипт у вас на блоге.

Ок. Теперь нам надо вставить вот этот код туда, где у нас будут выводиться кнопки социальных сетей для сайта.

<div class="social-likes">
<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
<div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
<div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
<div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>

У меня они стоят после статей. Открываем файл single.php, ищем место, где заканчивается статья. У меня она заканчивается кодом подписки. Я его нахожу в single.phpи добавляю туда. Сохраняю и смотрю. Все получилось. Да, чтобы у вас был отступ между строками, то добавьте вот такой тег </br>. Пример его использования смотрите на рисунке.

тег пробела

 

Если понравилась статья, то поделитесь ей в социальных сетях нажав на одну из кнопок.

А вот и подробное видео.

С уважением, Александр Пузатых.

Понравилась статья? Поделитесь с друзьями!