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

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

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

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

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

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

ya-share2

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

  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 подсказал в комментах решение этого вопроса :).


Like this post? Please share to your friends:
Comments: 51
  1. Обзоркин

    а зачем noindex? здесь ведь даже ссылки нет никакой…

  2. FORTRESS-DESIGN (автор)

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

    api.yandex.ru/share/
    share.yandex.ru/go.xml?service=ya...	
    share.yandex.ru/go.xml?service=tw...	
    share.yandex.ru/go.xml?service=fa...	
    share.yandex.ru/go.xml?service=lj...	
    share.yandex.ru/go.xml?service=vk...	
    share.yandex.ru/go.xml?service=mo...
    share.yandex.ru/go.xml?service=fr...
    share.yandex.ru/go.xml?service=od...
    
    1. Grey

      Ну и что если генерирует? Google, yandex же не индексирует javascript

  3. Georg

    Я использовал и предлагаю такой вариант:

    1) скопировать файл http://yandex.st/share/share.js на свой сервер, отредактировать его, добавив в двух местах rel="nofollow",

    2) затем в коде, который предоставляет Яндекс для вставки это блока, в строке src="//yandex.st/share/share.js скорректировать путь к файлу, указав его размещение на своем сервере.

    В итоге всё работает как надо, только придется самому следить за возможными обновлениями файла share.js и заливать новые версии к себе на сайт.

    1. FORTRESS-DESIGN (автор)

      Спасибо за совет. В принципе, как альтернативный вариант — годится. Наверное тоже попробую сделать так.

      1. Georg

        Уточнение: надо добавить rel="nofollow" еще в одном месте в share.js, там, где ссылка на http://api.yandex.ru/share/ (назначена на слово “Яндекс” в выпадающем блоке), иначе она остается неприкрытой.

        1. FORTRESS-DESIGN (автор)

          Скачал файл share.js. Открыл его в Notepad++. Нажал Ctrl+F и в поле “Найти” написал href=".

          Везде, где встечалось href=", перед ним добавлял rel="nofollow".

          Теперь все ссылки на соцсети и ссылка на яндекс закрыта в ноуфоллоу.

    2. Александр

      А что думаете, если скрипт не копировать, а пройтись с помощью jquery, ну что типа такого:
      $('#ya_share a').attr('rel', 'nofollow')

      1. Антон

        Самое оно

  4. Александр

    Так всё-таки, зачем rel=nofollow, если ссылки генерятся джаваскриптом?

    Яндекс и так их не увидит, а Гугл (умеющий JS исполнять) увидит, но PR отдаст наружу (он его и при nofollow отдаёт).

    1. FORTRESS-DESIGN (автор)

      Какая разница каким образом генерятся ссылки, если SeoQuake показывает dofollow-ссылку?

      Яндекс и так их не увидит

      Еще как увидит. Вы думаете это они случайно забыли ссылочку в nofollow закрыть?

      Гугл PR отдаст наружу при nofollow

      Нет. rel="nofollow" говорит Google о том, что роботу не следует переходить по таким ссылкам или передавать этим страницам вес сайта.

      1. Александр

        > Какая разница каким образом генерятся ссылки, если SeoQuake показывает dofollow-ссылку?

        мы про SeoQuake или про робот яндекса? Покажите мне в кэше в проиндексированном тексте фрагмент кода, сгенеренный JS-ом?

        > Нет. rel="nofollow" говорит Google о том, что роботу не следует переходить по таким ссылкам или передавать этим страницам вес сайта.

        Сорри, я неверно выразился. Западло “nofollow & Google” в том, что акцептору PR не защитается, а вот с донора – спишется.

        > Вы думаете это они случайно забыли ссылочку в nofollow закрыть?

        Домены yandex.st, api.yandex.ru, share.yandex.ru вот прямо жить не могут без ваших входящих ссылок?

        1. FORTRESS-DESIGN (автор)

          В кеше Яндекса эта страница содержит блок «Поделиться» в таком виде:

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

          Да, действительно, там нет сгенерированных ссылок.

        2. FORTRESS-DESIGN (автор)

          Откуда такие сведения, что при наличии nofollow Google с донора изымает вес?

          1. Georg

            http://ru.wikipedia.org/wiki/Nofollow

            По этому поводу много шума было.

        3. Серж

          На 100% согласен !!!
          с донора PR уйдет вникуда

  5. Александр

    Не планируете допилить скрипт и добавить туда закладки гугла? А то ведь многие им пользуются. Хотя наверно проще аоспользоваться сервисом odnaknopka.

    1. FORTRESS-DESIGN (автор)

      Вы имеете в виду Google Buzz?

      А Однукнопку че-то не хочется ставить.

      1. Александр

        Нет, просто закладки гугл. Хотя конечно по смыслу это не очень совпадает с “поделиться”, больше для “в закладки”.
        Но google buzz тоже вариант.

        А у одной кнопки почему-то одноклассников нет.

        1. FORTRESS-DESIGN (автор)

          Мне не нравится дизайн у Однойкнопки.

      2. Александр

        А google buzz там оказывается поддерживается, вот здесь написано Обзор API

        1. FORTRESS-DESIGN (автор)

          Так это его вы рекомендуете добавить?

          1. Александр

            Как я понимаю, популярность google buzz не так уж и высока, а вот от гуглозакладок был бы больший толк. Имхо.

            1. FORTRESS-DESIGN (автор)

              Так, а зачем в блоге добавлять возможность добавлять в закладки? Например, в у меня в Хроме, чтобы добавить в закладки, досточно кликнуть на звездочку в адресной строке.

              1. Александр

                Но в хроме это, как я понимаю, ведет к добавлению в локальные закладки браузера, а не в гугловские ? Просто я пользуюсь FF, с отдельным плагином от гугла. Там кнопка есть для добавления именно в гуглозакладки.

  6. FORTRESS-DESIGN (автор)

    Гугл Хром хранит закладки на сервере http://www.google.com/bookmarks/ и если разрешить синхронизацию, то содержимое этих закладок будет таким же и на домашнем компутере :) Очень и очень удобно. То, что вы добавили в закладки, находясь дома, будет доступно на рабочем компе. Вот так :).

    1. Александр

      Тогда мы говорим об одном и том же ;)
      Просто у Firefox кнопка добавления в закладки гугла находится на отдельной панели.

      1. FORTRESS-DESIGN (автор)

        Я раньше тоже пользовался Firefox’ом, до тех пор, пока у Хрома не появился тулбарный экстеншн для определения Page Rank :). И тот факт, что у Хрома адресная строка одновременно является и полем для ввода поисковых запросов и быстрая работа браузера зделало для меня браузером по умолчанию. Firefox уже только для тестирования кроссбраузерности при разработке сайтов.

  7. Orcinus Orca

    Хорошая статья, сам думал перейти на Яндекс.Шаринг. А никто не думал просто на стороне своего сервера генерировать на PHP или ASP эти кнопочки?

    1. FORTRESS-DESIGN (автор)

      Зачем? Ведь Яндекс уже все сделал.

      Кстати, у вас довольно-таки раскрученый блог: PR 3, тИЦ 60. Как долго вы наращивали эти параметры? Много-ли средств и времени вкладываете в его развитие?

      1. Orcinus Orca

        Никогда не задумывался над раскруткой. Обычный среднестатистический блог, пишу что думаю… иногда много пишу, иногда мало…

        Посещаемость, правда копеечная, человек 100-200 в день.

        1. FORTRESS-DESIGN (автор)

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

          1. Orcinus Orca

            Все возможно. Раньше посещаемость была на уровне 2-3 тысячи в день, сейчас клуб разбежался, осталась только официальная часть сайта. Может быть опять соберу клабберов и посещаемость вернется, если бы я какой-нибудь нормальный доход с сайта имел, то был бы стимул увеличивать посещаемость и раскрутку сайта. Может быть, если поставить счетчики на все странички, то показатели улучшатся, но они там как-то противречат логике закрытых страничек сайта.

            1. FORTRESS-DESIGN (автор)

              Если монетизировать сайт, то стимул сразу же появится :)

  8. Orcinus Orca

    Раскопал более простой способ вывести все поддерживаемые системы для добавления, лежит на самом виду. Только непонятно, почему Яндексовцы не хотят поставить в генераторе более продвинутый вариант. В котором будут соблюдены все системы и генерировать со всеми типами кнопочек поделиться.

    1. Александр

      А что за способ?

    2. FORTRESS-DESIGN (автор)

      Что это за способ? Поделитесь, пожалуйста.

    3. Александр

      Если я верно понимаю, то речь идет о встроенных в инструмент яндекса глубоко зарытых возможностях. Тогда вы можете вообще свой мини сервис создать, который на выходе будет выдавать сформированный код как бы от яндекса ;)

  9. Orcinus Orca

    Достаточно в data-yashareQuickService перечислить все названия нужных систем. При этом непонятно почему в их генераторе используется всего 9 систем, когда реально поддерживается 20? Список поддерживаемых тут:
    http://api.yandex.ru/share/doc/dg/concepts/share-button-ov.xml

  10. Сергей

    У меня стоит “одна кнопка” – попробую Яндекс – сравню.

    1. Orcinus Orca

      Теоретически это мен шила на мыло. Но мне почему-то больше Яндекс понравился.

  11. aldous

    Вы чего? Все ссылки генерируются на стороне клиента. Яндекс Поделиться безопасн и ничего не передаёт.

    1. FORTRESS-DESIGN (автор)

      Вот сейчас, по данным СеоКвейк, на этой странице 48 (26) исходящих ссылок. 5 из них – это Яндекс.Поделиться.

  12. Aldous

    Сеоквейк – это плагин на стороне клиента, т.е. браузера.
    Например, если с помощью js всем ссылкам добавлю атрибут nofollow, то для браузера (в исходнике) все ссылки будут закрыты, но на самом деле это обманка. Сссылки закрыты только для клиента, но робот не исполняет скрипт, а читает как чистый html, и не знает про будущие атрибуты.
    Поэтому ajax-сайты практически не индексируются (см. документацию яндекса).
    Чтобы ЯП увёл робота, ему надо исполнить скрипт share.js, а как он это сделает? он видит только конструкцию div и ссылку src, которую даже не читает.

  13. Яков

    Почему у меня не отображается кнопка в IE8.
    Ссылка на страницу: тут.

  14. Las

    Подскажите, плз… Анализатор ссылок http://be1.ru/stat/ не изменил статистику исходящих ссылок со страниц моего сайта после добавления блока “поделиться” (6 кнопок). Значит ли это, что можно обойтись без ноиндекс и нофаллоу, или я чего-то не понимаю?

    1. FORTRESS-DESIGN (автор)

      Las, а зачем вам изменять количество исходящих ссылок?

  15. Las

    В том то и дело, что мне не нужно :) Эт я для себя пытаюсь понять, таки меняется оно (количество) или нет, ставить дополнительные тэги или таки вес никуда не уходит :)

    1. FORTRESS-DESIGN (автор)

      В том то и дело, что вес все равно уходит.

  16. Las

    Понято, спс, значит, будем закрывать.

  17. Андрей

    Если блок генерирует скрипт, то его не видно в мобильной опере, в режиме “в одну строку”. Я переделал блок, сделал его статическим. Ну и теперь естественн можно добавить в ссылки ноиндекс, нофаллоу и всё, что угодно.
    Я добавил в блок пару иконок-ссылок. Первая ведет на главную, а последняя на rss-ленту.
    Пример можно увидеть на моём сайте cms.feasible.ru

Leave a Reply

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Skip to toolbar
Adblock
detector