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

603 комментария

Недавно я решил отказаться от использования своего скрипта «Добавить в закладки» и создал новый скрипт на jQuery — плавающую панель с кнопками добавления статьи в социальные сервисы. Эту панель вы можете прямо сейчас наблюдать слева на странице любой статьи данного блога (при разрешении экрана более 1024 пикселей в ширину).

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

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

Обозначу несколько моментов:

В IE6 скрипт работать не будет, потому что ну его в баню, этот IE6! Не стоит он того, чтобы ради него писать дополнительный код. А отсутствие панели в этом допотопном браузере никак не скажется на работоспособности сайта.
В панели я использую очень красивые иконки, которые входят в набор под названием «Vector Social Media Icons». Вы можете скачать их бесплатно отсюда.
Некоторые иконки (Мой Мир, Бобрдобр, Memori.ru) пришлось сделать самому, а некоторые (ВКонтакте, Livejournal) нашел у Миши Шакина.
Как и раньше, весь HTML-код кнопок находится непосредственно в скрипте. Это лучше тем, что:
- во-первых, на сайте не появятся дополнительные внешние ссылки (т.е. ПиАр страницы перетекать не будет);
- во-вторых, HTML-код страниц не будет захламляться кодом кнопок;
- в-третьих, за счет кэширования скрипта браузером скорость загрузки страниц будет чуть быстрее.

Я сделал 3 варианта панели на ваш выбор: 1-й — все иконки отображаются всегда, 2-й — точь-в-точь, как на моем блоге, с переключением, 3-й — «не плавающий» вариант.

Пример 1-й

Смотрим отдельный живой пример и скачиваем его, если нужно:

jQuery-скрипт «Добавить в социальные сервисы» пример №1

Загрузок: 6311 | Размер: 27 Кб

Пример 2-й

Смотрим отдельный живой пример и скачиваем его, если нужно:

jQuery-скрипт «Добавить в социальные сервисы» пример №2

Загрузок: 4597 | Размер: 27 Кб

Пример 3-й

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

jQuery-скрипт «Добавить в социальные сервисы» пример №3

Загрузок: 2877 | Размер: 23 Кб

Установка

Подключаем к сайту jQuery (если он еще не подключен) путем добавления в секцию <head></head> следующей строки:
```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
```
Аналогичным образом подключаем скрипт (сразу после jQuery):
```
<script type="text/javascript" src="ПУТЬ_ДО_СКРИПТА/socializ.js"></script>
```
В шаблоне своего сайта ищем код, который выводит текст статьи, и прямо перед ним или сразу после него подключаем функцию скрипта:
```
<script type="text/javascript">socializ(encodeURIComponent('Ссылка на статью'),encodeURIComponent('Название статьи'))</script>
```
Для пользователей WordPress эта строчка будет выглядеть так:
```
<script type="text/javascript">socializ(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))</script>
```

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

Для 1-го и 2-го примеров:


#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 не указано свойство left. Это сделано намеренно для того, чтобы панель по горизонтали позиционировалось не относительно края окна браузера, а относительно родительского блока, в котором подключается функция скрипта.

Для 3-го примера:


#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;
}

В вверху скрипта находим следующие строки и указываем нужные значения для вашего сайта:


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

Работает кроссбраузерно (за минусом IE6). Проверял в Opera, FireFox, Chrome, Safari (есть косячок), IE8, IE7.

Вот и все. Надеюсь, вам понравится.

* * *

Контент-студия «100 текстов» пишет уникальные статьи и тексты на заказ. Это и копирайтинг, и рерайтинг и SEO-тексты.

Комментарии (603)

Roma
11 лет 1 месяц назад
Помогите пожалуйста, я установил панель на сайт на друпале, пока на локальный сервер… Так вот никак не получается ее подвинуть, она чуть ли не в центре экрана располагается. Менял значения с таблице стилей, в скрипте менял m1 и m2 — ничего не помогает(
- Dimox
  11 лет 1 месяц назад / ответ на коммент Roma
  Не видя живого примера, ничем не могу помочь.
Roma
11 лет 1 месяц назад
Вот на этом скрине видно, где располагается панель…
http://s59.radikal.ru/i164/1202/f1/8c6404a47b4a.jpg
- Diel
  11 лет 1 месяц назад / ответ на коммент Roma
  http://SSMaker.ru/6c805d55/
  У меня все ок. ты значит не туда поставил
Roma
11 лет 1 месяц назад
Все, разобрался) Надо вставить таблицу стилей в основной файл css для темы. И там уже менять координату)