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

Приветствую, дорогие читатели и гости моего блога.

Сегодня я хочу поделиться с вами одним замечательным скриптом, который позволяет поделиться информацией с друзьями из социальных сетей.

Данный скрипт установлен у меня на блоге в конце каждой статьи.

Итак, начнем...

Сначала необходимо подключить jQuery.

В WordPress это лучше делать через файл functions.php:

Теперь необходимо вставить HTML основу кнопок в код шаблона:

Если мы хотим использовать векторные иконки социальных сетей вместо изображений, необходимо сначала подключить шрифт Font Awesome.

Как это сделать читайте здесь.

Теперь наш код для вставки кнопок будет выглядеть так:

Или так (если захотим оставить только иконки):

Вообще данный код универсальный, его можно применить на любом сайте.

Но, в данном случае рассматриваем применение скрипта в WordPress.

Здесь ссылка на текущую страницу, где расположены кнопки, выводится функцией the_permalink(), заголовок берется из функции the_title().

Если использовать другие CMS, необходимо заменить эти функции на аналогичные.

Теперь добавим стили.

Зададим цвет фона и текста, добавим эффект при наведении указателя курсора мыши.

В файл style.css добавим следующий код:

Далее подключаем обработчик share.js.

Его можно взять в архиве с исходниками.

В заголовке перед закрывающим тегом </head> вставляем код:

Тут необходимо поменять путь к данному файлу на хостинге.

У каждого он будет разный.

На этом все.

Оставляйте свои комментарии.

С уважением, Сергей Кривцов


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

Читайте также на моем блоге:

Подписка на обновления блога: