В конце прошлого года нам поставили задачу — сделать инструмент, который автоматически создавал бы адаптивный сайт на основе информации со страницы бизнеса в соцсети. На этом пути мы:
![](https://habrastorage.org/r/w780q1/files/b28/0da/c7b/b280dac7b3504a3fab40b67eaf3adb24.jpg)
Первую схему работы системы мы набросали на листочке. Что было символично, ведь проект получил рабочее название “Конверт”: лента Facebook похожа на бесконечный набор листов, а мы упаковывали эти данные в новую форму — своего рода конверт для избранной информации со страницы.
![](https://habrastorage.org/r/w1560/files/317/959/3ce/3179593ce0294e2d8af694d86f20b2a3.png)
Давайте для начала познакомимся с принципиальной схемой нашего “черного ящика”.
Пользователь заходит на сервис с ПК, смартфона или планшета, дает ссылку на страницу в соцсети и выбирает шаблон для будущего сайта. Дальше все происходит автоматически — просто следите за таймером.
![](https://habrastorage.org/r/w1560/files/1a8/7c7/5b2/1a87c75b20534d3eb53bc01b04e248ac.png)
Пока тикает таймер, мы забираем данные со страницы по Facebook API, складываем их в единый файл на нашем сервере и формируем образ будущего сайта-визитки, используя собственную систему бекапов.
![](https://habrastorage.org/r/w780q1/files/36b/cfc/c20/36bcfcc2050f4cea83b8a6b930012999.jpg)
Картинка в полном размере
Главная страница формируется по принципу лендинга: яркий первый экран, затем красивые фото, ниже — тексты недавних постов, для которых мы автоматически создадим заголовки. Если на Facebook были грядущие мероприятия — на них можно будет записаться с главной. Были отзывы? Мы также разместим их на «морде» сайта.
Количество внутренних страниц напрямую зависит от заполненности страницы на FB. Минимальный набор, который вы получите: главная и отдельные страницы «Галерея» и «Новости» — в них будет храниться больше фото и постов (до 50 штук), чем на главной. Также в структуре сайта предусмотрены страницы «Мероприятия», «О нас» и «Контакты», которые мы сгенерируем, только если на Facebook будет достаточно данных для этого.
![](https://habrastorage.org/r/w780q1/files/cc8/a50/e63/cc8a50e6395b4a1ba6c2bd1a9622d600.jpg)
Картинка в полном размере
Каждая полезная единица данных при переносе “заворачивается” в виджет от uKit — готовый элемент (заголовок, текстовый блок, картика и т.п.) из конструктора, в котором пользователь будет управлять своим сайтом. Однако, мы не только раскладываем данные с Facebook на свой лад, а еще и добавляем характерные для сайта элементы (кнопки призыва к действию, форма обратной связи и т.д.) и прописываем за пользователя первые SEO-настройки.
![](https://habrastorage.org/r/w1560/files/8ba/d41/362/8bad413626004e50b3df67207aad3d9b.png)
Когда импорт завершен, пользователь переходит на просмотр результата — и дальше может дополнять и изменять прототип (например, поставить виджет магазина, обратный звонок и т.д.) в визуальном режиме.
Весь процесс от старта импорта до момента “править сайт руками” занимает около двух минут.
1) Если у вас нет публичной Facebook-страницы, посмотрите на сайт велосипедистов с ВДНХ:
![](https://habrastorage.org/r/w1560/files/d31/b1f/1d6/d31b1f1d69c34d899022828a8516135f.png)
Он подвергся минимуму изменений после импорта и наиболее нагляден как пример того, что можно получить на выходе.
2) Другие пользователи не останавливаются и добавляют на сайт больше виджетов, по-своему перерабатывая структуру главной и внутренних страниц — например, как это кафе из Серпухова. Ребята делали себе сайт сами и впервые.
![](https://habrastorage.org/r/w1560/files/ef2/aa9/f9e/ef2aa9f9e13d47c1b1522e2ff5672ee3.png)
Побродить по страничкам их сайта можно тут.
3) Третья группа пользователей стала применять конвертер по сценарию, о котором мы не думали изначально. Они переносят данные — и отдают остальные шаги на откуп фрилансерам.
![](https://habrastorage.org/r/w780q1/files/fe4/ca8/e75/fe4ca8e75488435dbba4404c6d0dddde.jpg)
Пример сайта, где владелец только импортировал страницу, а остальное доделал исполнитель за 3,5К рублей
Так что, отчасти, мы изобрели систему переноса данных, которая может облегчить жизнь заказчикам и фрилансерам, делающим сайты-визитки и простые одностраничники.
Самым сложным было научиться переносить контент (у FB далеко не 5 типов постов, как он заявляет) и не ломать при этом шаблоны**. Даже если нужно перенести белые стихи о белых кружках.
![](https://habrastorage.org/r/w1560/files/4aa/5a7/793/4aa5a779327145ed8b2c317a6a156917.png)
Вторым по сложности моментом стали споры вокруг названия рабочей версии. Маркетологи в итоге настояли на смене имени проекта — теперь он зовется uKit Alt. Но пасхалку с “конвертом” мы оставили.
1) На появление публичной версии конвертера люди реагировали по-разному:
![](https://habrastorage.org/r/w1560/files/6af/271/c7f/6af271c7fc3b4bda84b8e0aeabb39842.png)
Будни наших сммщиков
2) Кто-то смело бросался тестировать сервис, хотя он заточен под создание сайтов-визиток, а не под новостные проекты:
![](https://habrastorage.org/r/w1560/files/024/a48/a74/024a48a747df4a008fb29e64fb9f31ce.png)
На старте конвертировать страницу мог только ее администратор, так что страничку РБК конвертировал кто-то из админов. Сейчас мы отошли от схемы «импортировать может только администратор» в пользу «редактировать результат может только администратор»*
3) А кто-то, как Петр Термен (правнук того самого Льва Термена), смотрел в будущее:
![](https://habrastorage.org/r/w1560/files/03f/659/cc9/03f659cc9bf1419e8b99fd2c18a287ee.png)
Недавно мы реализовали эту функцию — теперь новости с Facebook можно добавлять на сайт автоматически.
Основной наш пользователь — не медийные проекты и не медийные персоны. Из 17000 конвертаций большая часть — это небольшие кафе, гостиницы, музыкальные и творческие проекты, предприниматели всех мастей.
У кого-то сайта не было, у кого-то сайт уже был, но «неадаптивный», «со сложной CMS» и так далее. Надеемся, что помогли им.
Попадались и такие случаи:
Нам кажется, что даже самый простой сайт из фейсбучного контента лучше того, что живет под спойлером.
Ну а мы… Мы запустили проект, к которому в будущих версиях добавится нейросеть. Она будет собирать людям сайты за 2 минуты.
А пока — будем рады обсудить работу с API Facebook и работу сервиса в текущем виде.
Сноски:
* Благодаря тому, что начать конвертацию мог только администратор, мы могли забирать с публичной страницы больше типов контента, включая отзывы. Похоже, мы в этом деле первые. Но сейчас работает версия, где можно будет пропустить шаг с регистрацией на старте — уже на подходе.
** О неочевидных технических проблемах при импорте FB-контента на новые платформы собрался целый пост-лонгрид — следующий.
- Познакомились с правнуком Льва Термена и выполнили его просьбу.
![](https://habrastorage.org/files/b28/0da/c7b/b280dac7b3504a3fab40b67eaf3adb24.jpg)
- Похоже, первыми реализовали автоматический перенос отзывов с Facebook на другие платформы.
- И изобрели еще один способ ускорить работу над недорогим сайтом для фрилансера и заказчика.
Первую схему работы системы мы набросали на листочке. Что было символично, ведь проект получил рабочее название “Конверт”: лента Facebook похожа на бесконечный набор листов, а мы упаковывали эти данные в новую форму — своего рода конверт для избранной информации со страницы.
![](https://habrastorage.org/files/317/959/3ce/3179593ce0294e2d8af694d86f20b2a3.png)
Давайте для начала познакомимся с принципиальной схемой нашего “черного ящика”.
1. Как это работает
Пользователь заходит на сервис с ПК, смартфона или планшета, дает ссылку на страницу в соцсети и выбирает шаблон для будущего сайта. Дальше все происходит автоматически — просто следите за таймером.
![](https://habrastorage.org/files/1a8/7c7/5b2/1a87c75b20534d3eb53bc01b04e248ac.png)
Пока тикает таймер, мы забираем данные со страницы по Facebook API, складываем их в единый файл на нашем сервере и формируем образ будущего сайта-визитки, используя собственную систему бекапов.
![](https://habrastorage.org/files/36b/cfc/c20/36bcfcc2050f4cea83b8a6b930012999.jpg)
Картинка в полном размере
Главная страница формируется по принципу лендинга: яркий первый экран, затем красивые фото, ниже — тексты недавних постов, для которых мы автоматически создадим заголовки. Если на Facebook были грядущие мероприятия — на них можно будет записаться с главной. Были отзывы? Мы также разместим их на «морде» сайта.
Количество внутренних страниц напрямую зависит от заполненности страницы на FB. Минимальный набор, который вы получите: главная и отдельные страницы «Галерея» и «Новости» — в них будет храниться больше фото и постов (до 50 штук), чем на главной. Также в структуре сайта предусмотрены страницы «Мероприятия», «О нас» и «Контакты», которые мы сгенерируем, только если на Facebook будет достаточно данных для этого.
![](https://habrastorage.org/files/cc8/a50/e63/cc8a50e6395b4a1ba6c2bd1a9622d600.jpg)
Картинка в полном размере
Каждая полезная единица данных при переносе “заворачивается” в виджет от uKit — готовый элемент (заголовок, текстовый блок, картика и т.п.) из конструктора, в котором пользователь будет управлять своим сайтом. Однако, мы не только раскладываем данные с Facebook на свой лад, а еще и добавляем характерные для сайта элементы (кнопки призыва к действию, форма обратной связи и т.д.) и прописываем за пользователя первые SEO-настройки.
![](https://habrastorage.org/files/8ba/d41/362/8bad413626004e50b3df67207aad3d9b.png)
Когда импорт завершен, пользователь переходит на просмотр результата — и дальше может дополнять и изменять прототип (например, поставить виджет магазина, обратный звонок и т.д.) в визуальном режиме.
Весь процесс от старта импорта до момента “править сайт руками” занимает около двух минут.
2. Где посмотреть результат?
1) Если у вас нет публичной Facebook-страницы, посмотрите на сайт велосипедистов с ВДНХ:
![](https://habrastorage.org/files/d31/b1f/1d6/d31b1f1d69c34d899022828a8516135f.png)
Он подвергся минимуму изменений после импорта и наиболее нагляден как пример того, что можно получить на выходе.
2) Другие пользователи не останавливаются и добавляют на сайт больше виджетов, по-своему перерабатывая структуру главной и внутренних страниц — например, как это кафе из Серпухова. Ребята делали себе сайт сами и впервые.
![](https://habrastorage.org/files/ef2/aa9/f9e/ef2aa9f9e13d47c1b1522e2ff5672ee3.png)
Побродить по страничкам их сайта можно тут.
3) Третья группа пользователей стала применять конвертер по сценарию, о котором мы не думали изначально. Они переносят данные — и отдают остальные шаги на откуп фрилансерам.
![](https://habrastorage.org/files/fe4/ca8/e75/fe4ca8e75488435dbba4404c6d0dddde.jpg)
Пример сайта, где владелец только импортировал страницу, а остальное доделал исполнитель за 3,5К рублей
Так что, отчасти, мы изобрели систему переноса данных, которая может облегчить жизнь заказчикам и фрилансерам, делающим сайты-визитки и простые одностраничники.
3. Пасхалка, просьба Термена и зачем все это было
3.1 Как назвать эту штуку
Самым сложным было научиться переносить контент (у FB далеко не 5 типов постов, как он заявляет) и не ломать при этом шаблоны**. Даже если нужно перенести белые стихи о белых кружках.
![](https://habrastorage.org/files/4aa/5a7/793/4aa5a779327145ed8b2c317a6a156917.png)
Вторым по сложности моментом стали споры вокруг названия рабочей версии. Маркетологи в итоге настояли на смене имени проекта — теперь он зовется uKit Alt. Но пасхалку с “конвертом” мы оставили.
3.2 Просьба Термена
1) На появление публичной версии конвертера люди реагировали по-разному:
![](https://habrastorage.org/files/6af/271/c7f/6af271c7fc3b4bda84b8e0aeabb39842.png)
Будни наших сммщиков
2) Кто-то смело бросался тестировать сервис, хотя он заточен под создание сайтов-визиток, а не под новостные проекты:
![](https://habrastorage.org/files/024/a48/a74/024a48a747df4a008fb29e64fb9f31ce.png)
На старте конвертировать страницу мог только ее администратор, так что страничку РБК конвертировал кто-то из админов. Сейчас мы отошли от схемы «импортировать может только администратор» в пользу «редактировать результат может только администратор»*
3) А кто-то, как Петр Термен (правнук того самого Льва Термена), смотрел в будущее:
![](https://habrastorage.org/files/03f/659/cc9/03f659cc9bf1419e8b99fd2c18a287ee.png)
Недавно мы реализовали эту функцию — теперь новости с Facebook можно добавлять на сайт автоматически.
3.3 Зачем все это было
Основной наш пользователь — не медийные проекты и не медийные персоны. Из 17000 конвертаций большая часть — это небольшие кафе, гостиницы, музыкальные и творческие проекты, предприниматели всех мастей.
У кого-то сайта не было, у кого-то сайт уже был, но «неадаптивный», «со сложной CMS» и так далее. Надеемся, что помогли им.
Попадались и такие случаи:
Старый сайт одного из пришедших пользователей![](https://habrastorage.org/r/w1560/files/88c/e8e/bc0/88ce8ebc04da4b71a7d723228a8d8a27.png)
Последнее обновление сайта датируется 17.04.2016
![](https://habrastorage.org/files/88c/e8e/bc0/88ce8ebc04da4b71a7d723228a8d8a27.png)
Последнее обновление сайта датируется 17.04.2016
Нам кажется, что даже самый простой сайт из фейсбучного контента лучше того, что живет под спойлером.
Ну а мы… Мы запустили проект, к которому в будущих версиях добавится нейросеть. Она будет собирать людям сайты за 2 минуты.
А пока — будем рады обсудить работу с API Facebook и работу сервиса в текущем виде.
Сноски:
* Благодаря тому, что начать конвертацию мог только администратор, мы могли забирать с публичной страницы больше типов контента, включая отзывы. Похоже, мы в этом деле первые. Но сейчас работает версия, где можно будет пропустить шаг с регистрацией на старте — уже на подходе.
** О неочевидных технических проблемах при импорте FB-контента на новые платформы собрался целый пост-лонгрид — следующий.