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

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

плавающая панельПривет, читатели блога 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/'; /* путь к папке с изображениями кнопок */

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

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

Понравилась статья? Подписывайтесь на мой RSS канал rss канал, следите за мной в Твиттере , или получайте статьи по почте:


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

  1. pavka

    1 посимпотней

  2. Сергей

    Первый вариант мне понравился больше 💡

  3. Елена Олейникова

    Мне кажется, что все-таки на то, что сбоку находится, пользователь редко обращает внимание. даже если эта панель и опускается по мере прочтения поста. Лучше в конце ставить. Например, вот такие симпатичные кнопки, как на share.pluso.ru.
    Правда, кто-то мне сказал, что с установкой такой панели идет много каких-то запросов. Но я ее убрала, а запросов не убавилось 🙁

  4. Сергей

    Значит не все убрали.

  5. Сергей

    А вообще идея с плавающей панелью очень интересная и оригинальная. 😎

    • Виталий

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

  6. Whirlwind

    😎 Здорово. Я уже 2 часа ищу как правильно эти значки называются! =)))
    Нашел по такому запросу: значки соц сетей движутся с прокруткой. =)

  7. Денис

    Спасибо за идею. очеь неплохо выглядит 😉

  8. Михаил

    Большое спасибо за скрипт!
    Но воспользоваться им пока не могу по причине своего совсем чайниковского уровня. Конкретно, не ясно следующее:
    1) Куда именно загрузить файл, в корень?
    2) Как найти в шаблоне сайта код для вывода статьи
    3) Что писать в ‘Ссылка на статью’ и в ‘Название статьи’
    4) В какое место файла со стилями добавлять стили оформления
    6) не ясна вообще идеология: как данный скрипт «узнает» адреса моих страничек в соц сетях? Не их ли нужно писать в кавычках, о которых речь в п 3? Если да то как все сразу или для каждой всю последовательность манипуляций с установкой надо повторять?

    • Seostager
      Михаил, 1) куда загружать не принципиально, можете и в корень. Важно правильно прописать путь к файлу.
      2) в вордпрессе, обычно, этот код находится в файле single.php
      3) ниже под этим непонятным вам местом написан готовый вариант для wordpress блогов
      4) в любое
      5) нет, в кавычках нужно писать не их. «идеология» у каждого скрипта разная. вдаваться в программирование не имеет смысла. просто скрипт запрашивает страницу, на которой вы уже авторизованы.
  9. Виталий

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

Оставить свой отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


  • Использую
  • По месяцам
  • GoGetLinks - лучшая биржа для продажи и покупки вечных ссылок.
  • Sape - заработок на временных ссылках. Лучшая биржа временных ссылок.
  • 2domains - очень дешевые домены для ваших сайтов. Надежный сервис - пользуюсь сам.
  • Linkfeed - еще одна хорошая биржа временных ссылок.
  • Liex - размещаем статьи - получаем деньги. Интересная тема.
  • Блогун - лучший сервис для размещения постовых и обзоров на блоге.
    • В твиттере
    • В инстаграме
    Система Orphus