Добавляем плавающую панель с кнопками соцсетей

Добрый день, уважаемые читатели! Казалось бы, создала сайт и наполняй его контентом, и живи спокойно. Но к сожалению, а может и на радость я на этом не успокаиваюсь, а продолжаю находить что – то новенькое или хорошо забытое старенькое. Бегая в очередной раз по огромному миру инета и читая о чем пишут остальные блоггеры, увидела на одном из ресурсов плавающую панельку с  кнопками соцсетей. И захотела такую же, так как знаю о том, что социальные сети играют не маловажную роль в продвижение блога и привлечение дополнительного читателя. Стала искать идеальное решения для отражение подобной панели с кнопками.

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

В начале поиска решения вывода плавающей панельки с кнопками соцзакладок решила поискать плагин для wordpress, который бы справился с поставленной задачей. Нашелся такой, им оказался плагин Sharebar, который можно скачать на http://wordpress.org/extend/plugins/sharebar/. Устанавливается он просто, настройки легкие, но вот осталась я от него не в восторге – подгружал он мне ресурс хорошо, скорость загрузки блога увеличилась до 8 секунд и это при небольшом количестве плагинов и графики. Меня такой вариант естественно не устроил.

И читая twitter я наткнулась на сообщение, что вывести подобную панельку можно с помощью простого скрипта на jQuery. А что это идея. Во – первых, подобный скрипт не будет создавать дополнительных внешних ссылок, во – вторых, на скорости он никак не отразится и в третьих не будет лишнего кода в html. Осталось только найти такой скрипт. Мне это удалось сделать, повезло. На странице http://dimox.name/socializ-floating-panel/ автор – разработчик любезно предоставляет бесплатную возможность использовать  специальный Java скрипт, который отвечает всем мои требованиям. Там, кстати, есть и инструкция как его установить, но если это для Вас не понятно, то тогда я опишу Вам все свои шаги по установке плавающей панельки с кнопками.

Итак, прежде всего необходимо скачать специальный Java скрипт, автор предлагает нам три варианта отражения панельки, за которую отвечают три различных скрипта. Поэтому первоначально выбираем внешний вид панели, нажав на стрелочку 1, а затем понравившийся пример скачиваем нажав стрелочку 2

Получаем .zip архив, распаковав его видим  папку с иконка, демонстрационный файл и скрипт, которые необходимо установить в корневую папку сайта, при этом также необходимо будет указать путь к картинкам в скрипте.

Поэтому сначала я с помощью ftp-клиента закидываю папку с иконками, у меня это папка “i” в главную директорию моего ресурса, то есть в super-womens.ru\public_html\

Далее открываю файл socializ_2.js на редактирование с помощью редактора notepade++ и в строке, отвечающей за путь к иконкам, указываю путь к только что перекинутой на хост папке

Сохраняю изменения и уже измененный скрип перекидываю в корневую директорию блога, туда же куда забросила и папку с иконками.

Теперь необходимо в используемый шаблон внести некоторые изменения, указать на наличие скрипта. Поэтому заходим во вкладку Внешний вид – Редактирование и первым делом открываем для редактирования файл header.php и между тегами <header></header> прописываем следующие две строчки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">// <![CDATA[
mce:0
// ]]></script><script src="http://super-womens.ru/socializ_2.js" type="text/javascript">// <![CDATA[
mce:1
// ]]></script>

Первая строчка позволяет подключить библиотеку jQuery, в том случае если она еще не подключена, а вот вторая строка уже подключает скрипт, отвечающий за плавующую панельку, здесь только следует прописать путь к папке вместо слова “путь” и обратить внимание на название скрипта, так как у разных вариантов он называется по разному: socializ.js, socializ_2.js, socializ_3.js

Сохраняем произведенные изменения и открываем следующий файл для редактирования – single.php. В нем необходимо найти строчку (стрелочка1)

<!--?php comments_template(); ?-->

которая отвечает за вывод формы комментариев и перед ней прописать следующий код (стрелочка 2)

<script type="text/javascript">// <![CDATA[
mce:2
// ]]></script>

который позволит отражать плавающую панельку социальных кнопок при открытие полностью статьи.Сохраняем произведенные изменения.

Далее еще осталась прописать стили в файле style.css. Открываю данный файл на редактирование и в самом конце прописываю стили плавающей панели, которые скопировала на сайте автора данного скрипта.

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

Естественно, сразу снова проверяю скорость загрузки блога с помощью сервиса http://tools.pingdom.com и я была удивлена полученные результатами, скорость загрузки блога равнялась 1 секунде.

Ну что ж результат превзошел все мои ожидания, данный скрип действительно не создает лишней нагрузки, легко устанавливается, не добавляет лишних внешних ссылок. Думаю и читателю появление плавающей панельки с кнопками соцсетей будет удобно для использования. Протестировать работы такой панельки можно на сайте http://super-womens.ru

На этом все. Всем удачных экспериментов и до новых встреч на блоге “Seo записки отчаянной”

Вам понравилась статья? Расскажите о ней друзьям!