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

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

Shop-Script 5 и Facebook

Настройка состоит из 2 шагов:

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

1. Cоздание Facebook-витрины в бекенде Shop-Script

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

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



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

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

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

Войдите в свой аккаунт в «Фейсбуке».

Откройте страницу https://developers.facebook.com/docs/apps/register. На этой странице расширьте статус своего аккаунта до статуса разработчика.

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

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

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

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

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

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

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

б. Создание Facebook-приложения

  1. Перейдите в раздел для разработчиков: https://developers.facebook.com/apps/.
  2. Щелкните по кнопке «Добавьте новое приложение».

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

  4. На открывшейся странице перейдите в раздел «Панель» и щелкните по кнопке «Выберите платформу».

  5. Выберите платформу «Холст Facebook».

  6. Прокрутите открывшуюся страницу до заголовка «Where is your app hosted?».





    — В поле «Facebook Web Games Page» напишите латинскими буквами любой идентификатор для своего Facebook-приложения, который будет частью URL приложения. Он нигде не будет виден — напишите любой адрес.
    — В поле «Secure Host URL» вставьте URL Facebook-витрины, которую вы создали в своем Webasyst-аккаунта, например, mydomain.ru/facebook/ или myaccount.webasyst.cloud/facebook/.

    Важно, чтобы указанный вами URL Facebook-витрины был доступен по протоколу HTTPS.
    Если вы настроили Facebook-витрину в облаке Webasyst по адресу вида myaccount.webasyst.cloud/facebook/, то Facebook-витрина будет сразу работать по защищенному протоколу.
    Если вы настроили Facebook-витрину на собственном доменном имени (в облаке Webasyst либо на другом хостинге/сервере), то для работы витрины по протоколу HTTPS необходимо приобрести и установить SSL-сертификат для доменного имени магазина.
  7. Следуйте подсказкам интерфейса.

  8. Откройте в браузере свое Facebook-приложение с помощью кнопки «Open Your App», чтобы проверить, как ваша Facebook-витрина отображается в интерфейсе соцсети.

  9. Скопируйте числовой идентификатор Facebook-приложения из адресной строки браузера. Он понадобится для дальнейшей настройки.

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

  1. Откройте страницу со списком Facebook-приложений и щелкните по названию созданного приложения.

  2. Откройте раздел «Настройки» и щелкните внизу «Добавить платформу».

  3. Выберите вариант «Вкладка Страницы».



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

  4. Сохраните изменения.
  5. В отдельной вкладке браузера введите в адресной строке следующий URL:
    https://www.facebook.com/dialog/pagetab?app_id=APP_ID&redirect_uri=SECURE_PAGE_TAB_URL    
    Вместо фрагментов APP_ID и SECURE_PAGE_TAB_URL вставьте значения: числовой идентификатор вашего Facebook-приложения и URL Facebook-витрины с указанием HTTPS-протокола.
  6. На открывшейся странице выберите название Facebook-страницы приложения из списка Страницы Facebook и нажмите на кнопку «Добавить Страницу в закладки».



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

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

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

Откройте страницу со списком Facebook-приложений https://developers.facebook.com/apps/. На этой странице откройте информацию о своем приложении.

Скопируйте идентификатор приложения (App ID) и вставьте его в соответствующее поле настроек темы дизайна «Фейсбук» в бекенде Shop-Script в разделе «Магазин → Витрина → Дизайн → Оформление». Сохраните настройки темы дизайна.

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

На странице редактирования Facebook-приложения перейдите в раздел «Настройки» и укажите свой контактный email-адрес в поле «Эл. адрес для связи».

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

Готово!

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

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

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

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

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

В редакторе дизайна в шаблоне index.html этой темы дизайна сформируйте список вкладок по примеру:

{$fb_tabs = [
  [
      'url' => '/facebook/',
      'name' => 'Магазин'
  ]
  ,
  [
'url' => '/facebook/site/',
      'name' => 'О компании'
  ]
  ,
  [
      'url' => '/facebook/blog/',
      'name' => 'Наш блог'
  ]
]}

В элементах url пишите адреса поселений, созданных в приложении «Сайт», без символа * в конце.
Для элементов name пишите любые нужные вам заголовки.

Вот так выглядит Facebook-витрина со вкладками, добавленными в этом примере:

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

  • +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
            Андрей Андрей 27 ноября 2016 02:58 #
            Здравствуйте. Создал свой магазин в фейсбуке.

            Но при входе с мобильного приложения пишет ошибку и не открывается по ссылке.

            Такая-же картина в вконтакте. Пишет application is cannot support mobile version

            • +1
              Михаил Ушенин Михаил Ушенин Webasyst 28 ноября 2016 10:23 #

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

              • +1
                loony loony 14 октября 2017 00:11 #

                действительно, не работает. и ваш тестовый тоже не работает!

                https://m.facebook.com/Webasyst.RU/app/151001141757336/

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

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

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

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


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

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

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

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

                  ?

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

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