Из этого урока ты узнаешь:
- Как сделать стандартную инициализацию панели
Yandex.Share; - Как изменить стандартные иконки
Yandex.Shareна кастомные с использованиемcss спрайт.
<!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>
<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']
},
link: 'http://blog.olegorlov.com',
title: 'Олег Орлов - Технические инструменты инфобизнеса',
serviceSpecific: {
twitter: {
title: '@olegik_orlov Текст twitter сообщения',
}
}
});
</script>
</body>
</html>/* styles/style.css */
#the_share {
text-align:center;
}
#the_share .b-share {
height:50px;
}
#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 {
width:52px;
height:50px;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQiNNHOzGeFR9UFeNIjZJUb1IWr1fL405bbHP4beOdNOZt0k9CKXXhcjFJlRRgJiChEGhxVIkcJl6P3RieljFRQzXmoXLeyuCbfv2ZqCurAoKEr4hl9NRm_WcO4badbnM0J1ZyfIsAmXI/s200/share.png) no-repeat;
}
#the_share .b-share .b-share__handle {
padding:0!important;
}
#the_share .b-share-icon_yaru {
background-position:0 -100px;
}
#the_share .b-share-icon_vkontakte {
background-position:0 -50px;
}
#the_share .b-share-icon_facebook {
background-position:-52px -100px;
}
#the_share .b-share-icon_twitter {
background-position:-52px -150px;
}
#the_share .b-share-icon_odnoklassniki {
background-position:0 -150px;
}
#the_share .b-share-icon_moimir {
background-position:-52px 0;
}
#the_share .b-share-icon_lj {
background-position:0 0;
}
#the_share .b-share-icon_gplus {
background-position:-52px -50px;
}В предыдущих уроках я рассказывал про то:
→ Как установить кнопки социальных сетей Yandex.Share?
→ Зачем мне twitter? Простое объяснение "на пальцах".
→ Как получают и передают информацию современные молодые люди?
