Адаптивный виджет одноклассники. Как установить виджет группы Одноклассники? С помощью браузера

Всем привет! Я снова с вами и сегодня я хочу рассказать о том, как установить себе виджет на сайт или блог, установить правильно и правильно его настроить.

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

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

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

А теперь как его установить к себе. Для начала вы будете должны зайти на официальную страницу Одноклассников, где дается рабочий и всегда действующий код виджета:

https://apiok.ru/wiki/pages/viewpage.action?pageId=42476655

Там вы увидите следующее:

На этой странице вы можете настроить внешний вид будущего виджета, его размеры, далее расскажу подробнее про каждый пункт:

  1. Визуальная настройка ширины виджета
  2. Визуальная настройка высоты виджета
  3. Можно указать ширины и высоту в пикселях (необходимо для точной настройки, что грамотно его вписать в дизайн вашего сайта)
  4. Вот здесь вам надо вставить ID своей группы, где его взять я напишу ниже.
  5. Окно предпросмотра
  6. Код, который вам надо будет скопировать после всех настроек и вставить к себе на сайт.

А где же взять ID вашей группы? Для этого вам надо зайти в свою группу в Одноклассниках и нажать на ее настройки:

И уже в настройках, в самом низу страницы найти ID вашей группы. Только заходить в настройки группы необходимо от имени администратора группы.

После всех настроек копируем код из поля, указанного на картинке под номером 6 и далее вставляем себе на сайт или блог.

Вы можете себе установить не только один виджет, вы можете установить хоть 5, хоть 10 виджетов, все зависит от вашей фантазии!

А сегодня на этом все! Всем удачи! Всем отличных заработков в социальной сети Одноклассники! До новых встреч на страницах моего блога!

Создание виджета

Для того, чтобы установить виджет "Одноклассники" на главной странице Вашего интернет-магазина, Вам нужно произвести следующие действия:


Рисунок 2. Операции на стороне социальной сети.

3. Откроется окно, где будем генерировать код виджета


Рисунок 3. Генерация кода виджета.

Так же данная страница доступна по прямой ссылке https://apiok.ru/ext/group

На рисунке 3 - цифра 1 - поле, где необходимо вставить ID группы, выставить необходимые размеры (ширина и высота).

Как получить ID своей группы:

  1. Вы должны быть администратором группы.
  2. Зайдите в свою группу.
  3. Слева под аватаркой группы в меню есть опция "Изменить настройки", необходимо ее выбрать.
  4. Внизу открывшейся страницы найдите надпись "ID этой группы на Одноклассниках".
  5. Скопируйте указанный ID и вставьте его в поле "ID группы".

На рисунке 3 - цифра 2 - поле, где сгенерирован скрипт, который и требуется разместить на сайте.

Установка виджета на сайт

Перейдите на сайт в панель администрирования.

Пункт меню CMS - Статические блоки, в списке находим статический блок с названием "Виджет Вконтакте "Группа" (ключ VK) и переходим в его редактирование (иконка карандаша).

В открывшемся окне нажимаем на кнопку "Источник" (рис. 4 - цифра1)

Если у Вас уже размещены виджеты, то код вставьте ниже, после всех скриптов, которые уже есть в статическом блоке.

Если своих виджетов нет, и в статическом блоке тестовые виджеты, то удалите весь код, что там есть и вставьте новый код, который скопировали ранее (рис. 4-цифра 2)


Рисунок 4. Генерация кода.


Рисунок 5. Отображение виджета в клиентской части - две колонки.


Рисунок 6.

Готово. Мы рассмотрели инструкцию о том, как создать и установить виджет "Одноклассники".

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

Интересно, что вы сами можете создать такой виджет в «Одноклассниках» на сайт, например, чтобы с любимых ok.ru еще больше. Ведь присоединиться к ней станет намного проще — всего в один клик! А вы получите дополнительную рекламу, новых посетителей и клиентов.

Справка: Слово widget – американское и чаще используется в разговорной речи. Переводится как штука, приспособление, устройство, название которого говорящему неизвестно.

Создание виджета

Если слово виджет кажется заумным, и вы думаете, что создать его – занятие сложное – ошибаетесь. Никакими специальными знаниями обладать не нужно.

Внимание! Перед созданием виджета — создайте группу на сайте «Одноклассники».

Для встраивания виджета, группа на ok.ru должна быть открытой. Заходим в профиль. Пролистываем левую колонку до самого конца. Находим надпись «Еще», наводим курсор, кликаем слово «Разработчикам» (либо заходите по ссылке: https://apiok.ru/).

Жмем «ОК для сайтов»

Вам откроется результат (в том числе код встраивания) — виджет, который, возможно, придется подкорректировать. Например, с помощью простейшего конструктора изменить размеры виджета и добавить ID группы. Инструкция добавления дается тут же.

ID можно добавить в виджет, только если вы модератор группы, URL сообщества не был изменен и отображается в адресной строке браузера.

Добавление виджета на сайт

Чтобы встроить виджет на сайт, зайдите в раздел администрирования, в сайдбар. Там в нужном разделе, в режиме HTML добавьте скопированный код виджета.

Есть и другой путь встраивания: зайдите в меню CMS через панель администрирования. Найдите «Статические блоки». Выбирайте «Виджет Одноклассники «Группа», редактируйте (знак карандашика). Откроется новое окно, нажмите в нем на слово «Источник». Вставьте код виджета. Не забудьте сохранить изменения.

Важно! Если на сайте уже есть виджеты, в окне «Источник» код нового виджета нужно вставить в конце всех скриптов.

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

Сохраните у себя!

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

С помощью браузера

Некоторые программы (Google Chrome, Opera и т. п.) позволяют создавать иконки прямо из своего окна. Чтобы скачать ярлык одноклассников на рабочий стол бесплатно, откройте сайт социальной сети. Если браузер открыт на весь экран, предварительно немного уменьшите его в размерах, чтобы был виден свободный кусочек рядом с ярлычками. Наведите курсор на область в начале адресной строки.

Зажмите в этом месте левую кнопку мышки и ведите курсор вбок, на рабочий стол. Во время передвижения держите кнопочку все время нажатой. Если вы сделаете правильно, то рядом с курсором возникнет текст «ОК.RU» и оранжевый значок, которые начнут двигаться за мышью. Доведите их до остальных ярлыков и отпустите кнопку. Появится новая иконка. Кликните на нее и откроется сайт сети ОК. Чтобы поменять ярлыку название, щелкните его правой кнопкой, найдите «Свойства» и на вкладке «Общие» введите нужное имя:

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

Вручную

В пустом месте экрана нажмите правую кнопку мышки и в появившемся меню перейдите на «Создать» — «Ярлык».

Система попросит ввести адрес объекта: вставьте в поле строку https://ok.ru/ и кликните «Далее».

Укажите название значка («Одноклассники» или любое другое – ограничений на имена нет). Щелкните «Готово».

Если все сделано правильно, на компьютере появится новый значок. Нажмите на него и сразу же откроется ваша страничка в ОК.

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

Система предложит на выбор множество изображений.

Если же вы намерены поставить фирменный знак ОК, то наберите в интернете «Иконка Одноклассники». Найдите и скачайте файл с нужным рисунком и обязательно расширением *.ico – только такие файлы используют для значков. Нажмите «Обзор» и перейдите к выбору скачанного файла.