Плавающая панель «Добавить в социальные сети»

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

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

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

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

Реализована вся эта затея на jQuery, и очень проста  в настройке и установке. Существует три варианта  исполнения панели:

• Первый вариант — все иконки социальных сетей отображаются  всегда.
• Второй вариант — как на моем блоге, с переключением.
• Третий — “не плавающий” вариант.

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

Первый вариант

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

Нажмите здесь, чтобы скачать этот вариант панели

Второй вариант

Этот вариант позволяет реализовать сворачивающуюся панель. Такую панель я использую у себя на блоге. Менее популярные сервисы можно скрыть и при необходимости развернуть. Очень удобное решение. Посмотреть живой пример можно здесь.

Нажмите здесь, чтобы скачать этот вариант панели

Третий вариант

Наконец, в третьем варианте можно реализовать неплавающий вариант панели, которой можно, например, расположить в конце статьи. Это горизонтальный вариант плавающей панели. Посмотреть живой пример можно здесь.

Нажмите здесь, чтобы скачать этот вариант панели

Теперь разберемся с тем, как установить плавающую панель к себе на сайт.

Для начала загрузите скрипт из скаченного архива и папку с иконками к себе на хостинг.
1) Первым шагом нам нужно подключить jQuery. Делается это очень просто, нужно всего лишь добавить между ‹head› и ‹/head› следующую строчку:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

2) Сразу после этой строки аналогично подключаем сам скрипт:

<script type="text/javascript" src="ПУТЬ_ДО_СКРИПТА/socializ.js"></script>

3) В шаблоне сайта нужно найти код, отвечающий за вывод статьи, и вставить перед ним (для первого и второго варианта) или после него (для третьего варианта) функцию:

<script type="text/javascript">socializ(encodeURIComponent('Ссылка на статью'),encodeURIComponent('Название статьи'))</script>

Для WordPress блогов эта строчка выглядит так:

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

На этом установка скрипта закончена. Осталось только добавить необходимые стили в css файл, для оформления нашей панели.

4) В файл со стилями добавляем:

Для первого и второго вариантов:

#socializ {
 position: fixed;
 z-index: 1000;
 margin-left: -70px;
 padding: 6px 6px 0;
 border: 1px solid #E5E5E5;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #FFF;
 }
 * html #socializ {display: none}
 #socializ:hover {
 background: #F6F6F6;
 border: 1px solid #D4D4D4;
 -moz-box-shadow: 0 0 5px #DDD;
 -webkit-box-shadow: 0 0 5px #DDD;
 box-shadow: 0 0 5px #DDD;
 }
 #socializ a {
 display: block;
 width: 32px;
 height: 32px;
 margin: 0 0 6px;
 background-color: #F6F6F6;
 }
 #socializ img {
 margin: 0 !important;
 padding: 0 !important;
 border: none !important;
 }
 /* Если используете скрипт из второго примера,
 тогда еще добавьте это: */
 #socmore {
 text-align: center;
 cursor: pointer;
 margin: -11px 0 4px;
 width: 32px;
 }

Для третьего варианта:

#socializ {
 display: inline-block;
 border: 1px solid #E5E5E5;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 padding: 6px 0 6px 6px;
 background: #FFF;
 overflow: hidden;
 }
 * html #socializ {display: inline}
 *+html #socializ {display: inline}
 #socializ:hover {
 background: #F6F6F6;
 border: 1px solid #D4D4D4;
 -moz-box-shadow: 0 0 5px #DDD;
 -webkit-box-shadow: 0 0 5px #DDD;
 box-shadow: 0 0 5px #DDD;
 }
 #socializ a {
 float: left;
 width: 32px;
 height: 32px;
 margin: 0 6px 0 0;
 padding: 0;
 background-color: #F6F6F6;
 }
 #socializ img {
 margin: 0 !important;
 padding: 0 !important;
 border: none !important;
 }

5) Также можно установить необходимые настройки отображения панели. Для этого заходим в файл скрипта (socializ.js), находим первые три строчки и делаем необходимые установки:

var m1 = 140; /* расстояние от начала страницы до плавающей панели */
var m2 = 20; /* расстояние от верха видимой области страницы до плавающей панели */
var f = 'http://site.ru/socializ/i/'; /* путь к папке с изображениями кнопок */

Готово! Теперь можете наслаждаться новой панелькой 🙂 Данная панель хорошо впишется в дизайн почти любого сайта.

Не забывайте подписываться на обновления, у меня на блоге можно узнать еще много интересного 🙂 . Удачи!