Как поставить свои кнопки поделиться?

Автор artanik    4 коммент. »

Здравствуйте читатели моего блога! Недавно мне поступил заказ на вёрстку сайта под WordPress. Собственно вот сайт: http://diablo-3.ws/. Одно из требований вёрстки, использование кнопок «поделиться», но оформление точно такое же, как на макете. Сверстал шаблон быстро, но когда остались кнопки, я начал ломать голову в поисках решений. Времени читать документацию по API всех соц. сетей, которые нужны, не было. Тут я вспомнил, что есть сервис от Яндекса, и решил использовать его. Но как же вставить свои иконки?

Социальные сети очень популярны, и в них проще всего распространять информацию. Замечу, что «поделиться» и «мне нравиться» — разные кнопки. Если посетитель сайта «поделиться» записью со своими друзьями в социальной сети, есть шанс найти целевого посетителя, и это очень полезно для сайтов. Что для этого нужно? Одно из решений, это заходить на сайты соц. сетей и работать с их API, но тогда все кнопки будут стандартные, то есть такие, какие предлагает сама соц. сеть. Что бы их поменять, нужно знать как минимум JavaScript, API соц. сети, CSS, HTML. С двумя последними проблем нет, с JavaScript можно разобраться, а вот API заберёт много времени на изучение, которого обычно нет.

Я предлагаю простой способ добавить свои кнопки поделиться, с уникальными изображениями. Что для этого нужно?

Первое, переходим сюда http://api.yandex.ru/share/, выбираем «Внешний вид блока» только иконки и соц. кнопки, которые вы желаете видеть. Копируем получившейся код. У меня он такой:

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

Следующий шаг, добавить код в то место на сайте, где бы Вы хотели видеть кнопки. Для Joomla сделать кнопки в статьях сложно, но с этим может справиться плагин, который скоро будет готов. Для Wordpres проще, нужно отредактировать файл single.php вашего шаблона. Для DLE изменяем файл shortstory.tpl. Сейчас для нас важно изменить именно иконки. Это легко сделать, ищем класс стилей с помощью плагина FireBug для браузера FireFox или плагина DragonFly для браузера Opera, отвечающее за оформление кнопок. Вам не придётся ничего искать, я сделал это за Вас.

1. .b-share — самый главный класс, это блок с иконками
2. .b-share__handle .b-share__link — ссылки, тег <a>
3. b-share-icon b-share-icon_moikrug — иконки, тег <span>

Нас интересует последний класс, b-share-icon_moikrug, он отвечает за стиль конкретной иконки, а то что выделено жирным, имя конкретной иконки. Их немного, и все они кстати указаны в кусочке кода, который вы скопировали, смотрим атрибут yashareQuickServices = «vkontakte, facebook, twitter, odnoklassniki, moimir», их может больше, выбираете и вставляете в css. Кстати если в этом атрибуте поменять местами значения, например vkontakte поместить в конец, то так будет и на сайте, вдруг кому нужно в конкретном порядке их отобразить.

Итак меняем иконку например b-share-icon_vkontakte:

.b-share-icon_vkontakte {
    background:url(images/vkontakte.png) !important;
    width: 48px !important;
    height: 48px !important;
}

Конструкция !important нужна для того, что принудительно заставить браузер, обойти привилегии идентификаторов и классов. Если не написать, то браузер во истину иерархии проигнорирует ваши труды. Имейте ввиду. Но есть один минус, если Яндекс поменяет классы в скрипте, то вам тоже нужно будет менять класс в css.

Думаю найти иконки проблем не составит, но хотел бы порекомендовать сервис по поиску иконок: www.iconfinder.com. Также помогут поиск по картинкам от Google и Яндекс.

Кстати решил попробовать себя в написании плагинов для CMS. То что получилось, Вы можете наблюдать на моём блоге. Это те самые кнопки «поделиться» от Яндекса, только установка проще. Доступны плагин для WordPress и Joomla. Также доступен модуль для DLE. Вы можете скачать данный плагин, и оставить отзыв.
Я надеюсь, что смог Вам помочь в решении данной проблемы. Удачи!