YuWebdesign




Как установить кнопку «Нравится» и «Класс!» в odnoklassniki.ru и Мой Мир@Mail.Ru

By yulia

Сайт Mail.Ru API гласит, что кнопки позволяют посетителям вашего сайта отмечать интересную информацию и делиться ей со своими друзьми в социальных сетях «Мой Мир@Mail.Ru» и «Одноклассники». Эти кнопки позволяют получить представление о востребованности содержания Вашего сайта и лояльности аудитории к нему.

Код кнопки универсален – можете смело вставлять его в snippet или library (чтобы иметь возможность вставить готовый кусок кода на любую страницу своего сайта), так как в коде ничего не надо менять.

Вам не придется привязывать код к конкретной URL и генерировать новый код для каждой страницы вашего сайта, или же добавлять код куда-либо, кроме места на сайте, куда вы намереваетесь поместить свою кнопку (например, сразу за тегом body или head вашей html страницы.)

Шаг 1: зайдите на сайт
Mail.Ru API.

Шаг 2: Все довольно просто – выбираем вид кнопки в предлагаемом от Mail.Ru API мастере и смотрим, как выглядит кнопка в “живом примере” ниже.

Кнопки «Нравится» и «Класс!» в odnoklassniki.ru и Мой Мир@Mail.Ru, Как установить кнопки Нравится и Класс! себе на сайт, odnoklassniki like button, moi mir share widget)

Кнопки «Нравится» и «Класс!» в odnoklassniki.ru и Мой Мир@Mail.Ru себе на сайт

Здесь можно выбрать размер кнопки по высоте и степень закругленности ее краев.

По умолчанию предлагаются обе кнопки: «Мой Мир@Mail.Ru» и «Одноклассники», любую из которых можно отключить.

Можно выбрать положение счетчика или вовсе убрать его, а также выбрать/ убрать текст кнопок.

Шаг 3: Устанавливаем кнопку себе на сайт.

Для этого копируем “Код для вставки” и вставляем его в свой html.

Mail.Ru API сами определяют заголовок и описание вашей страницы, а так же соответствующую картинку.

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

Где ‘cm’ : ‘1’ – текст на кнопках Мой Мир (выбран первый вариант),
‘ck’ : ‘1’ – текст на кнопках Одноклассники (выбран первый вариант),
‘sz’ : ‘20’ – размер по высоте,
‘st’ : ‘2’ – вид (степень закругленности краев кнопки),
‘tp’ : ‘combo’ – кнопки (тип выбранной кнопки),
‘vt’ : ‘1’ – счетчик расположен сверху.

Настройка кнопки «Нравится» и «Класс!»

‘width’ : 550 (свое значение) – добавьте параметр, если вы хотите изменить ширину кнопки.
Ширина плагина по-умолчанию считается в пикселях. Но вы можете указать, например, 70% или 15em.

‘show_text’ : 1 – добавьте параметр, если хотите, чтобы рядом с кнопкой отображался текст, поясняющий смысл кнопки и описывающий кто из друзей пользователя уже поделился страницей.

‘nc’ : ‘1’, – добавьте параметр, чтобы убрать счетчик.

‘show_faces’ : 1 – добавьте параметр, если вы хотите отображать фотографии друзей.

Текст кнопки можно изменить внутри тэга &#60a>.
Конфигуратор дает следующие возможные значения: Класс, Нравится, Поделиться, Рекомендую.

Чтобы изменить расположение кнопки на вашей странице используйте атрибут style элемента
<div style="float: left;">.

Как контролировать представление страницы в записях пользователей

<head>
…
<!– проверяется первым, если указан но content пустой, заголовок будет пустым –>
<meta name="mrc__share_title" content="...">
…
<!– проверяется если не указан mrc__share_title –>
<meta name="title" content="...">
…
<!– проверяется последним –>
<title>заголовок</title>
…
</head>

Старая версия кнопки «Класс!» от odnoklassniki.ru

Поскольку Mail.Ru Group купила «Одноклассников», необходимость в старом коде кнопки «Класс!» пропала. А работала кнопка следующим образом:

Шаг 1: зайдите на страницу о

социальных плагинах на odnoklassniki.ru и пройдите по линку “Устаревшая документация”.

Шаг 2: В заголовок страницы (head) включить ссылки на Javascript и CSS файлы, находящиеся на серверах Одноклассников.

<link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet"&#62
<script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript" &#62</script&#62

Шаг 3: Вставить HTML код кнопки в удобное для вас место на странице.

<div style=&quot float: left; &quot>
<a class=&quotodkl-klass-stat&quot
href="абсолютный адрес страницы"
onclick=&quotODKL.Share(this);return false;&quot
><span>0</span></a>
</div>

  

Шаг 4: Чтобы появилась статистика, после окончания загрузки
страницы необходимо ОБЯЗАТЕЛЬНО вызвать ODKL.init();.

<body onload="ODKL.init();">

Заголовок, описание и фотография на странице определяются автоматически. Заголовок берётся из тэга <title>, описание из мета тэга description.

  

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>