- PVSM.RU - https://www.pvsm.ru -

Как мы учили Facebook делать сайты или План “Конверт”

В конце прошлого года нам поставили задачу — сделать инструмент, который автоматически создавал бы адаптивный сайт на основе информации со страницы бизнеса в соцсети. На этом пути мы:

  • Познакомились с правнуком Льва Термена и выполнили его просьбу.

Как мы учили Facebook делать сайты или План “Конверт” - 1

  • Похоже, первыми реализовали автоматический перенос отзывов с Facebook на другие платформы.
  • И изобрели еще один способ ускорить работу над недорогим сайтом для фрилансера и заказчика.

Первую схему работы системы мы набросали на листочке. Что было символично, ведь проект получил рабочее название “Конверт”: лента Facebook похожа на бесконечный набор листов, а мы упаковывали эти данные в новую форму — своего рода конверт для избранной информации со страницы.

Как мы учили Facebook делать сайты или План “Конверт” - 2

Давайте для начала познакомимся с принципиальной схемой нашего “черного ящика”.

1. Как это работает

Пользователь заходит на сервис [1] с ПК, смартфона или планшета, дает ссылку страницу в соцсети и выбирает шаблон для будущего сайта. Дальше все происходит автоматически — просто следите за таймером.

Как мы учили Facebook делать сайты или План “Конверт” - 3

Пока тикает таймер, мы забираем данные со страницы по Facebook API, складываем их в единый файл на нашем сервере и формируем образ будущего сайта-визитки, используя собственную систему бекапов [2].

Как мы учили Facebook делать сайты или План “Конверт” - 4
Картинка в полном размере [3]

Главная страница формируется по принципу лендинга: яркий первый экран, затем красивые фото, ниже — тексты недавних постов, для которых мы автоматически создадим заголовки. Если на Facebook были грядущие мероприятия — на них можно будет записаться с главной. Были отзывы? Мы также разместим их на «морде» сайта.

Количество внутренних страниц напрямую зависит от заполненности страницы на FB. Минимальный набор, который вы получите: главная и отдельные страницы «Галерея» и «Новости» — в них будет храниться больше фото и постов (до 50 штук), чем на главной. Также в структуре сайта предусмотрены страницы «Мероприятия», «О нас» и «Контакты», которые мы сгенерируем, только если на Facebook будет достаточно данных для этого.

Как мы учили Facebook делать сайты или План “Конверт” - 5
Картинка в полном размере [4]

Каждая полезная единица данных при переносе “заворачивается” в виджет от uKit — готовый элемент (заголовок, текстовый блок, картика и т.п.) из конструктора, в котором пользователь будет управлять своим сайтом. Однако, мы не только раскладываем данные с Facebook на свой лад, а еще и добавляем характерные для сайта элементы (кнопки призыва к действию, форма обратной связи и т.д.) и прописываем за пользователя первые SEO-настройки.

Как мы учили Facebook делать сайты или План “Конверт” - 6 [5]

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

Весь процесс от старта импорта до момента “править сайт руками” занимает около двух минут.

2. Где посмотреть результат?

1) Если у вас нет публичной [6] Facebook-страницы, посмотрите на сайт велосипедистов с ВДНХ [7]:

Как мы учили Facebook делать сайты или План “Конверт” - 7

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

2) Другие пользователи не останавливаются и добавляют на сайт больше виджетов, по-своему перерабатывая структуру главной и внутренних страниц — например, как это кафе из Серпухова. Ребята делали себе сайт сами и впервые.

Как мы учили Facebook делать сайты или План “Конверт” - 8
Побродить по страничкам их сайта можно тут [8].

3) Третья группа пользователей стала применять конвертер по сценарию, о котором мы не думали изначально. Они переносят данные — и отдают остальные шаги на откуп фрилансерам.

Как мы учили Facebook делать сайты или План “Конверт” - 9
Пример сайта [9], где владелец только импортировал страницу, а остальное доделал исполнитель за 3,5К рублей

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

3. Пасхалка, просьба Термена и зачем все это было

3.1 Как назвать эту штуку

Самым сложным было научиться переносить контент (у FB далеко не 5 типов, постов, как он заявляет) и не ломать при этом шаблоны**. Даже если нужно перенести белые стихи о белых кружках.

Как мы учили Facebook делать сайты или План “Конверт” - 10 [10]

Вторым по сложности моментом стали споры вокруг названия рабочей версии. Маркетологи в итоге настояли на смене имени проекта — теперь он зовется uKit Alt. Но пасхалку с “конвертом” [11] мы оставили.

3.2 Просьба Термена

1) На появление публичной версии конвертера люди реагировали по-разному:

Как мы учили Facebook делать сайты или План “Конверт” - 11
Будни наших сммщиков

2) Кто-то смело бросался тестировать сервис, хотя он заточен под создание сайтов-визиток, а не под новостные проекты:

Как мы учили Facebook делать сайты или План “Конверт” - 12
На старте конвертировать страницу мог только ее администратор, так что страничку РБК конвертировал кто-то из админов. Сейчас мы отошли от схемы «импортировать может только администратор» в пользу «редактировать результат может только администратор»*

3) А кто-то, как Петр Термен (правнук того самого Льва Термена), смотрел в будущее:

Как мы учили Facebook делать сайты или План “Конверт” - 13

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

3.3 Зачем все это было

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

У кого-то сайта не было, у кого-то сайт уже был, но «неадаптивный», «со сложной CMS» и так далее. Надеемся, что помогли им.

Попадались и такие случаи:

Старый сайт одного из пришедших пользователей

Как мы учили Facebook делать сайты или План “Конверт” - 14

Последнее обновление сайта датируется 17.04.2016

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

Ну а мы… Мы запустили проект, к которому в будущих версиях добавится нейросеть. Она будет собирать людям сайты за 2 минуты.

А пока — будем рады обсудить работу с API Facebook и работу сервиса в текущем виде.

Сноски:

* Благодаря тому, что начать конвертацию мог только администратор, мы могли забирать с публичной страницы больше типов контента, включая отзывы. Похоже, мы в этом деле первые [12]. Но сейчас работает версия, где можно будет пропустить шаг с регистрацией на старте — уже на подходе.

** О неочевидных технических проблемах при импорте FB-контента на новые платформы собрался целый пост-лонгрид — следующий.

Автор: uTeam

Источник [13]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/facebook-api/180670

Ссылки в тексте:

[1] сервис: https://ukit.com/ru/convert

[2] систему бекапов: http://blog-ru.ukit.com/updates/backup

[3] Картинка в полном размере: https://hsto.org/files/36b/cfc/c20/36bcfcc2050f4cea83b8a6b930012999.jpg

[4] Картинка в полном размере: https://hsto.org/files/cc8/a50/e63/cc8a50e6395b4a1ba6c2bd1a9622d600.jpg

[5] Image: https://habrastorage.org/files/fe9/820/374/fe98203747044d4f8c536060c727035a.png

[6] публичной: https://www.facebook.com/help/217671661585622?sr=6&query=%D0%BF%D1%83%D0%B1%D0%BB%D0%B8%D1%87%D0%BD%D0%B0%D1%8F%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0&sid=05EAK8OraUANUnbrf

[7] сайт велосипедистов с ВДНХ: http://velosekta.com/

[8] тут: http://flamboire.ru/

[9] сайта: http://konstantinkoltin.ru/

[10] Image: https://habrastorage.org/files/5c4/821/dbe/5c4821dbe19c4b0e982dfe15e1dbb598.png

[11] пасхалку с “конвертом”: https://ukit.com/ru/convert-fb

[12] первые: https://geektimes.ru/post/276102/

[13] Источник: https://habrahabr.ru/post/308590/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best