Для Shop-Script можно создать витрину интернет-магазина в «Фейсбуке». Витрина получится с таким же оформлением, что и стандартные страницы «Фейсбука», чтобы посетители воспринимали ее как часть социальной сети.
Кратко о том, что нужно сделать:
- Создать в Shop-Script отдельную витрину с оформлением в стиле «Фейсбука».
- Создать приложение в аккаунте соцсети.
1. Cоздание специальной витрины в Shop-Script
Для подключения интернет-магазина к «Фейсбуку» обязательно нужен SSL-сертификат для доменного имени, на котором работает витрина интернет-магазина.
Пользователям облака Webasyst SSL-сертификат предоставляется бесплатно для стандартных доменов ***.webasyst.cloud и ***.host.webasyst.com. На стандартном домене можно создать полноценную онлайн-витрину в «Фейсбуке» без регистрации собственного доменного имени.
- Зарегистрируйтесь в облаке Webasyst или установите фреймворк Webasyst и Shop-Script по инструкции.
- Войдите в бекенд Webasyst и в приложении «Инсталлер» установите тему дизайна «Фейсбук».
- В приложении «Сайт» перейдите в раздел «Структура» и добавьте новое правило для приложения «Магазин». Для этого правила впишите адрес facebook/* и выберите тему дизайна «Фейсбук». Это правило создаст отдельную витрину по указанному адресу.
Можно указать и другой адрес для Фейсбук-витрины, если руководствоваться рекомендациями.
- Включите флажок «Скрытое поселение» — чтобы ссылка на эту витрину не появилась в главном меню сайта. Выберите другие параметры правила, как вам нужно, и сохраните изменения.
- В приложении «Магазин» в разделе «Витрина → Страницы» для созданной витрины добавьте информационную страницу с условиями политики конфиденциальности для пользователей соцсети. Скопируйте URL страницы — он понадобится для публикации приложения для всех пользователей соцсети.
Для проверки откройте в браузере адрес созданной витрины в браузере. Её оформление должно соответствовать оформлению соцсети.
2. Настройка приложения в «Фейсбуке»
Войдите в «Фейсбук». Если у вас нет аккаунта в этой соцсети, зарегистрируйтесь.
Откройте страницу создания приложения. Расширьте статус своего аккаунта до статуса разработчика.
а. Создание страницы магазина
Страница магазина в «Фейсбуке» — это аналог вашей личной страницы в соцсети. Только она создается не для человека, а для организации или группы. На такой странице можно публиковать информацию о работе интернет-магазина и о вашей компании. Примеры таких страниц:
https://www.facebook.com/Webasyst.RU
https://www.facebook.com/Google
Перейдите к созданию страницы. Выберите тип страницы «Компания или бренд» и нажмите «Начать».
Введите название для страницы и выберите категорию. Введите адрес компании и номер телефона.
Дальше следуйте подсказкам интерфейса. После создания страница вашего магазина может выглядеть примерно так:
Теперь нужно добавить созданную страницу вкладку, с помощью которой можно будет открывать витрину магазина внутри соцсети. Пользователь визуально останется в пределах основной страницы магазина, но при этом сможет совершать покупки на онлайн-витрине. Вкладка будет открывать приложение с витриной интернет-магазина, созданное на платформе «Фейсбука».
Чтобы создать вкладку на странице магазина, у страницы должно быть больше 2000 подписчиков. Это требование соцсети.
б. Создание приложения в «Фейсбуке»
- Перейдите в раздел управления приложениями для разработчиков.
- Щёлкните по кнопке «Добавьте новое приложение».
- Напишите любое название приложения — например, своего название интернет-магазина. Выберите категорию приложения, например, «Покупки». Щелкните по кнопке «Создайте ID приложения».
- Перейдите в раздел «Настройки → Основное».
В поле «URL-адрес политики безопасности» вставьте адрес страницы с политикой безопасности для пользователей «Фейсбука». Это обязательное требование соцсети, чтобы опубликовать приложение для всех пользователей.
Щелкните по кнопке «Добавить платформу».
- Выберите «Веб-игры на Facebook».
- На странице настроек приложения добавится новый блок полей «Веб-игры на Facebook».
В поле «URL веб-игр на Facebook (https)» вставьте URL Фейсбук-витрины, созданной в бекенде Webasyst, — с указанием протокола https://.
Сохраните настройки. - Скопируйте ID приложения вверху страницы. Он понадобится для дальнейшей настройки.
в. Добавление вкладки с витриной на страницу магазина
Чтобы создать вкладку на странице магазина, у страницы должно быть больше 2000 подписчиков. Это требование соцсети. Дождитесь, когда у страницы вашего магазина появится требуемое количество подписчиков, прежде чем продолжать настройку.
- На странице настроек приложения в разделе «Настройки → Основное» щелкните внизу «Добавить платформу».
- Выберите вариант «Вкладка Страницы».
Заполните значения:
— Безопасный URL-адрес вкладки Страницы: скопируйте сюда URL специальной витрины с указанием HTTPS-протокола.
— Название вкладки Страницы: любой текстовый заголовок, который должен отображаться на вкладке, например: «Магазин». Покупатели будут щелкать по этой вкладке на странице магазина, чтобы открыть онлайн-витрину и перейти к покупкам.
Сохраните изменения. - В отдельной вкладке браузера введите в адресной строке адрес такого вида:
https://www.facebook.com/dialog/pagetab?app_id=APP_ID&redirect_uri=SECURE_PAGE_TAB_URL
Вместо APP_ID и SECURE_PAGE_TAB_URL вставьте в него такие значения:
— APP_ID: числовой идентификатор вашего приложения
— SECURE_PAGE_TAB_URL: URL специальной витрины с указанием HTTPS-протокола
Пример:
https://www.facebook.com/dialog/pagetab?app_id=1234567890&redirect_uri=https://mydomain.ru/facebook/
- На открывшейся странице выберите название страницы магазина из списка «Страницы Facebook» и нажмите «Добавить Страницу в закладки».
Во вкладке браузера должна открыться специальная витрина вашего интернет-магазина. Это будет означать, что вкладка с приложением добавлена на страницу магазина.
Вот так может выглядеть вкладка приложения:
г. Подключение темы дизайна к приложению «Фейсбука»
В бекенде Shop-Script откройте раздел «Витрина → Оформление» и выберите тему дизайна «Фейсбук».
Вставьте скопированный идентификатор приложения в настройки темы дизайна и сохраните их.
д. Публикация приложения для всех пользователей соцсети
Вернитесь на страницу с настройками приложения, откройте раздел «Настройки → Основное» и вставьте URL страницы с условиями политики конфиденциальности в поле «URL-адрес политики конфиденциальности». Содержимое этой страницы на своём сайте можно составить по образцу в этой статье. Сохраните настройки приложения.
Перейдите в раздел «Проверка приложения».
Переведите переключатель публичной доступности в положение «Да».
Выберите категорию для своего приложения — например, «Покупки».
Подтвердите свой выбор кнопкой.
Дождитесь проверки приложения модераторами соцсети.
Готово!
Вы создали свой интернет-магазин в «Фейсбуке» с помощью Shop-Script. Витрина с товарами доступна на странице магазина в виде отдельной вкладки, и на ней можно принимать заказы от посетителей социальной сети.
Можно подключить и другие приложения Вебасиста к витрине интернет-магазина в «Фейсбуке», это описано ниже.
Интеграция других приложений Вебасиста
Темы дизайна, адаптированные для «Фейсбука», доступны и для других приложений: «Сайт», «Блог», «Фото». Благодаря этому можно добавить на специальную витрину магазина дополнительные вкладки: «О компании», «Наш блог», «Фотоальбом» и т. п.
Для этого в разделе «Структура» приложения «Сайт» создайте отдельные правила для соответствующих приложений: «Сайта», «Блога», «Фото». В свойствах этих поселений выберите тему дизайна «Фейсбук» и включите свойство «Скрытое поселение» — так же, как и для специальной витрины магазина.
В редакторе дизайна в шаблоне index.html этой темы дизайна сформируйте список вкладок по примеру:
{$fb_tabs = [
[
'url' => '/facebook/',
'name' => 'Магазин'
]
,
[
'url' => '/facebook/site/',
'name' => 'О компании'
]
,
[
'url' => '/facebook/blog/',
'name' => 'Наш блог'
]
]}
В элементах url пишите адреса поселений, созданных в приложении «Сайт», без символа * в конце.
Для элементов name пишите любые нужные вам заголовки.
Вот так выглядит Фейсбук-витрина со вкладками, добавленными в этом примере:
Образец условий конфиденциальности
Настоящая политика обработки персональных данных (далее «Политика») устанавливает правила обработки персональной информации, которая может быть получена от пользователя (далее «Пользователь») данного приложения (далее «Приложение»). Приложение предоставляется [НАЗВАНИЕ КОМПАНИИ] (далее «Автор»). Интернет-сайт Автора — www.domain.ru. Использование или любой иной доступ к Приложению означают согласие Пользователя с положениями Политики.
1. Получение персональных данных от Пользователя
Приложение предназначено для получения заказов Автором от Пользователя и обработки их Автором. Формирование заказа Пользователем включает в себя обязательную передачу персональных данных Пользователя Автору, которые необходимы для нормальной работы Приложения. Эти персональные данные именуются «Базовыми персональными данными».
Помимо этого, функциональность Приложения допускает возможность добровольной передачи Пользователем Автору по собственной инициативе других своих персональных данных (далее «Дополнительные персональные данные»). Политика распространяется только на Базовые персональные данные и не распространяется на Дополнительные персональные данные. Далее в тексте Политики подразумеваются только Базовые персональные данные, если явно не указано иное.
Автор получает от Пользователя следующие персональные данные:
- полное или неполное имя получателя заказа,
- адрес доставки заказа,
- [адрес лица, оплачивающего заказ],
- [перечислите другие поля контактной информации, которые запрашиваются при оформлении заказа в вашем интернет-магазине].
2. Использование персональных данных
Персональные данные Пользователя используются Автором для идентификации Пользователя в интерфейсе Приложения сотрудниками Автора, для отправки заказанных товаров Пользователю и для автоматического формирования персонализированных обращений Автора к Пользователю.
3. Передача персональных данных третьим лицам
Автор обязуется тщательно охранять и не передавать персональные данные Пользователя третьим лицам за исключением следующих случаев:
- Передача или публикация персональных данных по требованию законодательства [НАЗВАНИЕ СТРАНЫ].
- Передача персональных данных другому юридическому лицу в случае прекращения деловой деятельности Автора, связанной с поддержанием работоспособности Приложения.
- Передача персональных данных после получения предварительного согласия на это от Пользователя по электронной почте или через личный кабинет Пользователя на интернет-сайте Автора www.domain.ru.
4. Урегулирование споров
Разногласия между Пользователем и Автором, связанные с обработкой Автором персональных данных Пользователя при использовании Приложения, регулируются положениями Политики и законодательством [НАЗВАНИЕ СТРАНЫ].
5. Ограничение возраста
Пользователь имеет право самостоятельно пользоваться Приложением, только если он достиг возраста 18 лет. Несовершеннолетние пользователи могут пользоваться Приложением только с согласия официальных опекунов.
6. Внесение изменение в Политику
Автор может вносить изменения в Политику в любое время без предварительного уведомления Пользователя. В случае внесения изменений в Политику Автор обязуется уведомить Пользователя о внесенных изменениях путем публикации информации об этом на своем интернет-сайте www.domain.ru или путем отправки email-уведомления Пользователю. Действия Автора и Пользователя регулируются измененным текстом Политики начиная с момента публикации или отправки уведомления Пользователю Автором о внесенных изменениях.
7. Поддержка Пользователя
Автор обязуется дать квалифицированный ответ без необоснованного промедления на каждое обращение Пользователя, касающееся обработки его персональных данных при использовании Приложения. Такие обращения Пользователь должен отправлять Автору через свой личный кабинет на сайте Автора www.domain.ru.
23 комментария
Добрый день! Все-таки не понятно как после всего этого процесса встроить магазин в страницу?
"После создания основной Facebook-страницы разместите на ней вкладку (tab), которая позволит открыть витрину магазина внутри соцсети в виде Facebook-приложения."
Как эту вкладку tab разместить?
И еще, если нет сертификата SSL, то это все сделать невозможно? У меня страница открывается в браузере, но с ошибками. На ней нет этой вкладки "магазин", которую я создавала.
SSL-сертификат для создания приложения в Facebook обязателен.
Поясните, пожалуйста, на примере, что вставлять в эту строку:
https://www.facebook.com/dialog/pagetab?app_id=APP_ID&redirect_uri=CANVAS_URL
Идентификатор вашего приложения и значение из поля Secure Host URL (видимо, Facebook переименовали Canvas URL в Secure Host URL).
Добрый день! Спасибо большое за коррекцию, очень помогло!
Я все установила. Но теперь проблема такая. На вкладке "магазин" вместо товаров такая надпись:
404. Товар не найденЗапрашиваемый ресурс недоступен.
Товары видны только при переходе в отдельные категории, название которых расположено сверху. Что сделать, чтобы все товары можно было посмотреть на одной странице, а при желании перейти в категории, как на сайте?
Спасибо!
Убедитесь, что у вас нет ошибок в настройке маршрутизации как описано в этой статье:
https://www.webasyst.ru/forum/4071/oshibki-v-nastroyke-marshrutizatsii/
Спасибо! На самом деле не хватало / в правиле маршрутизации для магазина в ФБ. Я добавила, но ничего не поменялось. В чем еще может быть причина?
поясните, пожалуйста, я правильно понимаю, что если у меня в облаке webasyst 2 витрины - на моем домене и ***.host.webasyst.com, то я могу на вебасистовскую витрину установить тему Facebook и сделать магазин для своей страницы Фейсбука
Да, это возможно, и об этом явно написано в тексте статьи.
Все равно для подключения платежной системы понадобилось покупать SSL-сертификат... Спасибо за такую подробную и полезную статью - все получилось настроить с первого раза!
Спасибо за ответ. По поводу ssl сертификата вопрос. Подойдет любой? Сертификат по типу проверка домена подойдет? Типа такого SSL-сертификат GeoTrust RapidSSL
Да. Самоподписанные врядли, а для подтверждения домена подойдет.
Добрый. Подскажите, как правильно сделать?
Пользуюсь облаком вебасист. Подключил свой домен. Сейчас по факту - один сайт с моим доменом, который так же доступен по технологическому домену облака.
Необходимо подключить приложения фейсбук и вконтакте. Созданное правило для сайта на моем домене не работает на технологическом домене (sХХХХХХ-ХХХ.host.webasyst.com).
Надо создавать отдельный сайт для своего домена, а тот, что создан сейчас оставить на домене облака? и в этом случае подключить приложения?
Так и не понял про SSL для оплаты в приложениях. Этот сертификат подойдет? ведь для эквайринга регистрируется домен (в данном случае основной) сайта, или я не правильно понимаю?
Для приложения в соцсети нужно создать отдельную витрину, которая должна быть доступна по HTTPS. На каком именно домене эта витрина будет работать, неважно: хоть на вашем собственном, хоть на техническом домене облачного аккаунта.
SSL-сертификат нужно только для того, чтобы браузер не ругался на попытку отобразить небезопасное содержимое на защищённой странице (потому что соцсеть всегда открывается через HTTPS). Поэтому скорее всего подойдёт любой сертификат. Но если вы сомневаетесь, можете уточнить это в службе поддержки соцсети.
Всё работает, но возникает такая проблема:
Если длинная главная страница, кликаем на товар и переходим на его страницу. Т.к. перезагрузки страницы не происходит, оказываемся на несколько экранов ниже содержимого страницы. Как-то можно попадать на верх окна? Клиент кликает, видит пустую страницу, разворачивается и уходит.
При попытке задать в настройках приложения фиксированную высоту окна - ничего не меняется в отображении.
Скорее всего, для этого потребуется доработка JavaScript-кода темы дизайна. Сообщил разработчикам об этой проблеме, чтобы исправили. Если решение нужно более срочно, задайте свой вопрос в общем хабе поддержки, пожалуйста, или обратитесь за платной помощью к нашим партнёрам.
На первом шаге "Создание отдельной витрины с оформлением в стиле «Фейсбука» в бекенде Shop-Script." в выборе темы оформления только Дефолт 3.0 ((
?
Установите тему "Фейсбук" для Shop-Script. После этого тема появится в списке.
Подскажите для добавления магазина на facebook нужно покупать еще одну лицензию ShopScript? или основной магазин может работать со своей темой (например prostore) а магазин на facebook будет "зеркалом"?
Для добавления магазина на "Фейсбук" достаточно имеющейся лицензии или арендованной лицензии в облаке Webasyst. В структуре существующего сайта добавьте витрину с темой дизайна соцсети и выполните остальные пункты инструкции.
Выдаёт, вот такие ошибки на стадии «Добавить Страницу в закладки».
Что это может быть?
API Error Code: 2069016
API Error Description: Custom tab feature is restricted to use for selected pages and apps only. We require page fans>2000.
Error Message: Access denied
Похоже, что это ограничение соцсети. Попробуйте уточнить это в их службе поддержки.
Кто-нибудь смог решить вопрос 2k подписчиков? Или нужно делать накрутку?