Документация по кнопке «Нравится»

Чтобы вставить кнопку «Нравится» на вашу страницу, скопируйте следующий код в то место, где вы хотите чтобы она появилась.

  1. <a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'cm' : '1', 'sz' : '20', 'st' : '1', 'tp' : 'mm'}">Нравится</a>
  2. <script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>

Если вы хотите сделать несколько кнопок, то тэг <script> надо вставлять только один раз.

Дополнительные настройки

Кнопку можно сконфигурировать по вашему желанию. Описанные ниже опции можно применять в любых комбинациях.

Задание ширины кнопки

Блок с кнопкой может иметь различную ширину по вашему желанию. Чтобы указать ширину, укажите в атрибуте data-mrc-config параметр width. Значение параметра может быть в пикселях (по умолчанию), em’ах и процентах. Указывайте ширину, достаточную для отображения желаемых опций. Для примеров значений пользуйтесь конфигуратором. Например:

  1. <a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share"
  2.    data-mrc-config="{'width': 550}">Нравится</a>

Настройка параметров записи

Вы можете задать параметры отображения записи в «Что Нового» в коде кнопки. Обратите внимание, что мы рекомендуем для конфигурации использовать правила, описанные в разделе Разметка страницы, так это благоприятно повлияет на SEO и работает в нескольких социальных сетях. Используйте параметры кнопки только в случае невозможности изменения кода страницы.

Для конфигурации записи используйте следующие GET-параметры в атрибуте href:

Не забудьте закодировать параметры, например, с помощью javascript функции encodeURIComponent. Не указанные параметры получаются роботом автоматически из страницы, на которой расположена кнопка (или на которую указывает url).

Например:

  1. <a class="mrc__plugin_like_button"
  2.    href="http://connect.mail.ru/share?url=http%3A%2F%2Fmail.ru&amp;title=test&amp;description=testtest">Нравится</a>

Параметр url полезен при размещении кнопок на списках статей: достаточно указать в url ссылку на страницу со статьей и кнопка будет работать так же, как если бы она была размещена на той странице (будут получены картинки, заголовок и описание с той страницы).

Разметка страницы

Чтобы улучшить представление страницы в записях пользователей вы можете добавить на нее дополнительную разметку.

заголовок

  1. <head>
  2.    ...
  3.    <!-- проверяется первым, если указан но content пустой, заголовок будет пустым -->
  4.    <meta name="mrc__share_title" content="...">
  5.    ...
  6.    <!-- проверяется если не указан mrc__share_title -->
  7.    <meta name="title" content="...">
  8.    ...
  9.    <!-- проверяется последним -->
  10.    <title >заголовок</title>
  11.    ...
  12. </head>

описание

  1. <head>
  2.    ...
  3.    <!-- проверяется первым, если указан но content пустой, описание будет пустым -->
  4.    <meta name="mrc__share_description" content="...">
  5.    ...
  6.    <!-- проверяется если не указан mrc__share_description -->
  7.    <meta name="description" content="...">
  8.    ...
  9. </head>

Если описание не найдено, то оно берется из первого тега <p> иди <div>, содержащего в начале минимум 100 символов текста без тегов.

картинки

Вы можете указать картинки, которые будут предложены пользователю, с помощью тегов <link rel="image_src" href="...">. В случае отсутствия таких тегов, будут взяты первые 100 уникальных картинок со страницы. Показаны будут только картинки площадью больше 2500 пикселей, в порядке убывания размера. Вы можете исключить показ конкретных картинок (например, баннеров), добавив к ним класс mrc__share_ignore.

  1. <head>
  2.    ...
  3.    <link rel="image_src" href="http://example.com/image/logo.gif" />
  4.    ...
  5. </head>
  6. <body>
  7.    ...
  8.    эта картинка будет показана в диалоге, если на странице не указан тэг link с image_src
  9.    <img src="http://example.com/image/example.gif" />
  10.    ...
  11.    эта картинка не будет показана в диалоге
  12.    <img class="mrc__share_ignore" src="http://example.com/image/example.gif" />
  13.    ...
  14. </body>

Также в параметр url можно передавать адрес картинки. В таком случае пользователю будет предложена одна эта картинка и возможность ввести комментарий.

видео

Если основная часть страницы — флэш видео, то вы можете обеспечить его просмотр прямо в ленте «Что Нового». Самый лучший вариант сделать это — использовать oEmbed, тогда ваше видео автоматически смогут получать различные инструменты и сайты, не только Мой Мир@Mail.Ru. Для правильной работы кнопки нужна поддержка discovery (см. раздел 4 спецификации oEmbed) в формате XML.

Если вы не хотите поддерживать oEmbed, то видео можно разметить с помощью следующего набора тэгов:

  1. <head>
  2.    ...
  3.    <link rel="video_src" href="http://www.example.com/player.swf?video_id=123456789"/>
  4.    <meta name="video_height" content="200" />
  5.    <meta name="video_width" content="300" />
  6.    ...
  7. </head>

Все параметры обязательные, размеры видео не должны превышать 420×420 пикселей (иначе оно сжимается с сохранением пропорций).

Собственная кнопка

Кнопки Вы можете сделать свою кнопку любой формы и размера. Важно, чтобы она вела на адрес http://connect.mail.ru/share?url=<адрес_вашей_страницы>.

Вы можете использовать макеты официальных кнопок для создания своего варианта.

Наш робот получает заголовок, описание и картинку для вашей страницы автоматически. Мы рекомендуем придерживаться рекомендаций раздела «Разметка страницы» для настройки внешнего вида записи так как они помогают SEO-продвижению и совместимы со стандартами других социальных сетей.

Кнопка «Нравится» поддерживает стандарт oExchange, поэтому вы можете задавать параметры записи с помощью параметров кнопки. Используйте такой вариант только если не можете изменить разметку страницы.

Адрес для простой страницы:

http://connect.mail.ru/share?url=<адрес_страницы>&title=<заголовок>&description=<описание>&imageurl=<адрес_картинки>

Адрес для страницы с видео:

http://connect.mail.ru/share?url=<адрес_страницы>&title=<заголовок>&description=<описание>&
ctype=flash&screenshot=<адрес_картинки>&swfsrc=<адрес_флэшки>&width=<ширина_видео>&height=<высота_видео>

Возможные параметры смотрите в спецификации oExchange. В терминах спецификации, Offer Endpoint это http://connect.mail.ru/share. Адрес Target XRDhttp://my.mail.ru/oexchange.xrd.