Яндекс "Поделиться" - черно-белые кнопки

Мои загребущие руки добрались до очередного сервиса Яндекса под названием Блок "Поделиться". Напоминаю, что это набор из 20 кнопок различных социальных сетей, включая сервис закладок. Казалось бы, что в нём искать? Оптимизированные до невозможности кнопки, удобство подключения, как тема для статьи - полный баян.

Читатели наверное давно заметили, что у меня до недавнего момента не было никаких кнопок социалок. Я уже писал, что эти тыцки одноклассников и вконтакте меня раздражают, особенно, когда они огромные и переливаются всеми цветами полиграфии.
Но если посмотреть с практической стороны, то пользя, какая-никакая, но всё же от них есть. Да и не на одном "Поделиться" свет клином сошёлся, существует достаточно сервисов социальных закладок, из которых наиболее выделяются Addthis и Share42.

Но я решил остановиться на предложении Яндекса просто потому, что там маленькие иконки. Но просто установить и забыть - it's not my way. Мне нужно нечто особенно, чтобы не раздражало цветовой гаммой, а значит сочеталось с внешним видом страниц и было не таким, как у большинства.
Поэтому я сделал в Блоке "Поделиться" чёрно-белые (обесцвеченные) кнопки-иконки. Удачно это или нет, но вы можете посмотреть, пролистав страницу вниз ↓ (только не забудьте вернуться).
А здесь я оставлю демо-скриншот на тот случай, если надумаю что-либо изменить в блоге:


Для тех, кто захочет повторить мои действия, прилагаю подробный мануал:

1) В основу кнопок "Поделиться" положен скрипт share.js, который мы каждый раз грузим с севера Яндекса. В этом скрипте записано всё, включая ссылки на спрайты кнопок и стили к ним. Т.е. если запастись терпением, можно переписать все стили под свои кнопки и стать довольным слоном. Я до таких подвигов пока не созрел.

Спрайтов для "Поделиться" всего два: b-share-icon.png и b-share-icon_size_14.png. Их надо скачать и обесцветить в графическом редакторе. Отличаются оба спрайта друг от друга тем, что кнопки у второго имеют закруглённые углы и немного получше выглядят. Вообще, в скрипте вы можете найти пути к другим картинкам, но будем считать, что нас интересует виджет "только иконки".

Затем на своём хостинге создаём папку static где-нибудь в папке, например, scripts. В эту папку закидываем оба отредактированных спрайта.
Открываем скрипт share js, находим через поиск браузера пути к этим картинкам (спрайтам) и меняем на пути к своим файлам на хостинге. Скрипт сохраняем и тоже копируем на хостинг, для порядка в папку static.

Теперь заходим на страничку сервиса, генерируем себе содержание "Поделиться" с кнопками по вкусу


Этот код пока сохраняем в блокнот и меняем в нём путь к скрипту share.js на свой файл, который мы, предположительно, захостили в папке static.
Этот шаг с предварительной настройкой Блока "Поделиться" можно считать готовым.

Переходим к моменту установки в блог, например, в Blogger.
В голову шаблона, перед тегом </head> вставляем ссылку на скрипт, о котором только что шла речь:
<script type="text/javascript" src="//ваш_хостинг/scripts/static/share.js" charset="utf-8"></script>

Теперь находим в шаблоне тег <data:post.body/> и вставляем после него вторую часть полученного в Яндексе кода с элементами div, добавив теги запрета индексации для Яндекса и условие для Blogger'а, чтобы кнопки были видны только на внутренних страницах:
<b:if cond='data:blog.pageType == "item"'><noindex><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,blogger"></div></noindex> </b:if>
Если есть желание, можете украсить Блок "Поделиться" стилем и добавить сопутствующую кнопкам надпись, типа: "поделись статьей".

6 комментариев:

  1. Оцени этот вариант http://share.lockerz.com/
    и маленький и кнопок открывается не меряно, установил за 2 сек.
    мне нраится.

    ОтветитьУдалить
  2. Ах вот откуда "однакнопка" стырила идею).
    Самое интересное кроется на странице customize. Надо будет покопать в ту сторону).

    ОтветитьУдалить
  3. o_O
    Давно я не слышал этот эпитет. Так давно, что забыл значение этого слова. Но нет, всё-таки вспомнил=)

    ОтветитьУдалить
  4. Класс! А можно выложить готовый скрипт?

    ОтветитьУдалить