Главная JavaScript

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

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

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

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

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

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

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

Пример 1-й

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

Пример 2-й

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

Пример 3-й

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

Установка

  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-тексты.

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

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

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

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