Socializer - Плагин скользящей панели с иконками социальных сетей

Рейтинг:

Дата: 15 сентября 2011 22846 66

Твитнуть

В последнее время социальные сети набирают все большей и большей популярности. Все больше людей начинают открывать аккаунты в тех или иных соц.сетях. Делают они по разным причинам. Кто-то просто чтобы пообщаться с друзьями и единомышленниками, кто-то для продвижения своих товар и услуг, кто-то для создания своего бренда и т. д. Не обошло это и меня стороной. Создал себе аккаунт в твиттере и facebook. Кстати говоря, можете теперь меня там читать!

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

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

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

Тем самым, когда пользователь ознакомился с материалом на сайте и ему он понравился, ему плавно показывается панель со ссылками на аккаунты социальных сетей. При наведении мыши на ссылку она становится не прозрачной и смещается в сторону на 10px. В общем смысл понятен, я надеюсь?

В результате появился на свет плагин jquery.socializer.js, который имеет гибкие настройки и подойдет для любого сайта.

ДЕМО  ИСХОДНИКИ 

Для того чтобы создать у себя на сайте подобную панель с закладками в социальные сети, необходимо подключить библиотеку jQuery и собственно сам плагин.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="/js/jquery.socializer.js"></script>

Далее необходимо создать сам плавающий блок со ссылками. У меня он выглядит так:

<div class="soc_buttons" id="soc_buttons">

    <a title="Следите за мной на twitter" target="_blank" href="http://twitter.com/ivanshamshur"><img src="/images/icons/twitter_new.png" ></a>

    <a title="Следите за мной на facebook" target="_blank" href="http://www.facebook.com/ivan.shamshur"><img src="/images/icons/facebook_new.png"></a>

    <a title="Следите за мной по RSS" target="_blank" href="http://feeds.feedburner.com/biznesguide"><img src="/images/icons/rss_new.png"></a>  

</div>

Его необходимо разместить непосредственно перед закрывающим тегом </body>.

Кстати говоря, в этом блоке можно разместить все что угодно!

Можно прописать стили:

.soc_buttons {
    position: absolute;
    right: 0;
    top: 152px;
    width: 70px;
}

.soc_buttons a {
    display: block;
    position: relative;
}

Далее идет вызов самого плагина:

<script type="text/javascript">
$(function(){
    $('#soc_buttons').socializer();
})
</script>

Данная строчка вызовет плагин с параметрами по умолчанию. Полный список параметров смотрите ниже:

Для придания больших эффектов необходимо испльзовать плагин - jquery.easing.js

Несколько примеров использования:

$(function(){
    $('#soc_buttons').socializer({
        position: 'left',
        type: 'fixed',
        scrolltop: 50,
        opacity: 1        
    });
});

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

Если необходимо задать блок на странице, относительно которого будет изменяться прозрачность, то нужно использовать такой вызов плагина:

$(function(){
    $('#soc_buttons').socializer({
        container: '#id_blocka'    
    });
});

т. е. указываем ID блока и впереди ставим знак решетки.

Плагин очень простой, при желании Вы можете переделать его под свои нужды.

ДЕМО  ИСХОДНИКИ 

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

• Комментарии (66)
• Сайт
• Facebook

Представьтесь:

Ваш e-mail:

Адрес сайта
(если есть):

Сообщение:

 

Введите цифры:

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?