Кнопка Класс! Кнопка постинга в Одноклассники для Blogger Blogspot. Более простой вариант — All in One. Одноклассники и Мой мир

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

По сути, кнопка «Класс!» является тем уникальным индикатором, который сигнализирует о степени заинтересованности размещенным на сайте материалом (видео, фото, статьи). Чем большее количество раз на нее кликнули, тем, соответственно, полезнее/забавнее опубликованная информация. Будучи осведомленным о предпочтениях своих посетителей, сделать сайт еще популярнее теперь легче! Кстати, кнопка «Класс!» может быть со счетчиком и без него.

Существуют некоторые особенности установки такого инструмента на ресурсы в случае с Joomla, WordPress, DLE.

На Joomla эту кнопку установить проще простого – всего 5 минут времени, и никакой мороки!

Итак, в менеджере шаблонов на админпанели выбрать Текущий шаблон и Правка HTML , где в самое начало страницы нужно вставить следующий html-код. После этого, на сайте хостинг-провайдера в папке, где установлена Joomla, находим документ public_html-components-com_jcomments-tpl-default с файлом tpl_index.php. Здесь конечный пункт наших «похождений», поэтому добавляем html-код:

Кнопка «Класс!» готова к применению!

Для размещения кнопки «Класс!» со статистикой нужно активировать ссылки на Javascript и CSS файлы в заголовок страницы и вставить в подходящее место на странице HTML код кнопки.

Помните, что код этой кнопки, в отличие от обычной «Класс!», не подлежит модификации, т.к. содержимое внутри будет заменено. Кроме того, имя класса CSS должно быть оригинальным, поскольку оно используется в качестве признака кнопки.

Для появления окошка со статистикой, по окончании загрузки страницы потребуется обязательный вызов окна ODKL.init();

На WordPress интерактивный инструмент «Класс!» устанавливается иначе.

Обычный плагин Social Share Buttons доступен к скачиванию и установке на официальном сайте WordPress (из админ-панели WordPress). Никакой правки кода, все телодвижения сведены к нажатию кнопок, и не более того!

Итак, переходим к админпанели WordPress в Плагины – Добавить новый , где в поисковой строке вводим Social Share Buttons (в списке плагинов он оказался у меня самым первым!). Далее – нажимаем ссылку Установить , а после установки – Активировать плагин. в wp.


Описанный путь установки плагина является самым простым, если, конечно же, они входят в каталог плагинов WordPress.

Теперь активированный плагин нуждается в настройках: меню Параметры и ссылка Share Buttons перенаправит нас в настройки плагина. Первое, на что нужно будет обратить внимание, – какие кнопки выставлены по умолчанию (в плагине доступны 8 вариантов кнопок в разном исполнении!). Следующим шагом будет действие по выбору нужной нам кнопки Одноклассников и установка ее в определенном месте. Я не думаю, что с этим будут проблемы, но если возникнут вопросы – спрашивайте!

Для DLE (DataLife Engine) кнопка «Класс!» устанавливается так:

Кнопка «Класс!» со статистикой :

Включаем в заголовок страницы ссылки на Javascript и CSS файлы в файл main.tpl между тегов и вставляем их. Дальнейшие шаги по отображению кнопки со статистикой предпринимаются в shortstory.tpl или fullstory.tpl путем вставки кода в нужное место:

Простая кнопка «Класс!» генерируется вставкой кода:

Класс!

В завершение всему, находим в файле main.tpl открывающийся тег , который меняем на выражение

Ну вот и все! Желаю вам удачи в установки кнопки.

В последнее время стало модно устанавливать кнопки социальных сетей на сайты и блоги, и в этом нет ничего удивительного. Во-первых, кнопки позволяют увеличивать «лайки» и «сердечки», что положительно сказывается на продвижении статей в социалках. Во-вторых, существуют отдельные разновидности кнопок, позволяющих делиться ссылками на отдельные страницы сайта в социальных сетях – это привлекает дополнительных посетителей из Вконтакте, Фейсбука, Одноклассников, Твиттера и т.д. В-третьих, статьи, набравшие большое количество «лайков» и «сердечек», пользуются большим доверием у читателей сайта.

Поэтому очень важно знать, как установить кнопки социальных сетей на сайт, чтобы помочь развиваться веб-ресурсу. Будут рассмотрены самые популярные социальные сети

  • Вконтакте
  • Фейсбук
  • Одноклассники
  • Гугл «+1»
  • Твиттер
  • Мой Мир

Здесь будет рассмотрена установка стандартных кнопок, предлагаемых самими социальными сетями. Каждую кнопку в этом случае придется устанавливать отдельно от других, это занимает некоторое время, но и смотрится очень неплохо.

1.1. Вконтакте

1.1.1 Кнопка «сохранить»

Кнопка достаточно гибкая, надпись на ней можно менять на любую желаемую (по умолчанию «сохранить»).

Сначала вам нужно перейти на страницу с , там же вы получите код скрипта, который нужно будет установить на свой сайт, чтобы кнопка отображалась.

Здесь можно выбирать один из 5 стилей : кнопка, кнопка без счетчика, ссылка, ссылка без иконки, иконка.

Поле «текст » позволяет изменять стандартную надпись «сохранить» на свою.

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

Код для вставки состоит из двух частей: первая должна располагаться в любом месте между тегами и , вторая – в том месте, где должна отображаться кнопка. Об установке кнопки на сайт читайте в пункте .

1.1.2 Кнопка «мне нравится»

Второй вариант кнопки – виджет «Мне нравится ». Его будет проще установить на сайт, т.к. в конце вы получите всего одну часть кода, которую нужно будет разместить в нужном месте сайта.

Для настройки кнопки перейдите по этой ссылке . Здесь также необходимо заполнить ряд параметров.

Название сайта – здесь лучше указать краткое и настоящее название вашего сайта.

Адрес сайта – укажите адрес главной страницы вашего сайта.

Основной домен сайта – укажите главное зеркало сайта (его можно найти в в качестве параметра оператора «Host»), если затрудняетесь это сделать – то оставьте предлагаемое ВКОНТАКТЕ.

Варианты кнопки – это различные стили кнопки, они влияют на ее внешний вид.

Высота кнопки – геометрические размеры «Мне нравится».

Название кнопки – доступно два варианта (мне нравится, это интересно).

Код для вставки – тот код, который нужен для отображения кнопки социальной сети Вконтакте.

1.2 Фейсбук

Настраивается кнопка на этой странице . Могут возникнуть трудности, т.к. комментарии к форме написаны на английском языке, но ниже вы можете прочитать краткое описание каждого поля.

URL to Like – url-адрес страницы для кнопки (если поле не заполнено, то будет браться адрес страницы, на которой расположена кнопка).

Send Button – наличие галочки включает новую возможность – отправлять ссылку в Фейсбук (отобразится дополнительная кнопка – «отправить»). При включении будет одновременно отображаться две кнопки.

Layout Style – стиль кнопки, влияет на ее внешний вид (стандартным считается button_ count ).

Width – ширина кнопки в пикселях.

Show Faces – при включении будут показываться аватары людей, уже нажавших на данную кнопку.

Font – тип шрифта кнопки.

Color Scheme – фон пространства рядом с кнопкой (белый и черный).

Verb to display – название кнопки (нравится, я рекомендую).

Get Code – кнопка, формирующая код скрипта.

1.3 Одноклассники и Мой мир

Данные социальные сеть приобрели широкую популярность в русскоязычном интернете, там обитает огромное число людей, поэтому не стоит пренебрегать установкой кнопки «Класс» от сервиса «Одноклассники» и «Нравится» от сайта «Мой мир».

Для настройки кнопок нужно перейти на . Можно добавлять кнопки по отдельности, настраивая каждую по-своему, а можно редактировать обе кнопки одновременно.

Размер по высоте – геометрический размер кнопок.

Вид – внешний вид рамки кнопок.

– выбор кнопок (нравится, класс)

Счетчик – включение и выключения счетчика нажатий на кнопки (справа, сверху – расположение счетчика).

Текст на кнопках – выбор одного из трех названий, доступных для кнопок.

Код для вставки – код скрипта, который нужно будет устанавливать на сайт.

1.4 Гугл «+ 1»

Новая социальная сеть, которая за короткое время набрала огромную аудиторию. Трудно представить себе сайт без кнопки «+1», т.к. она не только позволяет добавлять ссылки в социальную сеть и увеличивать количество «плюсиков», но и может влиять на результаты сайта в ТОПе поисковой системы Google.

Все подробности об этом, а также установка и настройка кнопки находятся .

1.5 Твиттер

Популярнейший сервис коротких сообщений оставлять без внимания нельзя. Установите себе кнопку от данной социальной сети и увидите, как быстро люди станут делиться ссылками на ваш сайт в Твиттере. Настроить кнопку можно на этой .

Сначала нужно выбрать нужную кнопку (нас интересует первый вариант – кнопка «отправить ссылку»).

После этого на странице появится форма с несколькими полями, которые нужно заполнить.

Отправить ссылку – выбор страницы, на которой расположена кнопка, или любой другой.

Текст – выбор текста, который будет появляться рядом с кнопкой (НЕ НА САМОЙ КНОПКЕ).

Показывать счетчик – включить или выключить отсчет количества нажатий на кнопку.

С помощью – выбор способа добавления сообщения ссылки в Твиттер (практически ни на что не влияет).

Отметить – выбор метки, которая будет публиковаться в Твиттере (практически ни на что не влияет).

Большая кнопка – увеличение геометрического размера кнопки.

Отказаться от адаптации Твиттера – отказ от стилей Твиттера (лучше оставить поле без галочки).

Язык – выбор языка кнопки.

Справа будет сформирован код, который нужно добавить на сайт.

1.6 Я.ру

Для этого нужно заполнить несколько полей, которые сформируют нужный код скрипта.


Размер
– маленький или большой размер кнопки.

Стиль – выбор между кнопкой или иконкой.

Наличие счетчика – включение или выключение счетчика нажатий на кнопку.

Внешний вид кнопки – пример того, как будет выглядеть кнопка.

Заголовок – выбор заголовка для страницы (произвольный или заголовок текущей страницы).

Код для вставки – нужный код, который добавляется на сайт.

2. Готовые кнопки для сайта

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

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


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

Код нужный скрипт, который необходимо добавить на сайт.

2.2 Кнопки «PLUSO»

В последнее время широкую популярность приобрел конструктор кнопок социальных сетей – PLUSO. Перейти на сайт можно по этой ссылке .

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

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

Затем необходимо настроить ряд параметров, выбрав

  • расположение блока (вертикальный, горизонтальный);
  • цвет кнопок (яркие, темные);
  • величину блока (крупный, маленький);
  • счетчик (наличие или отсутствие);
  • фон (бесцветный или цветной);

Код будет сформирован согласно указанным вами параметрам, после чего его нужно вставить на сайт.

S hare42

Еще один сервис, позволяющий сконструировать кнопки для своего сайта – Share42.com/ru .

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

Выберите размер кнопок и нужные социальные сети, а затем перейдите к настройке дополнительных опций.

Тип панели с иконками – отображение блока кнопок (очень интересен вариант «вертикальная плавающая»).

Ограничить видимое кол-во иконок – выбор числа отображаемых кнопок (другие будут скрыты за ссылкой).

Кодировка сайта – выбор кодировки вашего сайта.

Добавить иконку сайта Share42.com – возможно, следует убрать галочку.

Показывать счетчики – включение счетчика нажатий по кнопкам (только при работающем jQuery).

Установка данного скрипта довольно сложная, но она пошагово описывается на самом сайте Share42.

3. Как устанавливать кнопки на сайт

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

Первую часть кода нужно добавить между тегами и . Для этого зайдите в админ-панель WordPress и перейдите к редактору шаблона.

В редакторе шаблона нужно найти файл «Заголовок» (header. php) , если такого нет, тогда – «Основной шаблон» (index.php) . Теперь необходимо найти тег или . Если в указанных файлах таких тегов нет (все темы разные, такое вполне может быть), тогда вам придется открывать для редактирования все файлы и искать в каждом из них тег . Для поиска можно использовать сочетание клавиш «Ctrl+F».

Как только вы найдете нужные теги, можете размещать первую часть кода сразу перед закрывающимся тегом head> , чтобы случайно не задеть коды других скриптов.

Вторая часть кода помещается там, где вы хотите видеть кнопки социальных сетей, подобранные для сайта. Если код состоит всего из одной части, то достаточно проделать только эту операцию.

Чаще всего кнопки добавляются перед статьей или в ее конце. Проще, конечно, второй вариант. Его мы и рассмотрим.

Вам нужно найти то место, где заканчивается статья (основная текстовая часть страницы). Для этого нужно редактировать файл «Одна запись» (single. php) .

Теперь нужно найти тот оператор, который отвечает за вывод основного содержимого статьи. В моем случае это «the_content», сразу после него и размещается код кнопок.

Аналогично можно размещать код вначале статьи, нужно только найти место между заголовком и текстом статьи.

Кнопка “Класс” позволит посетителям вашего сайта отмечать особо понравившиеся материалы и делиться ими с друзьями в Одноклассниках.

Она поможет вам понять, что больше нравится вашей аудитории, и заодно привлечёт новых посетителей на ваш сайт.

Если у вас установлена наша старая кнопка «Класс», советуем сменить её на новую, хотя бы потому, что работает она намного быстрее.

Конструктор кнопки “Класс”

Ссылка

При расшаривании какого-либо ресурса на Одноклассниках могут наблюдаться проблемы с обработкой медиа-контента.

Ограничения на расшариваемые картинки:

  • минимальный размер:
    • для веба: 128x128
    • для мобильных: 50x50
  • минимальное соотношение сторон: 0.5

Также для недоверенных доменов граббер не обрабатывает изображения и видео. Чтобы граббер начал обрабатывать такие ссылки, необходимо использовать один из протоколов разметки страницы:

  • Протокол Open Graph .
    Этот способ позволяет внутри тега страницы указать теги og:title, og:description, og:image и og:video, которые подскажут грабберу, какой контент на странице требуется использовать.

Запросы отправляются с адресов:

https://connect.ok.ru/offer
   ?url =URL_TO_SHARE
   &title =TITLE
   &imageUrl =IMAGE_URL

Только параметр url обязателен, остальные параметры опциональны.

  • Возможность узнать количество “классов” к своей странице без установки кнопки:

https://connect.ok.ru/dk
   ?st.cmd =extLike
   &tp =json
   &ref =URL_TO_SHARE

Встраивание нескольких виджетов

При встраивании нескольких виджетов на одну страницу можно воспользоваться кодом:

! function (d , id , did , st ) { var js = d . createElement ("script" ); js . src = "https://connect.ok.ru/connect.js" ; js . onload = js . onreadystatechange = function () { if (! this . readyState || this . readyState == "loaded" || this . readyState == "complete" ) { if (! this . executed ) { this . executed = true ; setTimeout (function () { onOkConnectReady ()}, 0 ); } }} d . documentElement . appendChild (js ); }(document ); function onOkConnectReady () { OK . CONNECT . insertGroupWidget ("mineGroupWidgetDivId" , "50582132228315" , "{width:250,height:335}" ); OK . CONNECT . insertShareWidget ("mineShareWidgetDivId" , "https://сайт" , "{width:125,height:25,st:"oval",sz:12,ck:1}" ); }

Как отследить событие класса

При классе страницы через виджет он шлёт на вашу страницу postMessage со следующим содержанием:

ok_shared$__okShare1

Событие на странице, встроившей виджет, можно отследить следующим javascript кодом:

function listenForShare () { if (window . addEventListener ) { window . addEventListener ("message" , onShare , false ); } else { window . attachEvent ("onmessage" , onShare ); } } function onShare (e ) { var args = e . data . split ("$" ); if (args [ 0 ] == "ok_shared" ) { alert (args [ 1 ]); } } listenForShare ();

Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: