• admin
  • АлаичЪ
  • Карма: 143 / 2

Тема: "Секретные" кнопки поделиться от Яндекса :)

Привет, друзья.
Случайно наткнулся на страничку Яндекса - http://visual.yandex.ru/ - ссылку кто-то на форуме кидал недавно.
Так вот, если вы обратили внимание, там в самом низу почти есть такие прекрасные кнопочки:

А вот конструктор кнопок "Поделиться" от Яндекса не предлагает таких вариантов оформления и счетчика лайков sad Жалко...

Резонный интерес - как спиздить? хочу себе такие же!

Нет ничего проще. Я уже себе сделал - http://www.winterlife.ru/teaching/cross … stili.html

Добавляем на свою страницу между тегами <head> ... </head>

<script src="//yandex.st/share/cnt.share.js"></script>

А в нужном месте страницы вставляем:

<div class="yashare-auto-init" data-yashareLink="http://visual.yandex.ru" data-yashareTitle="Визуальные закладки от Яндекса" data-yashareDescription="Скачайте бесплатно расширение Визуальные закладки от Яндекса, и ваши любимые сайты будут под рукой" data-yashareImage="http://visual.yandex.ru/i/social90.png" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter" data-yashareType="small"></div>

Понятное дело, что данные в переменных data-yashareLink, data-yashareTitle, data-yashareDescription и data-yashareImage надо заменить на свои. Ну...или удалить эти переменные вовсе, тогда скрипт сам подхватит необходимые данные прямо со страницы.

Пользуйтесь smile

PS Кстати да. Набор кнопок можно менять, а так же менять их порядок отображения. За это отвечает эта строка:

data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus"

Чтобы посмотреть списко доступных сервисов, можно воспользоваться стандартным конструктором Яндекса тут - http://api.yandex.ru/share/ В общем, сами разберетесь как это работает.

+ Stl, ChesteR_203

2 ПафНутиЙ

  • ПафНутиЙ
  • Делаю всякие полезности для DLE и не только
  • Карма: 51 / 1

Re: "Секретные" кнопки поделиться от Яндекса :)

Полезный пост!
Логично было бы положить скрипт в конец стртаницы для ускорения загрузки сайта, если он конечно не асинхронно тянется..
А вообще не люблю сторонние скрипты на сайте. Мне лично больше симпатизируют закладки от share42.com

P.S. Сразу видно кто пользуется визуальными закладками яндекса))))) Молодые мамашки, сидящие в одноклассниках и пользователи mailru (что впринципе те же одноклассники)

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: "Секретные" кнопки поделиться от Яндекса :)

ПафНутиЙ пишет:

Логично было бы положить скрипт в конец стртаницы для ускорения загрузки сайта, если он конечно не асинхронно тянется..

Можно и вниз. Но я скопировал и предложил сделать как у самого Яндекса. Да и потом скрипт все равно будет тянуться со стороннего сервера параллельно.

4 Stl (04.12.2012 12:05 отредактировано Stl)

  • Stl
  • Уже не новичок
  • Карма: 0 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

Я вот думаю, стоит ли использовать их в шортстори? В фуллстори не очень много заглядывает народу т.к. контент почти весь состоит из картинок.

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: "Секретные" кнопки поделиться от Яндекса :)

Stl, А ты попробуй, оно и видно будет сразу smile

  • Stl
  • Уже не новичок
  • Карма: 0 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

admin, да тут сразу много вопросов возникает...

<div class="yashare-auto-init" data-yashareLink="{full-link}" data-yashareTitle="{title}" data-yashareDescription="" [image-1]data-yashareImage="{image-1}"[/image-1] data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,gplus,yaru" data-yashareTheme="counter" data-yashareType="small"></div>

Что делать с "data-yashareDescription"? Просто удалить и пускай берет дескрипшн из категории? Но как-то не то.

[image-1]data-yashareImage="{image-1}"[/image-1]

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

7 ChesteR_203

  • ChesteR_203
  • Чув-а-а-а-к!!!
  • Карма: 4 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

ПафНутиЙ, визуально от share42.com мне тоже больше нравятся, но там нету счетчиков, а это для многих один из важных параметров.

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: "Секретные" кнопки поделиться от Яндекса :)

Stl пишет:

Что делать с "data-yashareDescription"? Просто удалить и пускай берет дескрипшн из категории? Но как-то не то.

Не знаю, что делать. Это уже не ко мне вопрос smile

Stl пишет:

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

Подхватит первую попавшуюся. Чтобы выдавать что-то определенное, воспользуйся специальными метатегами:

<meta property="og:title" content="..."/>
<meta property="og:image" content="..."/>
<meta property="og:description" content="..."/>

В частности, og:image - выдавай его, если нет картинки.

  • Serik
  • Я тут новенький
  • Карма: 0 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

А если в строку 

data-yashareType="small"

вставить medium или large то кнопки поменяют размер smile

10 surcho (27.01.2013 13:11 отредактировано surcho)

  • surcho
  • Бывалый!
  • Карма: 0 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

Здравствуйте, АлаичЪ.
Все сделал, как указано выше, все работает прекрасно. Только вот один момент, счетчик "одноклассников" не хочет показывать количество, хотя есть поделившиеся (точно). Все остальные показывают, а вот "одноклассники" нет. В чем может быть проблема?

Добавлено: 27.01.2013 15:10

11 admin

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: "Секретные" кнопки поделиться от Яндекса :)

surcho, ХЗ, я не в курсе, это надо Яндекс спрашивать smile

12 Off Road

  • Off Road
  • Я тут новенький
  • Карма: 0 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

Одноклассники не отображаются, так как кнопка поделиться не работает!
...Тоже интересуют эти закладки, вот и ищу решение с одноклассниками!

13 admin

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: "Секретные" кнопки поделиться от Яндекса :)

Off Road, На сайте, указанном в качестве примера, все нормально работает. Значит и со скриптом все в порядке.

14 staiki

  • staiki
  • Я тут новенький
  • Карма: 0 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

Спасибо автору за код. Всё работает! http://staiki.net/images/smilies/2drinks.gif

15 Hooligan

  • Hooligan
  • ТоварисЧЬ!
  • Карма: 31 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

АлаичЪ как всегда запалил то что надо! Будем ставить на обновленный сайт smile

16 ruslan_fd

  • ruslan_fd
  • Уже не новичок
  • Карма: 0 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

Офигительно. Спасибо, Алаич.
Теперь вопрос, если ставить в shortstory, то подхватывает инфу с морды.
Как можно подменять на инфу с самой новости? И реально ли это?

17 admin

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: "Секретные" кнопки поделиться от Яндекса :)

ruslan_fd, Смотри таблицу номер 2 здесь - http://api.yandex.ru/share/doc/dg/conce … ton-ov.xml
Тебе необходимо будет задать параметры link, title, description и image - первые два обязательно, вторые два по желанию.

18 ABIGOR (07.04.2013 08:04 отредактировано ABIGOR)

  • ABIGOR
  • Я тут новенький
  • Карма: 0 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

Заметил косяк в шрифтах, когда наводишь на русскоязычный сервис например "контакт" вместо отображения названия выводятся "крокозяблики")) кстати АлаичЪ у тебя на сайте тож такой косячек. Решается добавлением в код префикса utf-8.
Может кто подскажет как сделать чтобы картинка бралась "железно" из новости, а то берутся изображения со всего сайта?

19 admin

  • admin
  • АлаичЪ
  • Карма: 143 / 2

Re: "Секретные" кнопки поделиться от Яндекса :)

ABIGOR пишет:

Может кто подскажет как сделать чтобы картинка бралась "железно" из новости, а то берутся изображения со всего сайта?

Надо сделать OpenGraph разметку. Но тебе придется гуглить самостоятельно, ибо это целый большой отдельный разговор.

20 krock

  • krock
  • Свой в доску :)
  • Карма: 1 / 0

Re: "Секретные" кнопки поделиться от Яндекса :)

Я делал опен граф под эти кнопки, он не работает.