Как добавить в блог плавающую панель закладок в социалки

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

К сожалению, пока еще нет плагина, добавляющую в блог на WordPress плавающую панель закладок. Но не отчаивайтесь, на самом деле все очень просто. Для установки панели требуется немного поправить файлы установленной темы оформления.

Сначала необходимо скачать специальный Java скрипт со страницы автора данной панели. Там же находятся все необходимые инструкции для установки, но если информация автора окажется для вас слишком сложной, попробуйте воспользоваться этой

Итак, после скачивания файлов с сайта разработчика, закачиваем их на свой сайт при помощи любого FTP клиента в корневую директорию сайта. После этого переходим в админку блога WordPress и ищем редактор внешнего вида. Выбираем редактирование файла “шапки” header.php.

Первой строкой подключаем к сайту библиотеку jQuery, если она еще не подключена. Второй строкой подключаем скрипт плавающей панели. В качестве источника скрипта указываем путь до скачанного и залитого на хостинг файла. Затем редактируем файл одиночной записи single.php. В указанном на следующем скриншоте месте (перед строкой вывода комментариев “<?php comments_template(); ?>”) добавляем строчку:

<script type="text/javascript">socializ(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))</script>

Обновляем измененный single.php и затем редактируем файл списка стилей шаблона style.css. Открываем указанный файл в редакторе кода и в самый конец добавляем стили плавающей панели. Код стилей копируем из инструкции с сайта автора.

Нажимаем кнопку “Обновить файл” и смотрим результат на сайте. Панель должна быть видна слева только на страницах с записями. Возможно, результат сразу не будет выглядеть идеально и придется чуть поправить отступы и стили.  Например у меня после вышеперечисленных действий кнопки панели были смещены вправо вниз относительно плавающей панели. Но немного доработав стили удалось вернуть их на свое законное место.

Если у вас возникла проблема при установке, которую не получается решить самостоятельно, не стесняйтесь, спрашивайте в комментариях. Постараюсь по возможности помочь ценным советом Удачи!

Понравилось? Подписывайтесь на рассылку блога и не скучайте!