YuWebdesign



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

By YuwebDesign

Сайт 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 сами определяют заголовок и описание вашей страницы, а так же соответствующую картинку.

<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 файлы, находящиеся на серверах Одноклассников.

<link href="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 код кнопки в удобное для вас место на странице.

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

  

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

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

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

  

Оставить комментарий

Ваш email адрес не будет опубликован. Обязательные поля помечены *