Блок «Поделиться» от Яндекса v.2

Ну вот, наконец-то Яндекс обносил шару кнопок соцсетей. Теперь их внешний вид стал гораздо симпатичнее.

Блок «Поделиться» помогает посетителям вашего сайта быстро публиковать ссылки на интересные им страницы в социальных сетях и блогах.

Блок «Поделиться» позволит пользователям вашего сайта или блога в один клик поделиться контентом сайта в социальных сетях.

Как добавить блок на страницу

Вы можете создать блок для своего сайта с помощью конструктора (https://tech.yandex.ru/share/). Описание дополнительных параметров ищите в документации.

Или настроить все вручную.

1. Подключите скрипт блока. Чтобы загружать скрипт асинхронно и не блокировать загрузку страницы, укажите атрибут async=»async».

   <script src="https://yastatic.net/share2/share.js" async="async"></script>

    
2. Поместите блок в контейнер. В качестве контейнера можно использовать любой блочный элемент, добавив атрибут class=»ya-share2″.

   <div class="ya-share2" data-services="vkontakte,twitter,facebook,gplus" data-counter></div>

   Настроить блок вы можете с помощью атрибутов контейнера (см. в таблице ниже).

Поддерживаемые атрибуты

Атрибут	Описание	Возможные значения
data-bare	Признак того, что загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка.	Наличие или отсутствие атрибута.
data-counter	Признак того, что на кнопке соцсети отображается счетчик публикаций. Внимание! На кнопке Твиттера счетчик публикаций отображаться не будет — Твиттер больше не поддерживает API с количеством публикаций.	Наличие или отсутствие атрибута.
data-copy	Позиция кнопки Скопировать ссылку. Кнопка Скопировать ссылку может отображаться, если используется параметрlimit.	first — кнопка внизу списка; last — кнопка вверху списка; hidden — кнопка не отображается. Значение по умолчанию: last.
data-description	Текст, которым нужно поделиться.	Строка.Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-image	Изображение, которым нужно поделиться.	URL изображения.Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-lang	Язык блока. Локализуются подписи кнопок соцсетей и кнопка Скопировать ссылку.	az — азербайджанский; be — белорусский; en — английский; hy — армянский; ka — грузинский; kk — казахский; ro — румынский; ru — русский; tr — турецкий; tt — татарский; uk — украинский. Значение по умолчанию: ru.
data-limit	Количество соцсетей, отображаемых в виде кнопок. Используется если нужно встроить в блок много соцсетей, а также чтобы блок занимал мало места на странице. Не вошедшие в лимит соцсети будут доступны по нажатию кнопки .	Натуральное число или отсутствие атрибута.
data-services	Список идентификаторов социальных сетей, отображаемых в блоке.	Несколько соцсетей указываются через запятую без пробела. Значение по умолчанию: vkontakte,facebook,twitter
data-size	Размер кнопок соцсетей.	m — большой ; s — маленький . Значение по умолчанию: m.
data-title	Заголовок, которым нужно поделиться.	Строка. По умолчанию указывается заголовок страницы, на которой размещен блок. Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.
data-url	Ссылка, которой нужно поделиться.	Любой URL.По умолчанию указывается URL страницы, на которой размещен блок. Некоторые соцсети могут обрабатывать большие строки некорректно. Вы можете сразу указывать значения параметров контента с учетом этого или указать значения для таких соцсетей отдельно.

Как было раньше. Очерки истории

Дата 28.12.2010

Взамен буржуйского AddThis (www.addthis.com) с кнопочками для сохранения понравившихся постов в соцсети, поставил на свой блог блок от Яндекса «Поделиться».

Блок «Поделиться» позволит читателям вашего блога в один клик поделиться понравившемся постом в социальных сетях. Вещь полезная и нужная. Потому что, когда информация распространяется непринужденно и появляются естественные ссылки, популярность блога, несомненно будет расти.

Дизайн блока «Поделиться» легко настраивается. На Яндексе есть подробная документация и инструкции по установке (//api.yandex.ru/share/).

Можно выбирать социальные сети, которые будут отображать на поверхности. Остальные появляются в открывающемся окошке после нажатия на ссылку «Поделиться». По умолчанию доступными сделал: Я.ру, Твиттер, Фейсбук и ЖЖ.

Список поддерживаемых сервисов

В настоящее время Блок «Поделиться» поддерживает обмен ссылками с пользователями следующих социальных сетей:

1. Blogger;
2. Digg;
3. Evernote;
4. delicious;
5. facebook;
6. FriendFeed;
7. Google Buzz;
8. Google Reader;
9. Juick;
10. LinkedIn;
11. Живой Журнал;
12. Мой Круг;
13. Мой Мир;
14. MySpace;
15. Одноклассники.ru;
16. Twitter;
17. ВКонтакте;
18. Я.Ру;
19. Яндекс.Закладки.

В отличие от сервиса AddThis, Яндекс поддерживает самые популярные в рунете. В AddThis их столько много за счет иностранных социалок, что пока отыщещь нужный, то желание поделиться ссылкой со своими друзьями может пропасть навсегда :).

Настройка дизайна и оптимизация внешних ссылок

Визуализацию яндексовского социального блока пришлось немного подправлять с помощью CSS: указав размер и цвет слова «Поделиться» и задав отступы для контейнера соцблока.

Но есть одно «но». Теперь каждая страница получила сразу же по 10 исходящих ссылок! (другие спрятаны под ссылкой «Поделиться»). Если будут появляться новые социальные сайты, то и ссылок на каждой странице увеличится. А этого не очень хочется для своего блога. Потому я поместил весь код в тег noindex, но его понимает только Яндекс.

<code>&lt;!--noindex--&gt;</code>
<code>&lt;script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"&gt;&lt;/script&gt;</code>
<code>&lt;div class="yashare-auto-init" data-yashareType="link" data-yashareQuickServices="yaru,twitter,facebook,lj"&gt;&lt;/div&gt;</code>
<code>&lt;!--/noindex--&gt;</code>

Хотелось бы как-то добавить rel="nofollow". Но не знаю как :(. Может кто-то подскажет?

UPD: Находчивый Georg подсказал в комментах решение этого вопроса :).