С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Настройка интернет-магазина в соц. сети facebook.com

Как установить приложение интернет-магазина в Facebook.

Важно! Для корректной работы приложения требуется наличие защищенного соединения по https для поддомена интернет-магазина fb.домен, если его нет, то его необходимо приобрести и установить на сайт. Подробнее о покупке SSL и установке на сайт можно прочесть тут - http://www.advantshop.net/help/pages/site-ssl

И так, если сертификат готов, можно приступить к созданию приложения или магазина, в соц сети facebook.com

Для настройки нам необходимо будет создать приложение сети facebook, для этого необходимо перейти по адресу developers.facebook.com(рис.1)


Рисунок 1.

Если Вы не авторизованы на странице, то необходимо авторизоваться. Если вы не зарегистрированы как Developer, при создании приложения появится дополнительная форма.

Далее, создаем наше приложение.

В верху страницы справа появляется окно «Мои приложения» (рис.2)


Рисунок 2.

При нажатии на «Мои приложения», открывается окно со списком приложений, и кнопка «Добавить новое приложение»(рис.3).


Рисунок 3.

Открывается форма «Создайте новый ID приложения», в которой нужно заполнить поля и нажать «Создайте ID приложения» (рис.4)


Рисунок 4.

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

Эл.адрес для связи – пишите свой email.

Категория – выбираете необходимую категорию, например, Бизнес.

После того, как создали приложение, открывается окно, где необходимо выбрать тип создаваемого приложения, в нашем случае. Вы выбираете «Вход через Facebook» (рис.5)


Рисунок 5.

Далее, в открывшейся странице нужно включить только 2 настройки «Клиентская авторизация OAuth» , «Веб-авторизация OAuth» и прописать в строке «Действительные URL-адреса для перенаправления OAuth» поддомен https://fb.домен (рис.6)


Рисунок 6.

Нажмите сохранить изменения.

Перейдите на вкладку Настройки, и впишите адрес магазина в соц.сетях (поддомен https://fb.домен) (рис.7)


Рисунок 7.

Далее перейдите на вкладку «Панель» и нажмите «Выберите платформу» (рис.8)


Рисунок 8.

В открывшемся окне нажмите «Facebook Canvas» (рис.9)


Рисунок 9.

Далее откроется страница где по шагам будем настраивать только что созданное приложение. (рис 10)


Рисунок 10.

Шаг 1. Setup SDK

Внизу страницы есть 2 текстовых поля. Это самые главные настройки которые нужно указать.

1) В поле "Canvas Page" укажите условное название магазина для URL адреса приложения. Например: my-site-ru или my-test-super-shop (рис 11). Этот параметр формирует итоговую ссылку на приложение в facebook.

2) В поле "Secure Host URL" нужно указать адрес домена на который покупался SSL сертификат и путь до приложения Facebook в магазине.

Этот путь можно взять из панели администрирования магазина. Для этого перейдите в административную панель, далее, меню "Настройки - Общие", далее вкладка слева "Общие". Нам нужен параметр "URL магазина для facebook.com", так же поставьте галочку в поле активен у параметра "URL магазина для facebook.com" (рис.12).


Рисунок 11.


Рисунок 12.

Для версии 4.0 и ниже, где поддерживается магазин в соц сетях, URL будет вида www.mysite.ru/adv-fb/.

Для версии 4.1 и выше, URL будет вида fb.mysite.ru (рис.12)

Жмем Далее.

Шаг 2. Setup Facebook Login

Тут ничего не нужно. Жмем Далее

Шаг 3. Test

Жмём на кнопку "Open Your App" (рис 13)


Рисунок 13.

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

Если вы видите "серый экран" или вот этот значок, например в браузере Google Chorme (рис 14)


Рисунок 14.

В этом случае нужно проверить верно ли указанна ссылка магазина (на шаге 1) и присутствует ли SSL сертификат у данного URL.

Если всё в порядке, должен открываться Ваш магазин в facebook (рис 15)


Рисунок 15.

Если открылось, значит приложение установлено.


Рисунок 16.

Всё готово.

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.
© AdvantShop. Платформа для открытия интернет-магазина.