Как создать web виджет для сайтов?

Question

[Андрей Котосин]

Добрый день. Я разработал проект для быстрой связи с клиентами, аналог американского сервиса, но переработанный под российские реалии. Дело в том, что сейчас пользователь создает собственную страницу в сервисе, и размещает ссылку на своем сайте, странице в соц.сети и т.д. Но сейчас возник спрос на создание многопользовательского web виджета, который люди смогут встраивать на свой сайт. Вопрос в том, какой лучше использовать инструментарий для подобной задачи? Нужно что бы человек мог вставить код виджета на сайт, и соответственно отображался его личный контент со странице в моем сервисе. Например как это сделано у jivosite, vk, facebook и т.д.

На данный момент весь сервис у меня построен на PHP совместно с базой данных MySQL. Хотелось бы понять принцип работы виджетов и что для их разработки стоит изучать.

Answer 1

[Кирилл Горелов]

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

Comments

[Андрей Котосин]

iframe - не лучшее решение т.к. страница пользователя во весь экран и в случае подобного встраивания - будет выглядеть очень не корректно. Дело в том, что я с JS впринципе не дружу еще (работаю как писал ранее только с php). Мне интересен вопрос - как при помощи JS я могу обращаться со стороннего сайта в свою базу данных? Или как этот процесс происходит?

Есть предположение что виджеты работают примерно так:
1. Встроенный js обращается к js на моем сервере и отрисовывает все на сайте пользователя.
2. js на моем сервере обращается каким то образом к базе данных и возвращает данные.
3. Эти данные передаются на js который пользователь встраивает в сайт.
Я правильно понимаю? Так это должно работать? Или какая то другая структура должна быть?

[Кирилл Горелов]

Андрей Котосин, Почти)
js, на стороне пользователя делает все, что я описывал в самом первом примере. То есть, отрисовывает все необходимое. Сразу напишу комментарий, можно упростить работу, сразу сделать готовый div блок со всеми стилями, правда не очень хорошо это будет выглядеть. Но это уж совсем запасной вариант.

Далее, я бы сделал обмен данными через мини api, то есть пользователь отдает свой токен(например) вашему серверу. Js посылает get/post запрос на ваш сервер. ТОлько обращение должно идти на *.php, делать через js как написали вы не очень практично, поэтому лучше сразу обращаться к php файлам. Этот php файл примет запрос от пользователя обработает его и отдаст в формате js.
Виджет на стороне клиента обработает js и проставит все переменные по своим местам.
Это такой самый простой вариант, который я могу предложить с лету. Хотя все может зависеть от конкретной задачи.

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

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

Answer 2

[McBernar]

Айфрейм, в котором отображается нужная страница с вашего сервиса.

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

Answer 3

[profesor08]

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

Виджет это ничто иное как обычный html, css, js и какой-то бэкенд.