Плавающая панель «Добавить в социальные сервисы»
Вместо скрипта, предложенного ниже, рекомендую воспользоваться бесплатным удобным сервисом, генератором скрипта кнопок социальных закладок и сетей - Share42.com.
Недавно я решил отказаться от использования своего скрипта “Добавить в закладки” и создал новый скрипт на jQuery - плавающую панель с кнопками добавления статьи в социальные сервисы. Эту панель вы можете прямо сейчас наблюдать слева на странице любой статьи данного блога (при разрешении экрана более 1024 пикселей в ширину).
Насколько я вижу, такая модель социализации сайта сегодня очень популярна - я встречаю подобную панель на многих зарубежных блогах. Оно и правильно - такой вариант наиболее удобен для посетителя - независимо от того, какую часть статьи он читает, эта панелька всегда перед глазами, т.к. она фиксируется на одном месте при прокрутке текста страницы.
Как я и ожидал, после создания новой панели добавления в социальные сервисы посетители блога меня стали спрашивать о том, как сделать такую панельку, поэтому в этом посте я делюсь с вами скриптом.
Обозначу несколько моментов:
- В IE6 скрипт работать не будет, потому что ну его в баню, этот IE6! Не стоит он того, чтобы ради него писать дополнительный код. А отсутствие панели в этом допотопном браузере никак не скажется на работоспособности сайта.
- В панели я использую очень красивые иконки, которые входят в набор под названием “Vector Social Media Icons”. Вы можете скачать их бесплатно отсюда.
- Некоторые иконки (Мой Мир, Бобрдобр, Memori.ru) пришлось сделать самому, а некоторые (ВКонтакте, Livejournal) нашел у Миши Шакина.
- Как и раньше, весь HTML-код кнопок находится непосредственно в скрипте. Это лучше тем, что:
- во-первых, на сайте не появятся дополнительные внешние ссылки (т.е. ПиАр страницы перетекать не будет);
- во-вторых, HTML-код страниц не будет захламляться кодом кнопок;
- в-третьих, за счет кэширования скрипта браузером скорость загрузки страниц будет чуть быстрее.
Я сделал 3 варианта панели на ваш выбор: 1-й - все иконки отображаются всегда, 2-й - точь-в-точь, как на моем блоге, с переключением, 3-й - “не плавающий” вариант.
Пример 1-й
Смотрим отдельный живой пример и скачиваем его, если нужно:
jQuery-скрипт «Добавить в социальные сервисы» пример №1
Загрузок: 4001 | Размер: 27 Кб
Пример 2-й
Смотрим отдельный живой пример и скачиваем его, если нужно:
jQuery-скрипт «Добавить в социальные сервисы» пример №2
Загрузок: 3183 | Размер: 27 Кб
Пример 3-й
В связи с многочисленными просьбами сделал также пример, в котором панель просто располагается горизонтально после текста.
jQuery-скрипт «Добавить в социальные сервисы» пример №3
Загрузок: 1911 | Размер: 23 Кб
Установка
-
Подключаем к сайту jQuery (если он еще не подключен) путем добавления в секцию <head></head> следующей строки:
1<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -
Аналогичным образом подключаем скрипт (сразу после jQuery):
1<script type="text/javascript" src="ПУТЬ_ДО_СКРИПТА/socializ.js"></script> -
В шаблоне своего сайта ищем код, который выводит текст статьи, и прямо перед ним или сразу после него подключаем функцию скрипта:
1<script type="text/javascript">socializ(encodeURIComponent('Ссылка на статью'),encodeURIComponent('Название статьи'))</script>Для пользователей WordPress эта строчка будет выглядеть так:
1<script type="text/javascript">socializ(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))</script> -
В файл стилей вашего сайта добавьте следующие стили (в зависимости от варианта панели, который вы используете):
-
Для 1-го и 2-го примеров:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39#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-го примера:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32#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;
}
-
-
В вверху скрипта находим следующие строки и указываем нужные значения для вашего сайта:
1
2
3var m1 = 140; /* расстояние от начала страницы до плавающей панели */
var m2 = 20; /* расстояние от верха видимой области страницы до плавающей панели */
var f = 'http://site.ru/socializ/i/'; /* путь к папке с изображениями кнопок */
Работает кроссбраузерно (за минусом IE6). Проверял в Opera, FireFox, Chrome, Safari (есть косячок), IE8, IE7.
Вот и все. Надеюсь, вам понравится.
* * *
Контент-студия “100 текстов” пишет уникальные статьи и тексты на заказ. Это и копирайтинг, и рерайтинг и SEO-тексты.
Добрый вечер! Подскажите, пожалуйста, можно ли сделать кнопки не прозрачными? Они, конечно, теряют прозрачность, когда на них курсор наводишь. Но хотелось бы в постоянном режиме иметь яркие кнопки. Спасибо.
Из файла с расширением .js удалите эту часть кода:
2
3
4
5
6
7
8
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}); }
);
Подскажите, пожалуйста, можно ли выравнивать http://pro100-wordpress.ru/wp-content/uploads/2011/12/12.jpg ?
В статье указано, где менять этот отступ.
как сделать не закруглённую css рамку ?
Удалите эти строки:
2
3
-webkit-border-radius: 4px;
border-radius: 4px;
Доброе время суток! Сайт с фиксировонной левой колонкой (не скролится) Хотел внизу прикрепить 5 кнопочек по горизонтали На сервисе Share42.com сгенерировал нужные кнопки Скачал архив А вот что теперь делать не знаю! В описании установки они вставляются в статью а как сделать чтобы их разместить в одно место на неподвижную колонку?
Спасибо.
Вставьте в код этой колонки.
share42(’http://site.ru/share42/’,'link; } ?>’,'title; } ?>’)
Вставляю это но они не отображаются?
Подскажите, пожалуйста, как сделать что бы новый сайт (твитер и т.д.) открывался в том же окне?
Из скрипта удалите это:
У меня такого нет. Вот скрипт, который я скачал:
[вырезано]
Есть, в нижней части скрипта.
Здравствуйте, а как можно сделать, чтоб ссылку в твитере укорачивало?
В скрипте итак уже используется способ с укорачиванием.
Объясните пожалуйста, что сделать, что бы не заезжало на страницу при уменьшении разрешения?
Ссылка.
Без живого примера не могу сказать.
как google +1 впихнуть подскажи пожалст)
Вот так - http://dimox.name/google-plus-one-and-share42/
Привет!
В закладки с главной страницы сайта wordpress попадает только последний пост, а хотелось бы всю главную страницу. Может не в то место шаблона (index.php) вставил?
Спасибо!
Скрипт не предназначен для главной.
А жаль(
А во на joomla с главной страницы сайта создает закладки, т.е. именно с той страницы на, которой находится пользователь (это и логично) создаются закладки.
Скрипт не предназначен для главной, только на wordpress?
Здравствуйте, а как будет выглядеть “Ссылка на статью” для DLE ?
Я не пользуюсь этим движком, поэтому не могу подсказать. Ищите инструкции.