В этом уроке:
- Используется стандартная инициализация
Yandex.Share; - Меняются стандартные иконки
Yandex.Shareна кастомные с использованиемcss спрайт; - Добавляется
небольшой jQuery скрипт, который регулирует положение панели на странице; - Есть отдельный видиоурок дополняющий и демонстрирующий как вставить эту боковую панель для сайтов сделанных на WordPress.
В качестве примера, слева зафиксированная панель кнопок социальных сетей от Yandex.Share с кастомными иконками.
<!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?
