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

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

Shop-Script 5 и Facebook

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

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

1. Cоздание специальной витрины в Shop-Script

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

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




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

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

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

Войдите в «Фейсбук». Если у вас нет аккаунта в этой соцсети, зарегистрируйтесь.

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

а. Создание страницы магазина

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

https://www.facebook.com/Webasyst.RU
https://www.facebook.com/Google

Перейдите к созданию страницы. Выберите тип страницы «Компания или бренд» и нажмите «Начать».

Введите название для страницы и выберите категорию. Введите адрес компании и номер телефона.

Дальше следуйте подсказкам интерфейса. После создания страница вашего магазина может выглядеть примерно так:

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

Чтобы создать вкладку на странице магазина, у страницы должно быть больше 2000 подписчиков. Это требование соцсети.

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

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

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

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

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

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

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

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




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

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

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

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



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



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

    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/
  4. На открывшейся странице выберите название страницы магазина из списка «Страницы 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.

39 комментариев

  • +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 #

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

                • +3
                  cofix cofix Партнер-эксперт 20 августа 2019 11:56 #

                  Всем добра, при попытке интеграции вкладки приложения на страницу, оказалось что нужно иметь не меннее 2000 подписчиков

                  http://prntscr.com/ov068o

                • +2
                  Андрей Попов Андрей Попов 25 августа 2019 01:00 #

                  Выдаёт, вот такие ошибки на стадии «Добавить Страницу в закладки».

                  Что это может быть?

                  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

                • +2
                  Евгений Кузнецов Евгений Кузнецов 26 августа 2019 16:09 #

                  Тоже самое не работает

                  This page does not have permission to install the custom tab.

                  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

                • +1
                  Yeoja.Market Yeoja.Market 8 сентября 2019 23:15 #

                  Кто-нибудь смог решить вопрос 2k подписчиков? Или нужно делать накрутку?

                • +1
                  Ольга Волкова Ольга Волкова 12 сентября 2019 07:08 #

                  Руководство по настройке магазина как Фейсбук так и В контакте, оставляет желать лучшего, не соответствуют многие пункты, разделы меню магазина из 10 только 2 выгрузились, про мобильную версию вообще лучше не пытаться, ошибка от Webasyst #1062. Вывод - нахрен вообще они тогда нужны такие магазины НЕ доделанные!

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

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