0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Пошаговое создание виджета для сайта

Содержание

Пошаговое создание виджета для сайта

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

Шаг 1. Создание таблиц в БД

В качестве базы данных будем использовать MySQL.
Создадим несколько таблиц:

polls — таблица с опросами

answers — таблица с ответами для опросов

Шаг 2. Создание страницы с опросом

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

В данном примере ограничимся самым простым выводом опроса.

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

Шаг 3. Создание скрипта для встраивания виджета на сайт

Сегодня стандартом де-факто для большинства виджетов является механизм встраивания через iframe.
Для этого есть ряд причин:
1. Владельцы сайтов, которые решили встроить ваш виджет не хотят, чтобы чужой код получал доступ к его содержимому (это как минимум небезопасно).
2. Встроить ваш виджет через iframe очень легко и не требует дополнительных навыков и знаний.
3. Из-за возможных ошибок в вашем коде может слететь верстка сайта, встраивающего ваш виджет.
4. Если вы храните в cookies какую-то информацию, например, идентификатор проголосовавшего, то при встраивании виджета через iframe данные будут храниться в привязке к URL сайта виджета (а не сайта, в который он встроен), что может быть полезно, например, если тот же самый опрос висит и на другом сайте. Человек уже проголосовавший один раз будет и на другом сайте видеть свой ответ, а не голосовать каждый раз заново.
и т.д.

Создадим функцию, которая будет внедрять на странице сайта наш виджет. Обратите внимание, в код зашиты два идентификатора (для простоты чтения, их можно вынести как параметры). Это widget_container — контейнер, внутри которого будет создан фрейм, и сам фрейм widget_iframe.

Внутри функции описывается несколько объектов:
Util — помогает работать с параметрами.
Widget — сам объект нашего встраиваемого виджета.
XD — объект кросс-доменного обмена сообщениями (см. шаг 4, п. 2).

Как видно из кода, сначала создается элемент DIV, потом внутри него создается IFRAME, в который загружается страница с заданными в скрипте параметрами (по умолчанию это example.com/?id=0&bg_color=FFFFFF). Также устанавливается обработчик событий (получение сообщений от фрейма), который меняет высоту элемента, в данном случае растягивает виджет по высоте его содержимого.

Шаг 4. Решение проблем отображения

При встраивании виджета через iframe возникают определенные трудности.

1. Т.к. по сути в виджете загружен отдельный html-документ, то хочется как-то в него передавать свои настройки. Актуальным вопросом здесь являются стили, чтобы содержимое виджета вписывалось в дизайн сайта-потребителя. Можно реализовать передачу параметров через глобальную переменную, в нашем примере — это widgetOptions.

После того, как переменная объявлена, загружаем наш скрипт, создающий виджет:

2. Есть проблема растягивания iframe по высоте его содержимого, чтобы не было никаких полос прокруток, а все смотрелось гармонично.

Для этого воспользуемся небольшим готовым скриптом:

Из фрейма с нашим виджетом будем посылать его высоту (при инициализации и при изменении размера окна) в родительское окно. Скрипт на странице с виджетом будет получать это значение и растягивать окно с виджетом по высоте его содержимого.

Шаг 5. Оптимизация и релиз

После того, как наш виджет сделан, хорошим тоном считается минимизировать javascript код, чтобы не было сильного увеличения времени загрузки сайта-потребителя, а также для уменьшение трафика самого сайта виджета.
Подробнее об этом можно почитать в статье на Хабре Оптимизация Javascript с помощью Google Closure Compiler.

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

Исходников данного примера нет, поэтому не могу их выложить. Если кто-то на основе этой статьи соберет готовый проект и захочет им поделиться — wellcome!

  • А
  • Б
  • В
  • Г
  • Д
  • Е
  • Ё
  • Ж
  • З
  • И
  • Й
  • К
  • Л
  • М
  • Н
  • О
  • П
  • Р
  • С
  • Т
  • У
  • Ф
  • Х
  • Ц
  • Ч
  • Ш
  • Щ
  • Ъ
  • Ы
  • Ь
  • Э
  • Ю
  • Я
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z

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

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

История появления виджетов

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

Самые ранние веб-виджеты — рекламные баннеры и различные счетчики, используемые на страницах сайтов. Эти виджеты были реализованы с использованием JavaScript, CSS и Flash.

В настоящее время идея виджетов претерпела большие изменения, и сейчас это не просто приложение, созданное и подключенное администратором сайта.

Сегодня пользователи имеют возможность создавать собственные виджеты на базе сайтов WidgetBox, MassPublisher, FormLoop, и др. То есть для того, чтобы создать собственный веб-виджет, пользователю зачастую не требуется иметь каких-либо специальных знаний в области программирования.

Читать еще:  Crossout Mobile 0.4.1

Веб-виджеты

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

Особенности виджетов

Главное отличие веб-виджета от других приложений заключается в том, что администратор сайта — практически никогда не может контролировать содержание виджета и не может повлиять на его функционал — это определяется его издателями. Администратор ресурса может либо принять их, либо отказаться от использования предлагаемого виджета на своем ресурсе. Единственное, на что может повлиять администратор ресурса — это расположение виджетов на странице сайта.

Безопасность

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

Ярким примером подобного злонамеренного использования приложений является виджет социальной сети Facebook, который назывался Secret crush. С его помощью злоумышленники заманивали пользователей на вредоносный сайт Zango.

Доска почета

Юнител сервис — Ремонт сотовых телефонов, ноутбуков, телевизоров в г. Колпино и Санкт-Петербурге

Ресурсы

  • Установленный WordPress ;
  • Общее представление о виджетах в WordPress;
  • Знание основ WordPress API

1 Создание класса и функций

Виджеты в WordPress – это классы, которые легко модифицировать. Класс предоставляет разработчику готовую функциональность « из коробки ». Базовый класс виджета содержит функции, которые разработчик должен дополнить нужным содержимым. Для начала создадим класс виджета.

Создайте новый файл ads_widget.php в каталоге, в котором установлен WordPress . Затем поместите туда приведённый ниже код.

Обратите внимание на комментарий над именем класса. Этот комментарий содержит информацию о плагине: его название, имя автора и другие сведения:

2 Код инициализации виджета

Поместите этот код в функцию Ads_Widgets() . Это код инициализирует виджет и будет использоваться для обращения к его текущей инстанции:

3 Функция создания формы

Теперь создадим код, который отобразит форму для сохранения настроек в панели администрирования сайта. Его место – функция form() :

4 Функция сохранения параметров

Функция update() считывает параметры из формы и сохраняет их в базе данных WordPress :

5 Функция отображения виджета

Эта функция отобразит содержимое виджета на главной странице сайта. Код принимает некоторые аргументы от темы: заголовок, описание и другие параметры. Скопируйте этот код в функцию widget() :

6 Добавление обработчика событий

Наконец, загрузите виджет функцией widget_init() , передав её в событие action . Это также зарегистрирует имя виджета, чтобы он мог функционировать как в пользовательской, так и в административной частях сайта. Поместите следующий код ниже объявления класса:

7 Активация виджета

Теперь, когда наш виджет готов, активируйте его.

Для этого из панели администрирования перейдите в панель плагинов и кликните на ссылке “ Activate ” (« Активировать ») напротив нашего плагина:

Заключение

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

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

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

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

Как создать виджет WordPress

Хорошей новостью является то, что вы можете создать виджет WordPress, даже если вы не профессиональный разработчик. Вам просто необходимы базовые знания ООП в PHP и общее понимание разработки плагинов для WordPress. Этот пост проведет вас через разработку виджетов WordPress, объяснив, как создать виджет, который позволяет администраторам сайта выбирать список сообщений для отображения на боковой панели.

Мы будем следовать этим шагам:

  • Сборка и установка плагина, который предоставляет простой виджет
  • Настройка виджета
  • Создание формы администратора
  • Обновление настроек виджета
  • Создание и печать вывода виджета

1. Код самого блока “Мне нравится” начинается с комментария .

2. У многих наших клиентов есть готовые редактируемые блоки под главным меню (как правило, у новых сайтов) — можно просто разместить код через HTML-редактор страницы.

3. Нажмите на любую страницу и выберите “Редактировать содержимое”. В открывшемся окне необходимый Вам блок (это может быть редактируемый блок, информационный блок, информеры — в зависимости от того, где Вы хотите разместить виджет):

4. По аналогии с обычной страницей: зайдите в HTML-редактор.

  • Для TinyMce v3

  • Для CK Editor

5. Разместите код виджета:

6. Нажмите «Обновить» в окне HTML-редактора, а затем «Сохранить и закрыть» в окне редактирования содержимого информационного блока.

  • Также поставить кнопку “Мне нравится” (как и другие виджеты) можно только для конкретных страниц. Размещение кода происходит по схеме, аналогичной пункту 3.2. Только необходимо работать не с общими данными, а с содержанием нужной страницы (обычный режим редактирования).

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

Перед тем, как создать виджеты для WordPress, вам необходимо подумать о нескольких вещах. Первое, вы можете создать виджет в качестве пользовательского плагина. Это позволит использовать его на любом сайте, который использует этот плагин. Или, вы можете просто добавить виджет в файл functions.php или определенную тему, что сделает его совместимым лишь для этой темы. Второе, у вас есть возможность добавить виджет на запущенный и работающий сайт или в локальную среду. В соответствии с рекомендациями по разработке, мы советуем для начала добавить плагин в локальную среду (ознакомьтесь с нашим руководством о запуске WordPress на Docker). После того, как вы убедитесь в отсутствии ошибок и его правильной работе, вы сможете легко портировать его на ваш сайт.

Как создать виджет страницы

Создать виджет страниц могут пользователи с ролью не ниже «Администратора». Читать: Роли пользователей. Для создания виджета страниц вы должны:

  • Перейдите на вкладку Внешний вид>>>Виджеты;
  • В доступных виджетах найти «Страницы»;
Читать еще:  Яндекс Навигатор и Яндекс Карты: возможности офлайн-режима

  • Перетащить виджет в выбранное место сайдбара или выбрать место для виджета из списка. Читать: Виджеты WordPress;
  • Если перетащить виджет невозможно или неудобно, включите режим специальных возможностей;
  • В поле сайдбара этот виджет можно настроить.

Пишем встраиваемый виджет на нативном javascript и php

Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода — и у тебя уже развернулся блок с комментариями. Еще 2 строчки — и доступна аналитика от гугла или яндекса. Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности.

Зачем нужны виджеты?

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

Для этой цели хорошо подходят iframe-ы. Это фактически отдельные html-страницы, которые встраиваются в другие страницы, при этом не имея доступа к своему «родителю». То есть в iframe можно встроить наше веб-приложение, которое будет спокойно выполнять свою работу, не вмешиваясь в основной сайт. А что именно будет делать Ваш виджет, строить систему комментариев на странице, показывать прикольную игрушку или рисовать интерактивный рекламный баннер — дело исключительно Вашего вкуса и фантазии.

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

Что будем делать?

Мы создадим виджет, который рисует форму с прогнозом погоды на завтра. В качестве примера возьмем только температуру, но как увидите дальше, легко можно будет добавить и другие данные. В виджете будет располагаться информация о температуре на завтра, раскрывающийся список с возможностью выбрать город. Кнопка Обновить будет отправлять запрос на сервер, который в свою очередь обращается на сторонний сервис для определения погоды и возвращает нам нужную инфу. Эти данные мы обрабатываем и возвращаем в браузер клиенту. Где уже клиентская часть виджета перехватывает информацию и выводит ее пользователю.

Выглядит это проще, чем звучит — можете сразу посмотреть, что в итоге получится — Демо страницы с виджетом

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

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

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

Здесь нужно небольшое уточнение: смысл виджетов в том, чтобы предоставлять уникальный, удобный, интересный функционал. Мы не даем в нашем примере какую-то особенную информацию. Погоду можно узнать где угодно. Но в познавательных целях, так как мы сами пока ничего не умеем делать, возьмем данные по погоде с сервиса Прогноз погоды в России и СНГ. Они любезно предоставляют бесплатный api, коим мы и воспользуемся.

По технологиям

Тоже ничего сложного. Про iframe я уже проговорился. javascript-код будем писать на vanillaJS, без единой дополнительной библиотеки. Даже без jQuery для манипуляции DOM. Наша цель еще состоит и в том, чтобы полученный виджет был максимально легковесным, и ни к чему тащить в браузер пользователя мешок дополнительных библиотек для облегчения своей работы. Поэтому вспомним, как работать с DOM и отправлять ajax-запросы на нативном javascript, и наши клиенты скажут нам спасибо. Серверная часть — пара десятков строк кода на php.

Пишем код. Создаем базовую страницу

Страницу, на которой будет располагаться наш будущий виджет. Напишем там пару строчек текста о том, какие мы классные в плане умения прогнозировать погоду на завтра. Это будет файл index.html — обычная html-страничка. В секции head напишем так:

В секции body вот так:

Что здесь из интересного? В файле css/style.css будем хранить стили для страницы (не для виджета!). И в нужном месте создаем iframe. В атрибуте src iframe-a ставим ссылку на виджет, в нашем случае — https://webdevkin.ru/examples/weather/widget/widget.html. Мы убираем у него границу и возможность скроллинга и задаем руками размеры виджета. Конечно, интереснее создать адаптивный, но до этого доберемся позже.

Стили для страницы, без особых изысков:

Заготовка для виджета

Виджет представляет из себя обычный html-документ. В чем отличие? Первое — мы не будем заморачиваться с лишними мета-тегами, потому как поисковикам наш виджет не нужен. И второе — и стили, и js-код мы напишем прямо в коде html-страницы. Нам это нужно, чтобы сделать загрузку виджета максимально быстрой, а уменьшение числа запросов к веб-серверу в этом нам поможет. Все, что нужно, мы загрузим одним файлом.

В секции head у нас будет такой код:

Рассмотрим эти блоки подробнее.

Разметка для виджета

Здесь обычная форма. Сверху небольшая панель, где мы будем выводить температуру. Дальше select с выбором города. Значения value у городов взяты с сервиса meteoservice.ru, где именно, расскажу позже, в разделе, где будем непосредственно получать данные о погоде. И в конце кнопка Обновить. Верстка у нас будет на классах, айдишники проставлены тем элементам, доступ к которым нужен из кода javascript. Префикс wbd- (от webdevkin) используется для удобства, чтобы не путать разметки виджета и основной страницы.

Читать еще:  Age of Civilizations II Lite 1.01415

Стили для виджета

Стили для виджета максимально просты — Вы можете написать их под себя, как угодно. Не забываем, что стили ставим прямо в html-файл виджета в раздел head — style.

javascript-код виджета.

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

Что здесь происходит? Мы создаем модуль на основе замыкания WeatherWidget, внутри оного пишем класс Widget, в прототип которого закидываем нужные методы и возвращаем его из замыкания. Последней строкой мы создаем экземпляр виджета — new WeatherWidget();

Переменная XHR нужна для выполнения ajax-запросов. В конструкторе инициализируем свойство url, по которому будем получать данные о погоде. Также есть объект ui, в котором хранятся 3 поля — те самые элементы DOM, к которым нам нужен доступ из js-кода. Инициализируются они позже, в методе _initUI(). Метод init() вызывает инициализацию ui, привязку событий и обновление данных с сервера (мы же хотим, чтобы при отрисовке виджета пользователь сразу видел погоду без нажатия на Обновить). В _bindHandlers привязывается метод _updateData к клику на кнопку Обновить. Это единственная «интерактивная» часть нашего виджета.

Обратите внимание на конструкцию Widget.prototype._updateData.bind(this). Здесь явным образом привязываем контекст — нам нужно, чтобы в методе _updateData this всегда указывал на экземпляр класса Widget. Сейчас будет видно, зачем — рассмотрим код метода _updateData

Получение данных с сервера, метод _updateData

Обращаю внимание, что в параметры метода передаем свойство e (event). Оно нужно, чтобы сделать preventDefault в самом начале, дабы не перезагрузить наш виджет (иначе сработает submit формы).
Но делаем мы это такой строчкой
e && e.preventDefault();
Эта дополнительная проверка на наличие параметра e нужна, потому что когда мы вызываем this._updateData(), параметр e будет равен undefined, и соответственно e.preventDefault() выкинет исключение.

После этого мы создаем нужные переменные, объект для ajax-запроса, выбранный город и DOM-элемент, в который выводим значение температуры, полученной с сервера. data будет отправляться в ajax-запросе, resp — это ответ от сервера. Дальше мы открываем соединение и отправляем данные на сервер. Дожидаемся ответа 200 от сервера и выводим полученную температуру в span. Условимся, что от сервера приходит json-строка в формате <"code": "success", "temperature": "диапазон температур">. Традиционно обработку ошибок оставлю на Вашу совесть, все делают по-разному. И наконец, нам осталось узнать, как получить данные о погоде с нашего сервера.

Как узнавать погоду?

Как я уже упоминал, мы воспользуемся сайтом meteoservice.ru. Он предоставляет возможность получить xml-файл с данными о погоде по любому гододу СНГ. Например, по этой ссылке доступна погода по Москве. С нашего сервера мы будем запрашивать этот файлик curl-ом, парсить его на нашей стороне, извлекать данные о температуре и возвращать ее обратно в браузер. Каждому городу нужно заранее поставить в соответствие нужный код (37 — Москва), узнать их можно здесь. Как работать с curl, можно узнать в этой статье на webdevkin-е

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

Пишем php-код для получения информации о погоде

Как брать данные, уже понятно, алгоритм прост: вытаскиваем из
[H1toH2]
POST параметр city — выбранный город, формируем строку вида http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml. Это путь к файлу с погодой. Отправляем на него get-запрос curl-ом. Полученный ответ парсим и вытаскиваем из него нужные параметры: минимальная и максимальная температуры. Полученные числа отдаем в json-объекте обратно в браузер.

Поясню про simplexml_load_string — эта функция создает xml-объект, который мы уже можем парсить. А создается объект из строки xml, которую мы получаем от сервиса погоды.
REPORT->TOWN->FORECAST[0]->TEMPERATURE — это путь по узлам xml, чтобы добраться до нужных значений температуры. Пройдите по ссылке выше (московская погода) и наглядно увидите эти пути.
Если что-то непонятно, спрашивайте в комментариях.

Итого

И на этом все! Мы создали несложный виджет для получения информации о погоде. Главная его особенность в том, что его очень легко встроить на любой сайт, достаточно всего лишь вставить в html-код такие строки

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

[/H1toH2]

Расположение, размер и удаление кнопок

Справа от названия подключенного мессенджера есть 3 кнопки.

Изменить или удалить мессенджер

Если нужно изменить номер, имя аккаунта или заменить сам мессенджер, кликните по кнопке с изображением карандаша. Тут же можно удалить мессенджер из виджета.

Изменить размер кнопки

Кнопки можно расположить по две в ряд или растянуть во всю ширину.

Для того, чтобы изменить размер, нажмите на кнопку с разнонаправленными стрелками:

Изменить расположение кнопки

Чтобы поменять порядок расположения кнопок в виджете — зажмите иконку с точками и перетащите строку на нужное место в списке:

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

Как добавить код виджета на сайт

После завершения настроек система сгенерирует код для вставки виджета:

Если вы работаете с CMS:

  1. Скопируйте код виджета;
  2. Вставьте код на тех страницах, на которых должен отображаться виджет. Например, если вы хотите добавить виджет на каждую страницу, добавьте готовый код в файл, который отвечает за генерацию «подвала» всех страниц сайта. Если на вашем сайте используется несколько CMS, разместите код виджета во всех нужных местах.

Если вы работаете без CMS:

Виджет также можно подключить с помощью системы управления тегами , если вы используете ее для вашего сайта. Такие системы позволяют хранить весь необходимый HTML/JavaScript-код на внешнем сервере, и просто подключать его на веб-страницы. При этом изменения в подключаемом коде не требуют изменений в коде страниц сайта.

Если вы работаете с конструктором сайта:

  1. Скопируйте код виджета;
  2. Добавьте блок HTML и вставьте в него код виджета.
Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector