Как добавить и стилизовать кнопки «Рассказать друзьям» от соц. сетей

Довольна часто можно встретить на веб-сайтах кнопки от социальных сетей «рассказать друзьям». Это не удивительно, ведь ссылка на блог или сайт, расположенная в соц. сети может привести много пользователей.
Я тоже решил не отставать от других сайтов и задумал разместить соц. кнопки от Вконтакте, FaceBook, twitter и одноклассников себе на блог. Для этого можно воспользоваться несколькими способами. Первый — зарегистрироваться на каждой соц.сети, зарегистрировать свой сайт и получить код для каждой кнопки. Второй способ: воспользоваться каким-нибудь сервисом, который предоставляет виджеты для установки сразу всех кнопок.

Второй способ мне понравился больше, поскольку это быстрей и проще. Таких сервисов достаточно много, но мне больше всего приглянулся от Яндекса. Одно из преимуществ яндексовского виджета является возможность быстро стилизовать кнопки под себя.
Для того чтоб получить код виджета нужно перейти по этой ссылке http://api.yandex.ru/share/ и выбрать необходимые соц.сети, кнопки которых будут добавлены на сайт. Полученный код можно вставить на необходимые страницы сайта и все, на этом установка закончена.
Но я на этом не остановился, я решил изменить отображение кнопок, поскольку стандартные уже приелись — на всех сайтах одно и тоже. Для стилизации достаточно просто обернуть полученный у яндекса код в

<div class="myDiv"></div>

и написать несколько строк в css.
Ниже я привел код, который стилизует кнопки:

<style>
    .myDiv .b-share-icon_vkontakte{
        background: url("/img/vk.jpg") no-repeat 0 0;
        width: 32px;
        height: 32px;
    }
    .myDiv .b-share-icon_facebook{
        background: url("/img/fb.jpg") no-repeat 0 0;
        width: 32px;
        height: 32px;
    }
    .myDiv .b-share-icon_twitter{
        background: url("/img/tw.jpg") no-repeat 0 0;
        width: 32px;
        height: 32px;
    }
    .myDiv .b-share-icon_odnoklassniki{
        background: url("/img/od.jpg") no-repeat 0 0;
        width: 32px;
        height: 32px;
    }    
    .myDiv .b-share-icon{
        margin-left: 10px;
    }
</style>
<script type="text/javascript" src="//yandex.st/share/share.js"charset="utf-8"></script>
<div class="myDiv">
    <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki"></div> 
</div>
Рассказать друзьям:


Как добавить и стилизовать кнопки «Рассказать друзьям» от соц. сетей: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*