Главная›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

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

Пример 2-й

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

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

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

Пример 3-й

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

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

Загрузок: 2886 | Размер: 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;
}

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

    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, о чем все просят. Однако прямо сейчас на ...

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

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

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

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

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

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

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

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

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

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

  1. vista
    8 ноября 2011 г. в 18:59

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

    1. Dimox
      9 ноября 2011 г. в 19:46 / ответ на коммент vista

      В стилях панели поменяйте fixed на absolute.

  2. Артист
    18 ноября 2011 г. в 19:01

    Хм,довольно интересно,скачаю и попробую 1 вариант.Потом отпишусь

  3. Alex
    19 ноября 2011 г. в 20:32

    Dimox. У меня уже не хватает нервов и скорее всего мозгов…пожалуйста, посмотрите как сделать эту панель на сайтах UCOZ…надеюсь на Ваше понимание и терпение
    Спасибо

    1. Dimox
      19 ноября 2011 г. в 22:07 / ответ на коммент Alex

      Сори, нет желания в этом разбираться.

  4. Алексей
    25 ноября 2011 г. в 00:10

    Dimox! Помоги! Установил вертикальную панельку, все работает! Но проходит минут десять панелька перескакивает в горизонтальную! Пере заливаю файл style.css опять все нормально! Проходит время и панелька снова внизу! Не пойму что за конфликт????

    1. Dimox
      25 ноября 2011 г. в 10:57 / ответ на коммент Алексей

      Где посмотреть?

      1. Алексей
        25 ноября 2011 г. в 12:32 / ответ на коммент Dimox

        Вот мой сайт: http://webkladovay.ru

        1. Dimox
          25 ноября 2011 г. в 12:44 / ответ на коммент Алексей

          Не добавлены стили панели в style.css, поэтому она и не плавает.

          1. Алексей
            25 ноября 2011 г. в 13:02 / ответ на коммент Dimox

            Стили добавлены! Но панелька все равно в низ перескакивает! Обновляешь страницу панелька сбоку как положено. Заходишь заново на сайт она опять внизу! Загадка!?

            1. Dimox
              25 ноября 2011 г. в 13:08 / ответ на коммент Алексей

              Значит куда-то не туда добавляешь их. Вот файл – http://webkladovay.ru/wp-content/themes/Wcute/style.css При поиске #socializ в нем ничего не находится.

              1. Алексей
                25 ноября 2011 г. в 13:18 / ответ на коммент Dimox

                Еще больше не понятно! На хостинг открываю style.css стили есть!!! Если же перехожу по ссылке, стилей нет! Путь точно тот! Файл тоже тот! Что за глюк не пойму!?

                1. Антон
                  25 ноября 2011 г. в 13:24 / ответ на коммент Алексей

                  Может кеш надо почистить и шифтом перегрузить страницу…

                2. Алексей
                  25 ноября 2011 г. в 13:26 / ответ на коммент Алексей

                  Стили появились но все без изменений!

                  1. Dimox
                    25 ноября 2011 г. в 13:33 / ответ на коммент Алексей

                    Вот теперь и стили появились, и панель на нужном месте. Значит тебе нужно сбросить кэш в браузере.

                    1. Алексей
                      25 ноября 2011 г. в 13:40 / ответ на коммент Dimox

                      До этого все делал через ftp-клиент, сейчас все сделал на прямую! Пока все ОК! Благодарю! Подскажи еще есть ли кэш в WordPress? А то поменял значки старые удалил а на сайте один фиг старые отображаются!

                      1. Dimox
                        25 ноября 2011 г. в 14:21 / ответ на коммент Алексей

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

  5. Крок
    27 ноября 2011 г. в 09:51

    Где найти в шаблоне сайта код, который выводит текст статьи

    1. Крок
      27 ноября 2011 г. в 09:52 / ответ на коммент Крок

      сайт на вордпрессе

      1. Dimox
        27 ноября 2011 г. в 10:17 / ответ на коммент Крок

        Либо:

        <?php the_content(); ?>

        либо:

        <?php the_excerpt(); ?>
        1. Крок
          27 ноября 2011 г. в 10:36 / ответ на коммент Dimox

          а в каком именно файле искать? Спасибо!

          1. Dimox
            27 ноября 2011 г. в 10:37 / ответ на коммент Крок

            single.php

  6. Крок
    27 ноября 2011 г. в 11:05

    нету там таких строчек

    1. Dimox
      27 ноября 2011 г. в 12:45 / ответ на коммент Крок

      Тогда подходящее место можно вычислить методом тыка.

  7. Марина
    18 декабря 2011 г. в 00:49

    Добрый вечер! Подскажите, пожалуйста, можно ли сделать кнопки не прозрачными? Они, конечно, теряют прозрачность, когда на них курсор наводишь. Но хотелось бы в постоянном режиме иметь яркие кнопки. Спасибо.

    1. Dimox
      18 декабря 2011 г. в 11:04 / ответ на коммент Марина

      Из файла с расширением .js удалите эту часть кода:

      .css({opacity: 0.5}).hover(
			function() { $(this).css({opacity: 1}); },
			function() { $(this).css({opacity: 0.7}); }
		);
		s.hover(
			function() { $(this).find('a').css({opacity: 0.7}); },
			function() { $(this).find('a').css({opacity: 0.5}); }
		);
  8. Радик
    24 декабря 2011 г. в 06:56

    Подскажите, пожалуйста, можно ли выравнивать http://pro100-wordpress.ru/wp-content/uploads/2011/12/12.jpg ?

    1. Dimox
      24 декабря 2011 г. в 10:04 / ответ на коммент Радик

      В статье указано, где менять этот отступ.

  9. Радик
    24 декабря 2011 г. в 11:40

    как сделать не закруглённую css рамку ?

    1. Dimox
      24 декабря 2011 г. в 12:03 / ответ на коммент Радик

      Удалите эти строки:

      -moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
      1. Радик
        25 декабря 2011 г. в 16:02 / ответ на коммент Dimox

        Спасибо.

  10. Крок
    25 декабря 2011 г. в 15:37

    Доброе время суток! Сайт с фиксировонной левой колонкой (не скролится) Хотел внизу прикрепить 5 кнопочек по горизонтали На сервисе Share42.com сгенерировал нужные кнопки Скачал архив А вот что теперь делать не знаю! В описании установки они вставляются в статью а как сделать чтобы их разместить в одно место на неподвижную колонку?

    1. Dimox
      25 декабря 2011 г. в 18:42 / ответ на коммент Крок

      Вставьте в код этой колонки.

      1. Крок
        25 декабря 2011 г. в 18:45 / ответ на коммент Dimox

        share42(‘http://site.ru/share42/’,’link; } ?>’,’title; } ?>’)
        Вставляю это но они не отображаются?

  11. Женя
    12 января 2012 г. в 14:41

    Подскажите, пожалуйста, как сделать что бы новый сайт (твитер и т.д.) открывался в том же окне?

    1. Dimox
      12 января 2012 г. в 15:33 / ответ на коммент Женя

      Из скрипта удалите это:

      .attr({target: '_blank'})
      1. Женя
        12 января 2012 г. в 15:43 / ответ на коммент Dimox

        У меня такого нет. Вот скрипт, который я скачал:

        [вырезано]

        1. Dimox
          12 января 2012 г. в 15:51 / ответ на коммент Женя

          Есть, в нижней части скрипта.

  12. Эдуард
    17 января 2012 г. в 23:22

    Здравствуйте, а как можно сделать, чтоб ссылку в твитере укорачивало?

    1. Dimox
      18 января 2012 г. в 10:34 / ответ на коммент Эдуард

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

  13. Человек
    22 января 2012 г. в 22:41

    Объясните пожалуйста, что сделать, что бы не заезжало на страницу при уменьшении разрешения?
    Ссылка.

    1. Dimox
      23 января 2012 г. в 11:19 / ответ на коммент Человек

      Без живого примера не могу сказать.

  14. Edd
    25 января 2012 г. в 20:13

    как google +1 впихнуть подскажи пожалст)

    1. Dimox
      25 января 2012 г. в 20:20 / ответ на коммент Edd

      Вот так – http://dimox.name/google-plus-one-and-share42/

  15. Fishl
    29 января 2012 г. в 23:46

    Привет!
    В закладки с главной страницы сайта wordpress попадает только последний пост, а хотелось бы всю главную страницу. Может не в то место шаблона (index.php) вставил?
    Спасибо!

    1. Dimox
      30 января 2012 г. в 00:30 / ответ на коммент Fishl

      Скрипт не предназначен для главной.

      1. Fishl
        30 января 2012 г. в 01:02 / ответ на коммент Dimox

        А жаль(

      2. Fishl
        31 января 2012 г. в 01:27 / ответ на коммент Dimox

        А во на joomla с главной страницы сайта создает закладки, т.е. именно с той страницы на, которой находится пользователь (это и логично) создаются закладки.
        Скрипт не предназначен для главной, только на wordpress?

  16. Максим
    2 февраля 2012 г. в 20:10

    Здравствуйте, а как будет выглядеть “Ссылка на статью” для DLE ?

    1. Dimox
      2 февраля 2012 г. в 22:00 / ответ на коммент Максим

      Я не пользуюсь этим движком, поэтому не могу подсказать. Ищите инструкции.

  17. Дмитирй
    8 февраля 2012 г. в 00:06

    Здравствуйте. Хотелось бы узнать как сделать так, чтобы такая вот боковая панелька исчезала, если у пользователя разрешение 1024х768 или ниже? Не хочется, чтобы она располагалась совсем рядом с текстом или заползала на него…

    1. Dimox
      8 февраля 2012 г. в 10:39 / ответ на коммент Дмитирй

      В первом и втором примерах так и сделано. Можно отрегулировать сдвиг влево с помощью параметра margin-left: -70px;.

  18. Roma
    16 февраля 2012 г. в 17:19

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

    1. Dimox
      16 февраля 2012 г. в 17:32 / ответ на коммент Roma

      Не видя живого примера, ничем не могу помочь.

  19. Roma
    17 февраля 2012 г. в 10:12

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

    1. Diel
      19 февраля 2012 г. в 22:23 / ответ на коммент Roma

      http://SSMaker.ru/6c805d55/
      У меня все ок. ты значит не туда поставил

  20. Roma
    17 февраля 2012 г. в 10:49

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

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.