Как сделать соцзакладки со своими картинками

Как сделать соцзакладки со своими картинками

8 мая 2013 • 365psd
Как сделать соцзакладки со своими картинками
Как сделать соцзакладки со своими картинками, используя сервис Яндекса "Поделиться"

Если вы хотите сделать иконки социальных закладок, используя популярный сервис от Яндекса Сервис Яндекса и использовать при этом свои собственные картинки, то сделать это очень просто. При минимуме знаний это сделает любой. Все, что нужно сделать - это вставить собственные стили CSS.

К примеру. вы выбрали три сервиса - Вконтакте, Фэйсбук и Твиттер. Яндекс предложит вам вставить скрипт в то место, где вы хотите видеть эти закладки. Вот этот код - строка "vkontakte,facebook,twitter" - определяет, какие закладки и в какой последовательности будут показываться.

Сначала сделаем картинку-спрайт. Каждая отдельная иконка размером 40х40 px. Естественно, вы можете сделать тот размер, который вам нужно.



<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yash are-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices ="vkontakte,facebook,twitter"> </div>


Закачиваем ее на сервер в любое удобное вам место. Далее в стилях CSS нам будет необходимо указать путь к этой картинке.

Итак, вы вставили скрипт Яндекса в то место, где хотите видеть иконки. Теперь все, что остается сделать - вставить под скриптом стили CSS.

Важно: стили или ссылку на внешний файл стилей необходимо вставлять именно под скриптом, чтобы отменялись правила, которые прописаны в файле стилей Яндекса.

Вставляем под скриптом следующий код:

.b-share-icon
{
	/*background-color:#5d6166!important;*/ 
	/*Если будете использовать прозрачные картинки*/
	cursor:pointer;
	display:inline-block;
	height:40px;				/*Высота одиночной иконки*/
	width:40px;				/*Ширина одиночной иконки*/
	margin-left:3px; 			/*Расстояние между иконками*/
	overflow:hidden;
	padding:0 !important;
	vertical-align:top;
	background:url(sprite.png) 0 0 no-repeat 
	/*Не забудьте указать путь к вашей картинке-спрайту*/
}

	.b-share-icon_vkontakte{background-position:0 0}
	.b-share-icon_vkontakte:hover{background-position:0 -40px}
	.b-share-icon_facebook{background-position:-40px 0}
	.b-share-icon_facebook:hover{background-position:-40px -40px}
	.b-share-icon_twitter{background-position:-80px 0}
	.b-share-icon_twitter:hover{background-position:-80px -40px}

Вот, собственно, и все. Это самый простой способ - без изменения Java-скрипта.

Вот сервисы, которые на сегодняшний день поддерживает сервис Яндекса "Поделиться":
Некоторые из них вы не найдете на странице конструктора закладок, их надо искать в документации. Чтобы сервисы, которые вы хотите увидеть у себя на странице, появились у вас, просто добавьте в скрипт Яндекса в строку, где перечисляются сервисы, нужные вам названия. Например - "vkontakte,facebook,twitter,gplus,moimir,blogger". Т.е. используйте первые латинские названия из списка. В результате будет так: Писать нужно в одну строку и не забудьте, что в конце строки запятая не нужна, иначе работать не будет!

Чтобы добавить нужные стили для каждого сервиса, нужно идти по тому же пути:

.b-share-icon_gplus: {стиль}
.b-share-icon_moimir: {стиль}
.b-share-icon_blogger: {стиль}

В случае, если вы захотите использовать сервис с кнопкой , необходимо добавить в стили:
.b-share__handle .b-share-form-button {margin-top:20px;} , где 20px - величина отступа от верхней границы блока. (Величина дана для примера). К тому же необходимо будет нарисовать все картинки, на сервисы которых ссылается выпадающее меню и прописать им стили. В выпадающем меню они будут появляться такими, как вы их нарисовали и с размерами, которые вы указали. Тем же путем (используя стили), можно заменить и саму кнопку.

Эта статья написана для новичков, но, может быть, будет полезна и более опытным.

Исходники иконок русских социалок
Рейтинг: +3 Голосов: 3

Комментарии (6)

0 2 августа 2013 в 17:03

Большое спасибо! Давно искал этот урок. Можно его перевести в видео-формат?

Ответить
365psd 3 августа 2013 в 19:31

А что тут снимать? Сплошной код... Скопировал, вставил... подправил... smile

Ответить
superalexey 10 августа 2013 в 20:44

Обьяснительный видеоурок, просто обьясню всё это в видео

Ответить
365psd 12 августа 2013 в 03:13

Я думал, мне надо это делать scratch Да пожалуйста, пишите в личку, договоримся.

Ответить
Андрей 27 декабря 2013 в 09:54

А у Инстаграмма бфвают иконки?

Ответить
Вячеслав 23 июля 2014 в 04:46

не работает!

Ответить