Сышышь ты, выходи сюда,
поговорим !

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

Опубликовано: 23.08.2018

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

Установка виджета на Drupal

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



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


Share42 - Плавающие кнопки социальных сетей. Все для начинающего блогера

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


Tabsbook самая удобная панель закладок

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

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

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

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

Пример 1-й

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

Пример 2-й

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

Пример 3-й

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

Установка

Подключаем к сайту 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-тексты.

rss