Как создать интернет-магазин в Facebook с помощью Shop-Script

Для Shop-Script можно создать витрину интернет-магазина в «Фейсбуке». Витрина получится с таким же оформлением, что и стандартные страницы «Фейсбука», чтобы посетители воспринимали ее как часть социальной сети.

Shop-Script 5 и Facebook

Кратко о том, что нужно сделать:

  1. Создать в Shop-Script отдельную витрину с оформлением в стиле «Фейсбука».
  2. Создать приложение в аккаунте «Фейсбука».

1. Cоздание витрины для «Фейсбука» в бекенде Shop-Script

Для подключения интернет-магазина к «Фейсбуку» обязательно нужен SSL-сертификат для доменного имени, на котором работает витрина Shop-Script.

Пользователям облака Webasyst SSL-сертификат предоставляется бесплатно для стандартных доменов ***.webasyst.cloud и ***.host.webasyst.com — на таком стандартном домене можно создать полноценную онлайн-витрину в «Фейсбуке» без регистрации собственного доменного имени.
  1. Зарегистрируйтесь в облаке Webasyst или установите фреймворк Webasyst и Shop-Script согласно инструкции.
  2. Войдите в бекенд Webasyst и в приложении «Инсталлер» установите тему дизайна «Фейсбук».
  3. В приложении «Сайт» перейдите в раздел «Структура» и добавьте новое правило маршрутизации для приложения «Магазин». Для этого правила впишите адрес facebook/* и выберите тему дизайна «Фейсбук».



    Можно указать и другой адрес для Фейсбук-витрины, если руководствоваться рекомендациями.
  4. Включите флажок «Скрытое поселение», выберите другие параметры и сохраните изменения.
  5. В приложении «Магазин» в разделе «Витрина → Страницы» для созданной Фейсбук-витрины добавьте информационную страницу с условиями политики конфиденциальности для пользователей соцсети. Скопируйте URL страницы — он понадобится для публикации Фейсбук-приложения для всех пользователей соцсети.

Для проверки откройте в браузере адрес Facebook-витрины в браузере. Ее оформление должно соответствовать оформлению соцсети.

2. Настройка Фейсбук-приложения

Зарегистрируйтесь или войдите в «Фейсбук».

Откройте страницу создания приложения для «Фейсбука». Расширьте статус своего аккаунта до статуса разработчика.

Создайте Фейсбук-страницу и Фейсбук-приложение для своего магазина.

а. Создание Фейсбук-страницы магазина

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

https://www.facebook.com/Webasyst.RU
https://www.facebook.com/Google
https://www.facebook.com/MegaPodarki (Facebook-витрина магазина на вкладке основной страницы, созданная с помощью Shop-Script)

Откройте раздел «Создать страницу». Выберите подходящий тип страницы (например, «Компания, организация или учреждение») и следуйте подсказкам интерфейса.

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

Вкладка будет открывать Facebook-приложение с витриной интернет-магазина.

б. Создание Фейсбук-приложения

  1. Перейдите в раздел управления приложениями для разработчиков.
  2. Щелкните по кнопке «Добавьте новое приложение».

  3. Напишите любое название приложения — например, своего название интернет-магазина. Выберите категорию приложения, например, «Покупки». Щелкните по кнопке «Создайте ID приложения».

  4. Перейдите в раздел «Настройки → Основное».

    В поле «URL-адрес политики безопасности» вставьте адрес страницы с политикой безопасности для пользователей «Фейсбука». Это обязательное требование соцсети, чтобы опубликовать приложение для всех пользователей.

    Щелкните по кнопке «Добавить платформу».

  5. Выберите «Веб-игры на Facebook».

  6. На странице настроек приложения добавится новый блок полей «Веб-игры на Facebook».

    В поле «URL веб-игр на Facebook (https)» вставьте URL Фейсбук-витрины, созданной в бекенде Webasyst, — с указанием протокола https://.




    Сохраните настройки.
  7. Скопируйте ID приложения вверху страницы. Он понадобится для дальнейшей настройки.

в. Добавление вкладки магазина на основную Фейсбук-страницу

  1. На странице настроек Фейсбук-приложения в разделе «Настройки → Основное» щелкните внизу «Добавить платформу».
  2. Выберите вариант «Вкладка Страницы».



    Заполните значения:
    Безопасный URL-адрес вкладки Страницы: скопируйте сюда URL Фейсбук-витрины, настроенной в вашем Webasyst-аккаунте, с указанием HTTPS-протокола.
    Название вкладки Страницы: любой текстовый заголовок, который должен отображаться на вкладке, например: «Магазин». Покупатели будут щелкать по этой вкладке на основной Фейсбук-странице магазина, чтобы открыть онлайн-витрину и перейти к покупкам.



    Сохраните изменения.
  3. В отдельной вкладке браузера введите в адресной строке следующий URL:

    https://www.facebook.com/dialog/pagetab?app_id=APP_ID&redirect_uri=SECURE_PAGE_TAB_URL
        
    Вместо APP_ID и SECURE_PAGE_TAB_URL вставьте значения:

    APP_ID: числовой идентификатор вашего Facebook-приложения
    SECURE_PAGE_TAB_URL: URL Facebook-витрины с указанием HTTPS-протокола

    Пример:

    https://www.facebook.com/dialog/pagetab?app_id=1234567890&redirect_uri=https://mydomain.ru/facebook/
        
  4. На открывшейся странице выберите название Facebook-страницы приложения из списка Страницы Facebook и нажмите на кнопку «Добавить Страницу в закладки».



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

Вот так может выглядеть вкладка приложения на основной Фейсбук-странице магазина:

г. Подключение темы дизайна к Фейсбук-приложению

В бекенде Shop-Script откройте раздел «Витрина → Оформление» и выберите тему дизайна «Фейсбук».

Вставьте скопированный идентификатор приложения в настройки темы дизайна и сохраните их.


д. Публикация приложения для всех пользователей соцсети

Вернитесь на страницу с настройками приложения, откройте раздел «Настройки → Основное» и вставьте URL страницы с условиями политики конфиденциальности в поле «URL-адрес политики конфиденциальности». Содержимое этой страницы на своём сайте можно составить по образцу в этой статье. Сохраните настройки приложения.

На странице редактирования Фейсбук-приложения перейдите в раздел «Проверка приложения».

Переведите переключатель публичной доступности в положение «Да».

Выберите категорию для своего приложения — например, «Покупки».

Подтвердите свой выбор кнопкой.

Готово!

Вы создали свой интернет-магазин в «Фейсбуке» с помощью Shop-Script. Витрина магазина доступна на его основной Фейсбук-странице в виде отдельной вкладки, и в нем уже можно принимать заказы от посетителей социальной сети.

Вы можете также подключить и другие приложения Вебасиста к витрине интернет-магазина в «Фейсбуке», это описано ниже.

Интеграция других приложений Вебасиста

Темы дизайна, адаптированные для «Фейсбука», доступны и для других приложений: «Сайт», «Блог», «Фото». Благодаря этому можно добавить на Facebook-витрину магазина дополнительные вкладки: «О компании», «Наш блог», «Фотоальбом» и т. п.

Для этого в разделе «Структура» приложения «Сайт» создайте отдельные скрытые поселения для соответствующих приложений: «Сайта», «Блога», «Фото». В свойствах этих поселений также выберите тему дизайна «Фейсбук».

В редакторе дизайна в шаблоне 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.

33 комментария

  • +1
    Елена Новикова Елена Новикова 9 января 2015 15:55 #

    Вопрос - использование Shop-Script 5 для целей, указанных в статье, является платным?

  • +1
    Дмитрий Лизунов Дмитрий Лизунов 21 января 2015 15:26 #

    Та же беда : Приложение неправильно настроено....не было одобрено для показа... Статус приложения включил.

    В чем еще может быть причина?


  • +1
    Дмитрий Лизунов Дмитрий Лизунов 21 января 2015 15:26 #

    Та же беда : Приложение неправильно настроено....не было одобрено для показа... Статус приложения включил.

    В чем еще может быть причина?


  • +1
    Наталья Цыганова Наталья Цыганова 2 июля 2015 05:20 #

    Добрый день! Все-таки не понятно как после всего этого процесса встроить магазин в страницу?

    "После создания основной Facebook-страницы разместите на ней вкладку (tab), которая позволит открыть витрину магазина внутри соцсети в виде Facebook-приложения."

    Как эту вкладку tab разместить?

    И еще, если нет сертификата SSL, то это все сделать невозможно? У меня страница открывается в браузере, но с ошибками. На ней нет этой вкладки "магазин", которую я создавала.

  • +1
    Наталья Цыганова Наталья Цыганова 2 июля 2015 05:59 #

    Поясните, пожалуйста, на примере, что вставлять в эту строку:

    https://www.facebook.com/dialog/pagetab?app_id=APP_ID&redirect_uri=CANVAS_URL

    • +1

      Идентификатор вашего приложения и значение из поля Secure Host URL (видимо, Facebook переименовали Canvas URL в Secure Host URL).

    • +1
      Наталья Цыганова Наталья Цыганова 4 июля 2015 03:48 #

      Добрый день! Спасибо большое за коррекцию, очень помогло!

      Я все установила. Но теперь проблема такая. На вкладке "магазин" вместо товаров такая надпись:

      404. Товар не найден

      Запрашиваемый ресурс недоступен.

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

      Спасибо!

      • +1
        Николай Николай Webasyst 6 июля 2015 15:02 #

        Убедитесь, что у вас нет ошибок в настройке маршрутизации как описано в этой статье:
        https://www.webasyst.ru/forum/4071/oshibki-v-nastroyke-marshrutizatsii/

        • +1
          Наталья Цыганова Наталья Цыганова 7 июля 2015 03:08 #

          Спасибо! На самом деле не хватало / в правиле маршрутизации для магазина в ФБ. Я добавила, но ничего не поменялось. В чем еще может быть причина?

        • +1
          Алиса Баталыгина Алиса Баталыгина 7 ноября 2015 14:04 #

          поясните, пожалуйста, я правильно понимаю, что если у меня в облаке webasyst 2 витрины - на моем домене и ***.host.webasyst.com, то я могу на вебасистовскую витрину установить тему Facebook и сделать магазин для своей страницы Фейсбука

        • +1
          Алиса Баталыгина Алиса Баталыгина 16 ноября 2015 09:13 #

          Все равно для подключения платежной системы понадобилось покупать SSL-сертификат... Спасибо за такую подробную и полезную статью - все получилось настроить с первого раза!

        • +1
          Михаил Иванов Михаил Иванов 24 ноября 2015 14:18 #

          Спасибо за ответ. По поводу ssl сертификата вопрос. Подойдет любой? Сертификат по типу проверка домена подойдет? Типа такого SSL-сертификат GeoTrust RapidSSL

        • +1
          Andrew Krasnoperov Andrew Krasnoperov 19 февраля 2016 03:50 #

          Добрый день. Последний пункт "Интеграция других приложений Вебасиста"

          в видео не показан... можно более подробно? не могу в тексте разобраться...

        • +1
          Дмитрий Волотович Дмитрий Волотович 19 июня 2016 22:21 #

          Добрый. Подскажите, как правильно сделать?

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

          Необходимо подключить приложения фейсбук и вконтакте. Созданное правило для сайта на моем домене не работает на технологическом домене (sХХХХХХ-ХХХ.host.webasyst.com).

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

          Так и не понял про SSL для оплаты в приложениях. Этот сертификат подойдет? ведь для эквайринга регистрируется домен (в данном случае основной) сайта, или я не правильно понимаю?


          • +1
            Михаил Ушенин Михаил Ушенин Webasyst 10 марта 2017 14:44 #
            Надо создавать отдельный сайт для своего домена, а тот, что создан сейчас оставить на домене облака? и в этом случае подключить приложения?

            Для приложения в соцсети нужно создать отдельную витрину, которая должна быть доступна по HTTPS. На каком именно домене эта витрина будет работать, неважно: хоть на вашем собственном, хоть на техническом домене облачного аккаунта.

            Так и не понял про SSL для оплаты в приложениях. Этот сертификат подойдет? ведь для эквайринга регистрируется домен (в данном случае основной) сайта, или я не правильно понимаю?

            SSL-сертификат нужно только для того, чтобы браузер не ругался на попытку отобразить небезопасное содержимое на защищённой странице (потому что соцсеть всегда открывается через HTTPS). Поэтому скорее всего подойдёт любой сертификат. Но если вы сомневаетесь, можете уточнить это в службе поддержки соцсети.

          • +1
            loony loony 5 октября 2017 15:27 #

            Всё работает, но возникает такая проблема:

            Если длинная главная страница, кликаем на товар и переходим на его страницу. Т.к. перезагрузки страницы не происходит, оказываемся на несколько экранов ниже содержимого страницы. Как-то можно попадать на верх окна? Клиент кликает, видит пустую страницу, разворачивается и уходит.

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


            • +1
              Михаил Ушенин Михаил Ушенин Webasyst 9 октября 2017 12:24 #

              Скорее всего, для этого потребуется доработка JavaScript-кода темы дизайна. Сообщил разработчикам об этой проблеме, чтобы исправили. Если решение нужно более срочно, задайте свой вопрос в общем хабе поддержки, пожалуйста, или обратитесь за платной помощью к нашим партнёрам.

            • +1
              Влад Иванов Влад Иванов 11 ноября 2017 16:12 #

              На первом шаге "Создание отдельной витрины с оформлением в стиле «Фейсбука» в бекенде Shop-Script." в выборе темы оформления только Дефолт 3.0 ((

              ?

            • +1
              Королева Анна queenanna.ru Королева Анна queenanna.ru 11 декабря 2017 19:48 #

              спасибо за столь увлекательное приключение! :)

              потратил пару часов,
              ВСЕ ПОЛУЧИЛОСЬ!
              магаз отлично интегрировался в страницу компании.

              еще раз спасибо, друзья!

              вот что получилось
              https://www.facebook.com/queenanna.ru/app/82177791...

            • +1
              This is Dutch FB This is Dutch FB 12 декабря 2017 04:28 #

              ДОбрый день.

              У меня шапка на английском. Что делать? Может это так и должно быть?

            • +1
              This is Dutch FB This is Dutch FB 12 декабря 2017 18:38 #

              При попытке интегрировать витрину Facebook закрывает все создаваемые аккаунты. Ну и само собой ничего не получается - при создании приложения такой опции, как холст, не выдается. Помогите. Бьюсь уже сутки, силы на исходе.

              • +1
                This is Dutch FB This is Dutch FB 14 декабря 2017 02:07 #

                Справилась. Для таких же ОЧЕНЬ далеких от программирования пользователей, огромная просьба подправить письменную инструкцию по интеграции выше. Там очень много лишней информации и лишних шагов, которые не нужны и невозможны (вероятно, в связи со сменой версии API). К примеру, такой шаг, как выбор продукта Facebook холст невозможен, пункты 5-8 не работают. Потеряла на этом очень много времени.

              • +1
                Ansi_mobile@ukr.net Ansi_mobile@ukr.net 23 января 2018 19:39 #

                Подскажите для добавления магазина на facebook нужно покупать еще одну лицензию ShopScript? или основной магазин может работать со своей темой (например prostore) а магазин на facebook будет "зеркалом"?

                • +1
                  Михаил Ушенин Михаил Ушенин Webasyst 24 января 2018 09:32 #

                  Для добавления магазина на "Фейсбук" достаточно имеющейся лицензии или арендованной лицензии в облаке Webasyst. В структуре существующего сайта добавьте витрину с темой дизайна соцсети и выполните остальные пункты инструкции.

                • +1
                  Aleks Aleks 1 февраля 2018 11:55 #

                  Тема хоть как-то редактируется? Можно ли отключить вывод краткого описания на витрине?

                  Добавить комментарий

                  Чтобы добавить комментарий, зарегистрируйтесь или войдите