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

2 марта 2013 г.

Как изменить внешний вид иконок Yandex.Share?

Как изменить внешний вид иконок Yandex.Share?

Из этого урока ты узнаешь:

  1. Как сделать стандартную инициализацию панели Yandex.Share;
  2. Как изменить стандартные иконки 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? Простое объяснение "на пальцах".
Как получают и передают информацию современные молодые люди?