Как установить кнопку «Нравится» и «Класс!» в 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 мастере и смотрим, как выглядит кнопка в “живом примере” ниже.
Здесь можно выбрать размер кнопки по высоте и степень закругленности ее краев.
По умолчанию предлагаются обе кнопки: «Мой Мир@Mail.Ru» и «Одноклассники», любую из которых можно отключить.
Можно выбрать положение счетчика или вовсе убрать его, а также выбрать/ убрать текст кнопок.
Шаг 3: Устанавливаем кнопку себе на сайт.
Для этого копируем “Код для вставки” и вставляем его в свой html.
Mail.Ru API сами определяют заголовок и описание вашей страницы, а так же соответствующую картинку.
<a 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’}"
>Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js"
type="text/javascript" charset="UTF-8"></script>
Где ‘cm’ : ‘1’
– текст на кнопках Мой Мир (выбран первый вариант),
‘ck’ : ‘1’
– текст на кнопках Одноклассники (выбран первый вариант),
‘sz’ : ‘20’
– размер по высоте,
‘st’ : ‘2’
– вид (степень закругленности краев кнопки),
‘tp’ : ‘combo’
– кнопки (тип выбранной кнопки),
‘vt’ : ‘1’
– счетчик расположен сверху.
Настройка кнопки «Нравится» и «Класс!»
‘width’ : 550 (свое значение)
– добавьте параметр, если вы хотите изменить ширину кнопки.
Ширина плагина по-умолчанию считается в пикселях. Но вы можете указать, например, 70% или 15em.
‘show_text’ : 1
– добавьте параметр, если хотите, чтобы рядом с кнопкой отображался текст, поясняющий смысл кнопки и описывающий кто из друзей пользователя уже поделился страницей.
‘nc’ : ‘1’,
– добавьте параметр, чтобы убрать счетчик.
‘show_faces’ : 1
– добавьте параметр, если вы хотите отображать фотографии друзей.
Текст кнопки можно изменить внутри тэга <a>
.
Конфигуратор дает следующие возможные значения: Класс, Нравится, Поделиться, Рекомендую.
Чтобы изменить расположение кнопки на вашей странице используйте атрибут 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 файлы, находящиеся на серверах Одноклассников.
"http://stg.odnoklassniki.ru/share/odkl_share.css"
rel="stylesheet">
<script src=
"http://stg.odnoklassniki.ru/share/odkl_share.js"
type="text/javascript"
></script>
Шаг 3: Вставить HTML код кнопки в удобное для вас место на странице.
" float: left; "
><a class=
"odkl-klass-stat"
href=
"абсолютный адрес страницы"
onclick=
"ODKL.Share(this);return false;"
><span>0</span></a>
</div>
Шаг 4: Чтобы появилась статистика, после окончания загрузки
страницы необходимо ОБЯЗАТЕЛЬНО вызвать ODKL.init();
.
"ODKL.init();"
>
Заголовок, описание и фотография на странице определяются автоматически. Заголовок берётся из тэга <title>
, описание из мета тэга description
.
Leave a Reply