В конце прошлого года нам поставили задачу — сделать инструмент, который автоматически создавал бы адаптивный сайт на основе информации со страницы бизнеса в соцсети. На этом пути мы:
Первую схему работы системы мы набросали на листочке. Что было символично, ведь проект получил рабочее название “Конверт”: лента Facebook похожа на бесконечный набор листов, а мы упаковывали эти данные в новую форму — своего рода конверт для избранной информации со страницы.
Давайте для начала познакомимся с принципиальной схемой нашего “черного ящика”.
Пользователь заходит на сервис с ПК, смартфона или планшета, дает ссылку на страницу в соцсети и выбирает шаблон для будущего сайта. Дальше все происходит автоматически — просто следите за таймером.
Пока тикает таймер, мы забираем данные со страницы по Facebook API, складываем их в единый файл на нашем сервере и формируем образ будущего сайта-визитки, используя собственную систему бекапов.
Картинка в полном размере
Главная страница формируется по принципу лендинга: яркий первый экран, затем красивые фото, ниже — тексты недавних постов, для которых мы автоматически создадим заголовки. Если на Facebook были грядущие мероприятия — на них можно будет записаться с главной. Были отзывы? Мы также разместим их на «морде» сайта.
Количество внутренних страниц напрямую зависит от заполненности страницы на FB. Минимальный набор, который вы получите: главная и отдельные страницы «Галерея» и «Новости» — в них будет храниться больше фото и постов (до 50 штук), чем на главной. Также в структуре сайта предусмотрены страницы «Мероприятия», «О нас» и «Контакты», которые мы сгенерируем, только если на Facebook будет достаточно данных для этого.
Картинка в полном размере
Каждая полезная единица данных при переносе “заворачивается” в виджет от uKit — готовый элемент (заголовок, текстовый блок, картика и т.п.) из конструктора, в котором пользователь будет управлять своим сайтом. Однако, мы не только раскладываем данные с Facebook на свой лад, а еще и добавляем характерные для сайта элементы (кнопки призыва к действию, форма обратной связи и т.д.) и прописываем за пользователя первые SEO-настройки.
Когда импорт завершен, пользователь переходит на просмотр результата — и дальше может дополнять и изменять прототип (например, поставить виджет магазина, обратный звонок и т.д.) в визуальном режиме.
Весь процесс от старта импорта до момента “править сайт руками” занимает около двух минут.
1) Если у вас нет публичной Facebook-страницы, посмотрите на сайт велосипедистов с ВДНХ:
Он подвергся минимуму изменений после импорта и наиболее нагляден как пример того, что можно получить на выходе.
2) Другие пользователи не останавливаются и добавляют на сайт больше виджетов, по-своему перерабатывая структуру главной и внутренних страниц — например, как это кафе из Серпухова. Ребята делали себе сайт сами и впервые.
Побродить по страничкам их сайта можно тут.
3) Третья группа пользователей стала применять конвертер по сценарию, о котором мы не думали изначально. Они переносят данные — и отдают остальные шаги на откуп фрилансерам.
Пример сайта, где владелец только импортировал страницу, а остальное доделал исполнитель за 3,5К рублей
Так что, отчасти, мы изобрели систему переноса данных, которая может облегчить жизнь заказчикам и фрилансерам, делающим сайты-визитки и простые одностраничники.
Самым сложным было научиться переносить контент (у FB далеко не 5 типов постов, как он заявляет) и не ломать при этом шаблоны**. Даже если нужно перенести белые стихи о белых кружках.
Вторым по сложности моментом стали споры вокруг названия рабочей версии. Маркетологи в итоге настояли на смене имени проекта — теперь он зовется uKit Alt. Но пасхалку с “конвертом” мы оставили.
1) На появление публичной версии конвертера люди реагировали по-разному:
Будни наших сммщиков
2) Кто-то смело бросался тестировать сервис, хотя он заточен под создание сайтов-визиток, а не под новостные проекты:
На старте конвертировать страницу мог только ее администратор, так что страничку РБК конвертировал кто-то из админов. Сейчас мы отошли от схемы «импортировать может только администратор» в пользу «редактировать результат может только администратор»*
3) А кто-то, как Петр Термен (правнук того самого Льва Термена), смотрел в будущее:
Недавно мы реализовали эту функцию — теперь новости с Facebook можно добавлять на сайт автоматически.
Основной наш пользователь — не медийные проекты и не медийные персоны. Из 17000 конвертаций большая часть — это небольшие кафе, гостиницы, музыкальные и творческие проекты, предприниматели всех мастей.
У кого-то сайта не было, у кого-то сайт уже был, но «неадаптивный», «со сложной CMS» и так далее. Надеемся, что помогли им.
Попадались и такие случаи:
Нам кажется, что даже самый простой сайт из фейсбучного контента лучше того, что живет под спойлером.
Ну а мы… Мы запустили проект, к которому в будущих версиях добавится нейросеть. Она будет собирать людям сайты за 2 минуты.
А пока — будем рады обсудить работу с API Facebook и работу сервиса в текущем виде.
Сноски:
* Благодаря тому, что начать конвертацию мог только администратор, мы могли забирать с публичной страницы больше типов контента, включая отзывы. Похоже, мы в этом деле первые. Но сейчас работает версия, где можно будет пропустить шаг с регистрацией на старте — уже на подходе.
** О неочевидных технических проблемах при импорте FB-контента на новые платформы собрался целый пост-лонгрид — следующий.
- Познакомились с правнуком Льва Термена и выполнили его просьбу.
- Похоже, первыми реализовали автоматический перенос отзывов с Facebook на другие платформы.
- И изобрели еще один способ ускорить работу над недорогим сайтом для фрилансера и заказчика.
Первую схему работы системы мы набросали на листочке. Что было символично, ведь проект получил рабочее название “Конверт”: лента Facebook похожа на бесконечный набор листов, а мы упаковывали эти данные в новую форму — своего рода конверт для избранной информации со страницы.
Давайте для начала познакомимся с принципиальной схемой нашего “черного ящика”.
1. Как это работает
Пользователь заходит на сервис с ПК, смартфона или планшета, дает ссылку на страницу в соцсети и выбирает шаблон для будущего сайта. Дальше все происходит автоматически — просто следите за таймером.
Пока тикает таймер, мы забираем данные со страницы по Facebook API, складываем их в единый файл на нашем сервере и формируем образ будущего сайта-визитки, используя собственную систему бекапов.
Картинка в полном размере
Главная страница формируется по принципу лендинга: яркий первый экран, затем красивые фото, ниже — тексты недавних постов, для которых мы автоматически создадим заголовки. Если на Facebook были грядущие мероприятия — на них можно будет записаться с главной. Были отзывы? Мы также разместим их на «морде» сайта.
Количество внутренних страниц напрямую зависит от заполненности страницы на FB. Минимальный набор, который вы получите: главная и отдельные страницы «Галерея» и «Новости» — в них будет храниться больше фото и постов (до 50 штук), чем на главной. Также в структуре сайта предусмотрены страницы «Мероприятия», «О нас» и «Контакты», которые мы сгенерируем, только если на Facebook будет достаточно данных для этого.
Картинка в полном размере
Каждая полезная единица данных при переносе “заворачивается” в виджет от uKit — готовый элемент (заголовок, текстовый блок, картика и т.п.) из конструктора, в котором пользователь будет управлять своим сайтом. Однако, мы не только раскладываем данные с Facebook на свой лад, а еще и добавляем характерные для сайта элементы (кнопки призыва к действию, форма обратной связи и т.д.) и прописываем за пользователя первые SEO-настройки.
Когда импорт завершен, пользователь переходит на просмотр результата — и дальше может дополнять и изменять прототип (например, поставить виджет магазина, обратный звонок и т.д.) в визуальном режиме.
Весь процесс от старта импорта до момента “править сайт руками” занимает около двух минут.
2. Где посмотреть результат?
1) Если у вас нет публичной Facebook-страницы, посмотрите на сайт велосипедистов с ВДНХ:
Он подвергся минимуму изменений после импорта и наиболее нагляден как пример того, что можно получить на выходе.
2) Другие пользователи не останавливаются и добавляют на сайт больше виджетов, по-своему перерабатывая структуру главной и внутренних страниц — например, как это кафе из Серпухова. Ребята делали себе сайт сами и впервые.
Побродить по страничкам их сайта можно тут.
3) Третья группа пользователей стала применять конвертер по сценарию, о котором мы не думали изначально. Они переносят данные — и отдают остальные шаги на откуп фрилансерам.
Пример сайта, где владелец только импортировал страницу, а остальное доделал исполнитель за 3,5К рублей
Так что, отчасти, мы изобрели систему переноса данных, которая может облегчить жизнь заказчикам и фрилансерам, делающим сайты-визитки и простые одностраничники.
3. Пасхалка, просьба Термена и зачем все это было
3.1 Как назвать эту штуку
Самым сложным было научиться переносить контент (у FB далеко не 5 типов постов, как он заявляет) и не ломать при этом шаблоны**. Даже если нужно перенести белые стихи о белых кружках.
Вторым по сложности моментом стали споры вокруг названия рабочей версии. Маркетологи в итоге настояли на смене имени проекта — теперь он зовется uKit Alt. Но пасхалку с “конвертом” мы оставили.
3.2 Просьба Термена
1) На появление публичной версии конвертера люди реагировали по-разному:
Будни наших сммщиков
2) Кто-то смело бросался тестировать сервис, хотя он заточен под создание сайтов-визиток, а не под новостные проекты:
На старте конвертировать страницу мог только ее администратор, так что страничку РБК конвертировал кто-то из админов. Сейчас мы отошли от схемы «импортировать может только администратор» в пользу «редактировать результат может только администратор»*
3) А кто-то, как Петр Термен (правнук того самого Льва Термена), смотрел в будущее:
Недавно мы реализовали эту функцию — теперь новости с Facebook можно добавлять на сайт автоматически.
3.3 Зачем все это было
Основной наш пользователь — не медийные проекты и не медийные персоны. Из 17000 конвертаций большая часть — это небольшие кафе, гостиницы, музыкальные и творческие проекты, предприниматели всех мастей.
У кого-то сайта не было, у кого-то сайт уже был, но «неадаптивный», «со сложной CMS» и так далее. Надеемся, что помогли им.
Попадались и такие случаи:
Старый сайт одного из пришедших пользователей
Последнее обновление сайта датируется 17.04.2016
Последнее обновление сайта датируется 17.04.2016
Нам кажется, что даже самый простой сайт из фейсбучного контента лучше того, что живет под спойлером.
Ну а мы… Мы запустили проект, к которому в будущих версиях добавится нейросеть. Она будет собирать людям сайты за 2 минуты.
А пока — будем рады обсудить работу с API Facebook и работу сервиса в текущем виде.
Сноски:
* Благодаря тому, что начать конвертацию мог только администратор, мы могли забирать с публичной страницы больше типов контента, включая отзывы. Похоже, мы в этом деле первые. Но сейчас работает версия, где можно будет пропустить шаг с регистрацией на старте — уже на подходе.
** О неочевидных технических проблемах при импорте FB-контента на новые платформы собрался целый пост-лонгрид — следующий.
