поделись в соц. сети:

9 марта 2013 г.

Как установить боковую панель с кнопками социальных сетей Yandex.Share?

Боковая панель с кнопками социальных сетей

В этом уроке:

  1. Используется стандартная инициализация Yandex.Share;
  2. Меняются стандартные иконки Yandex.Share на кастомные с использованием css спрайт;
  3. Добавляется небольшой jQuery скрипт, который регулирует положение панели на странице;
  4. Есть отдельный видиоурок дополняющий и демонстрирующий как вставить эту боковую панель для сайтов сделанных на WordPress.

В качестве примера, слева зафиксированная панель кнопок социальных сетей от Yandex.Share с кастомными иконками.

Демо на jsbin.com | Скачать

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>Как установить боковую панель с кнопками социальных сетей Yandex.Share?</title>

<!-- Your styles -->
<link rel="stylesheet" href="styles/style.css" />

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body>
    <pre>
        ...
    </pre>
    <div id="the_share"></div>
    <script src="http://yandex.st/share/share.js"></script>
    <script>
        new Ya.share({
            element: 'the_share',
            elementStyle: {
                'type': 'none',
                'quickServices': ['yaru', 'vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'moimir', 'lj', 'gplus']
            }
        });
    </script>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="scripts/jquery.sharebar.js"></script>
</body>
</html>
/* styles/style.css */

#the_share {
    position:fixed;
    left:50px; /* margin-left: -100px; для выравнивания относительно wrapper-а */
    top:300px;
    height:336px;
    width:40px;
    z-index:999;
    font-size:0;
}

#the_share .b-share {
    width:100%;
    height: 100%;
    font-size:0;
}
 
#the_share .b-share .b-share__handle {
    padding:1px!important;
}
 
#the_share .b-share .b-share__handle, 
#the_share .b-share .b-share-icon {
    width:40px;
    height: 40px;
    float:none !important;
    display:block !important;
}

#the_share .b-share-icon_yaru,
#the_share .b-share-icon_vkontakte,
#the_share .b-share-icon_facebook,
#the_share .b-share-icon_twitter,
#the_share .b-share-icon_odnoklassniki,
#the_share .b-share-icon_moimir,
#the_share .b-share-icon_lj,
#the_share .b-share-icon_gplus {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh1A7xl0W5s-XyvSv530007oLUbSMVBEcOihfW96kMkjXuoxkJH1CJ88XElbwB12ENlOZt1KnL4EfqJJEtY9_rHwkUd_saRHXSmZT0jhpISO9y75KQLeaxoxX-NTdZiZVbJMlz4pv7b24/s401/sprite.png) no-repeat;
}

#the_share .b-share-icon_yaru {
    background-position:0 0;
}

#the_share .b-share-icon_vkontakte {
    background-position:-40px 0;
}

#the_share .b-share-icon_facebook {
    background-position:-80px 0;
}

#the_share .b-share-icon_twitter {
    background-position:-120px 0;
}

#the_share .b-share-icon_odnoklassniki {
    background-position:-160px 0;
}

#the_share .b-share-icon_moimir {
    background-position:-200px 0;
}

#the_share .b-share-icon_lj {
    background-position:-240px 0;
}

#the_share .b-share-icon_gplus {
    background-position:-280px 0;
}
/* scripts/jquery.sharebar.js */

jQuery(document).ready(function ($) {

    var $ss = $('#the_share');
    start_t = parseInt($ss.css('top'), 10);
    stop_t = 50;

    $(document).scroll(function () {
        var top = parseInt($(document).scrollTop(), 10);
        if (top + stop_t < start_t) {
            $ss.css({
                top: start_t - top
            });
        } else {
            $ss.css({
                top: stop_t
            });
        }

    });

});

В предыдущих уроках я рассказывал про то:
Как установить кнопки социальных сетей Yandex.Share?
Как изменить внешний вид иконок Yandex.Share?