Dobar dan, dragi čitatelji. Ne tako davno, 11. listopada objavio sam kao jedan blok. Međutim, spominjanje društvene mreže Odnoklassniki izigralo je okrutnu šalu, a mnogi korisnici dolaze iz tražilica u nadi da će pronaći ovaj gumb.
Odlučio sam to popraviti i posvetiti poseban članak postavljanju gumba Class! iz Odnoklassnika. S jedne strane, nije teško instalirati gumb, ali postoji niz uvjeta koji moraju biti ispunjeni.
Stoga sam mislio da bi bilo bolje reći više o tome.
Odmah ću rezervirati:
Kôd gumba Klasa opisana u ovom članku već je prilagođena za platformu Blogger / Blogspot.
Ako želite da se gumb nalazi odmah na kraju članaka, tada, u pravilu, postavljamo kod gumba odmah iza retka:
Ako želite da se gumb pojavljuje samo na interne stranice, a nisu bili vidljivi na glavnom, tada bi kod gumba trebao biti unutar koda:
Prije dodavanja koda gumba u predložak, uvijek provjerite "Proširi predloške widgeta"
Odnoklassniki ima mogućnost postavljanja 4 različite vrste gumbi.
| Gumb za brojač | Veliki obični gumb | Mali obični gumb | Vlastiti gumb |
Dakle, kako dodati gumb klase kao brojač u Blogger / Blogspot
Prvi korak.
Otvarajući predložak bloga, nalazimo:
Prije ovog retka zalijepite kod:
Шаг второй . Чтобы велся подсчет "голосов", находим код:
и полностью меняем его на этот:
или лично у меня в шаблоне тег body был такой:
в таком случае заменяем код в таком порядке:
Обратите внимание, мы оставили и прежнее значение class="loading" и добавили новое значение onload="ODKL.init();"
Шаг третий
. Установка кода кнопки Класс.
Находим место, в которое вы хотите установить кнопку Класс и вставляем код кнопки:
0
В этом коде ни в коем случае ничего нельзя менять. Сохраняем шаблон.
Если вы хотите такую кнопку
Чтобы ее установить, проделываем Шаг первый, описанный выше (вставляем ссылки на необходимые файлы в заголовок шаблона), второй шаг пропускаем, он не нужен. Переходим к третьему шагу – размещение кода кнопки Класс.
Класс!
Если же вы хотите такую кнопку , то код будет такой:
Как видите, сложного ровным счетом ничего нет. В принципе, все эти коды ничем сильно не отличаются, кроме значения class, которое сообщает нам, как должна выглядеть кнопка.
Если же вам не нравится стандартная кнопка Класс, в таком случае можно ее заменить на свою картинку. И в таком случае, выбираем, например, вид кнопки из второго варианта, где class="odkl-klass", и сразу после кода кнопки вставляем:
Т.е. все вместе это должно выглядеть так:
Класс!
Так же вы можете дополнить этот код другими стилями, расширение FireBug вам поможет экспериментировать, чтобы кнопка органично вписалась в ваш блог. По идее, все стили необходимо указывать в шаблоне там же, где и все остальные стили CSS, но кнопка так реализована, что, чтобы перебить ее настройки внешнего вида, необходимо разместить код CSS под кодом кнопки.
По акции для блоггеров - , хочу порекомендовать вам блог своего читателя и активного комментатора SwaEgo. В его блоге вы найдете уроки по фотошопу, и один из них, Как сделать из черно-белой фотографии цветную в Photoshop . Научиться работать в фотошоп нужно, как минимум для того, что бы уметь отредактировать неудачно снятые фотки для семейного альбома, ну а как максимум, рисовать собственные картинки к своим статьям. Попробуйте, а вдруг понравится.
P.S. Все, кто ставил себе блок кнопок социальных сетей, и хочет вставить кнопку Одноклассников в этот блок, как у меня, то вам нужно будет проделать:
1. Шаг первый,
2. открыть этот файл ,
3. Вставить код из файла в то место, где хотите, чтобы находилась кнопка.
Сохранить шаблон.
В последнее время стало модно устанавливать кнопки социальных сетей на сайты и блоги, и в этом нет ничего удивительного. Во-первых, кнопки позволяют увеличивать «лайки» и «сердечки», что положительно сказывается на продвижении статей в социалках. Во-вторых, существуют отдельные разновидности кнопок, позволяющих делиться ссылками на отдельные страницы сайта в социальных сетях – это привлекает дополнительных посетителей из Вконтакте, Фейсбука, Одноклассников, Твиттера и т.д. В-третьих, статьи, набравшие большое количество «лайков» и «сердечек», пользуются большим доверием у читателей сайта.
Поэтому очень важно знать, как установить кнопки социальных сетей на сайт, чтобы помочь развиваться веб-ресурсу. Будут рассмотрены самые популярные социальные сети
- Вконтакте
- Фейсбук
- Одноклассники
- Гугл «+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)
. Теперь необходимо найти тег
Как только вы найдете нужные теги, можете размещать первую часть кода сразу перед закрывающимся тегом 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 ();Это уже далеко не первая статья, которая затрагивает социальные кнопки на сайте. А все почему? Да потому что без них никуда. В этот раз мы будем делать кнопки социальных сетей самостоятельно , т.е. без использования сторонних плагинов и сервисов, типа socialtools.
Преимущества ручного размещения
Чаще всего к такому методу приходят тогда, когда не хотят зависимости от сторонних сервисов. Допустим, что тот же UpToLike или SocialTools лёг, соответственно, кнопки на вашем сайте тоже легли, так как запросы все идут через него. Вот здесь и начинается работа над ускорением блога, загрузки страницы и т.д. В общем, кому этот метод понадобился, рассмотрим вариации.
Переходим на официальный сайт представителя, т.е. сюда
https://about.twitter.com/ru/resources/buttons
и выбираем подходящее для себя оформление и тип кнопки. Вариантов для выбора достаточно, кроме того, здесь же можно взять и кнопку «Читать» . Каждая из них настраивается, после чего выводится готовый код для вставки на сайте. Пример такого варианта можете увидеть на скрине:
Принцип размещения от предыдущей ничем не отличается. Переходим на страницу документации публикации ссылок Вконтакте по ссылке:
Также выбираем оформление, которое может быть как со счётчиком, так и без. Всё по вашему желанию и усмотрению. В итоге получаем готовый код для размещения. Вот, собственно, скрин:
Здесь уже настройки более интересные. Переходим в документацию новой кнопки класс по адресу:
http://apiok.ru/wiki/pages/viewpage.action?pageId=42476656
Кнопка регулируется как по виду, так и по размеру. Счетчик можно выставить справа и сверху. Результат выводимой кнопки сразу перед глазами, готовый код конфигурируется ниже в режиме онлайн, в соответствии с выбираемыми вариантами оформления.
Документация вся на английском, поэтому у кого проблемы с этим языком, то придется не так уж и просто. Хотя, все, что вам понадобится, это получить код с этой страницы:
Жмем по кнопке «Get Code» и получаем необходимый код для вставки на сайте.
Очень схожее руководство и оформление с Одноклассниками. Настройки абсолютно такие же, и если вы разобрались с предыдущими, то и с этими проблем не возникнет. Получаем кнопку здесь:
http://api.mail.ru/sites/plugins/share/
Если возникнут вопросы, то ниже настроек, как и на вышеописанных сервисах, есть ссылка на детальную документацию.
Более простой вариант — All in One
Вам показалось это все сложным? Возможно, потому как все эти кнопки нужно получить, влепить код и скрипты на сайт, но если вы в этом разбираетесь, то это всего нескольких минут дело. Все скрипты можно поместить в один файл, и подключить его в необходимом месте. Но если вам всё равно это кажется сложным, то есть более простой вариант. Для этого нам снова придется пойти на сторонний сервис и скачать готовую библиотеку, которая подключает всё необходимое одним файлом javascript , а также выводит в красивом оформлении посредством готового файла стилей css . Переходим на этот сервис:
http://sapegin.github.io/social-likes/ru/
Играемся с настройками, выбираем необходимое количество социальный сетей, скин, вид, и после этого качаем готовый вариант файлов кликом по кнопке «Скачать кнопки» в самом низу. В архиве получится 3 файла, из которых 2 уже были описаны выше, а 3-й выступает примером для вставки блоков div на сайте.
Заключение: какой из этих вариантов больше подойдёт вам, решайте сами. Оба они исключают зависимость от посторонних сервисов, но если так рассуждать, то не будем забывать, что сами социальные сети очень часто тупят, а соответственно и тянут за собой сайт(увеличивают время загрузки страницы). Так что, здесь противоречие одно за другим. Желаю вам успехов!
Дело в том, что из всех предлагаемых партнерам Одноклассников кнопок эта служит наиболее удобным инструментом для посетителей. Благодаря этому инструменту все друзья могут видеть в Ленте интересную ссылку, а владелец ресурса с такой кнопкой приобретает нечто большее.
По сути, кнопка «Класс!» является тем уникальным индикатором, который сигнализирует о степени заинтересованности размещенным на сайте материалом (видео, фото, статьи). Чем большее количество раз на нее кликнули, тем, соответственно, полезнее/забавнее опубликованная информация. Будучи осведомленным о предпочтениях своих посетителей, сделать сайт еще популярнее теперь легче! Кстати, кнопка «Класс!» может быть со счетчиком и без него.
Существуют некоторые особенности установки такого инструмента на ресурсы в случае с 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 открывающийся тег
, который меняем на выражениеНу вот и все! Желаю вам удачи в установки кнопки.
