Главная › JavaScript

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

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

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

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

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

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

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

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

Пример 1-й

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

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

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

Пример 2-й

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

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

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

Пример 3-й

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

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

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

Установка

  1. Подключаем к сайту jQuery (если он еще не подключен) путем добавления в секцию <head></head> следующей строки:

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

  2. Аналогичным образом подключаем скрипт (сразу после jQuery):

    <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>

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

    • Для 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-тексты.

Смотрите также

Добавляем кнопку «Google +1» в панель от Share42.com

68 комментариев

На своем другом блоге я недавно объяснил, почему в данный момент кнопка «Google +1» не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на данном блоге вы можете наблюдать, что кнопка «Google ...

jQuery-cкрипт «Добавить в закладки»

135 комментариев

Данный скрипт — это усовершенствованная версия JS-скрипта «Добавить в закладки», который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его «добить». Скрипт уже давно ...

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый ...

Красивые всплывающие подсказки с помощью jQuery

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

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

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

  1. Roma
    11 лет 7 месяцев назад

    Помогите пожалуйста, я установил панель на сайт на друпале, пока на локальный сервер… Так вот никак не получается ее подвинуть, она чуть ли не в центре экрана располагается. Менял значения с таблице стилей, в скрипте менял m1 и m2 — ничего не помогает (

  2. Roma
    11 лет 7 месяцев назад

    Вот на этом скрине видно, где располагается панель…
    s59.radikal.ru/i164/1202/f1/8c6404a47b4a.jpg

  3. Roma
    11 лет 7 месяцев назад

    Все, разобрался) Надо вставить таблицу стилей в основной файл css для темы. И там уже менять координату)