Расово верные социальные кнопки

Довольно давно я нашёл для себя отличный способ засунуть нужные кнопки социальных сетей на сайт.

Секрет всех домохозяек - пользоваться блоком "Поделиться" от Яндекса, нужно только правильно его приготовить, чтобы внешний вид радовал, а не заставлял искать бабушкины очки (иконки там ну очень мелкие). Готовить будем по рецепту, ссылку на который дал выше, вот только способ немного изменим.

Итак, для начала покажу что получилось:

А вот, для сравнения, стандартный вариант от Яндекса:

Думаю очевидно, где кликов больше.

В принципе можно долго писать как я пришёл к успеху добился такого внешнего вида, но лучше просто расскажу как сделать также, ибо всё должно быть понятно.

Для начала скачайте эту картинку:

Теперь в нужном месте, где будут отображаться кнопки, вставьте следующий код:

<div class="yashare-auto-init" data-yasharel10n="ru" data-yasharetype="none" data-yasharelink="<?php the_permalink(); ?>" data-yasharetitle="<?php the_title(); ?>" data-yasharequickservices="twitter,gplus,vkontakte,facebook,odnoklassniki,moimir"></div>

А в конце страницы, перед тегом, введите следующий код:

<script charset="utf-8" type="text/javascript" src="//yandex.st/share/share.js"></script>

И в css файле своего сайта пропишите следующее:

.b-share-icon {
background: url("images/soc.png") no-repeat scroll 0 0 transparent !important;
height: 20px !important;
}
.b-share__handle {
height: 20px !important;
}
.b-share__handle, .b-share-icon {
padding:0 10px 0 0 !important;
}
.b-share-icon_twitter {
background-position:0 0px !important;
width: 75px !important;
}
.b-share-icon_gplus {
background-position: 0 -20px !important;
width: 32px !important;
}
.b-share-icon_vkontakte {
background-position: 0 -40px !important;
width: 113px !important;
}
.b-share-icon_facebook {
background-position: 0 -60px !important;
width: 106px !important;
}
.b-share-icon_odnoklassniki {
background-position: 0 -80px !important;
width: 58px !important;
}
.b-share-icon_moimir {
background-position: 0 -100px !important;
width: 79px !important;
}

Всё, теперь у вас такой же блок с социальными кнопками, как у меня.

А теперь приведу очевидные плюсы от использования сервиса Яндекса:

• Минимум кода, не нужно лазить по десяткам сайтов в поисках способа вставить кнопки разных социальных сетей
• Более быстрая загрузка, ибо не будет десятков запросов к социальным сетям
• Асинхронная загрузка. Если упала социалка, то и кнопки работать не будут, и страница на вашем зайте не сможет догрузиться. А тут всё тип топ, никакой зависимости. Плюс если и Яндекс упадёт, всё равно страница на вашем сайте загрузится
• Раз это сервис от Яндекса, и все ссылки с новыми постами проходят через его сервера, то поисковые боты быстрей узнают об обновлениях на сайте

В общем сплошные удобства.