Плавающая панель «Добавить в социальные сервисы»
Недавно я решил отказаться от использования своего скрипта «Добавить в закладки» и создал новый скрипт на jQuery — плавающую панель с кнопками добавления статьи в социальные сервисы. Эту панель вы можете прямо сейчас наблюдать слева на странице любой статьи данного блога (при разрешении экрана более 1024 пикселей в ширину).
Насколько я вижу, такая модель социализации сайта сегодня очень популярна — я встречаю подобную панель на многих зарубежных блогах. Оно и правильно — такой вариант наиболее удобен для посетителя — независимо от того, какую часть статьи он читает, эта панелька всегда перед глазами, т.к. она фиксируется на одном месте при прокрутке текста страницы.
Как я и ожидал, после создания новой панели добавления в социальные сервисы посетители блога меня стали спрашивать о том, как сделать такую панельку, поэтому в этом посте я делюсь с вами скриптом.
Обозначу несколько моментов:
- В IE6 скрипт работать не будет, потому что ну его в баню, этот IE6! Не стоит он того, чтобы ради него писать дополнительный код. А отсутствие панели в этом допотопном браузере никак не скажется на работоспособности сайта.
- В панели я использую очень красивые иконки, которые входят в набор под названием «Vector Social Media Icons». Вы можете скачать их бесплатно отсюда.
- Некоторые иконки (Мой Мир, Бобрдобр, Memori.ru) пришлось сделать самому, а некоторые (ВКонтакте, Livejournal) нашел у Миши Шакина.
- Как и раньше, весь HTML-код кнопок находится непосредственно в скрипте. Это лучше тем, что:
- во-первых, на сайте не появятся дополнительные внешние ссылки (т.е. ПиАр страницы перетекать не будет);
- во-вторых, HTML-код страниц не будет захламляться кодом кнопок;
- в-третьих, за счет кэширования скрипта браузером скорость загрузки страниц будет чуть быстрее.
Я сделал 3 варианта панели на ваш выбор: 1-й — все иконки отображаются всегда, 2-й — точь-в-точь, как на моем блоге, с переключением, 3-й — «не плавающий» вариант.
Пример 1-й
Смотрим отдельный живой пример и скачиваем его, если нужно:
jQuery-скрипт «Добавить в социальные сервисы» пример № 1
Загрузок: 6312 | Размер: 27 Кб
Пример 2-й
Смотрим отдельный живой пример и скачиваем его, если нужно:
jQuery-скрипт «Добавить в социальные сервисы» пример № 2
Загрузок: 4598 | Размер: 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)
Помогите пожалуйста, я установил панель на сайт на друпале, пока на локальный сервер… Так вот никак не получается ее подвинуть, она чуть ли не в центре экрана располагается. Менял значения с таблице стилей, в скрипте менял m1 и m2 — ничего не помогает (
Не видя живого примера, ничем не могу помочь.
Вот на этом скрине видно, где располагается панель…
s59.radikal.ru/i164/1202/f1/8c6404a47b4a.jpg
SSMaker.ru/6c805d55/
У меня все ок. ты значит не туда поставил
Все, разобрался) Надо вставить таблицу стилей в основной файл css для темы. И там уже менять координату)