Использование примера приложения React с исходным кодом
Начнем с обзора приложения, которое мы собираемся создать. Мы будем использовать React и Facebook Graph API, чтобы создать веб-приложение для публикации контента на странице Facebook.
Исходный код: https://github.com/pixochi/fb-page-posts-integration
Последняя версия приложения React позволяет:
- войти в свою учетную запись Facebook
- публиковать посты на своей странице в Facebook
1. Схема размещения на странице Facebook.
Мы должны выполнить следующие шаги, прежде чем контент можно будет опубликовать на вашей странице Facebook. Позже каждый шаг будет подробно показан на примере кода.
2. Зарегистрируйте свое приложение в Facebook для разработчиков.
Прежде чем вы сможете интегрировать вход в Facebook и публикацию контента в приложении React, вам необходимо настроить свое приложение в Facebook для разработчиков.
Как включить вход в Facebook
- Перейдите на https://developers.facebook.com/ и войдите в свою учетную запись Facebook.
- Перейдите в «Мои приложения» (правый верхний угол) и нажмите «Добавить новое приложение».
- Следуйте инструкциям на экране
- Как только ваше приложение будет зарегистрировано, вы будете перенаправлены на страницу с продуктами Facebook. Найдите «Вход в Facebook», нажмите «Настроить» и следуйте инструкциям на экране.
Как разрешить публикацию на странице
- Перейдите на https://developers.facebook.com/tools/explorer/
- Создайте токен доступа к странице для своего приложения, как показано на рисунке ниже.
3. Теперь ваше приложение готово к интеграции с Facebook 🎉
3. Создайте свое приложение React.
- Мы настроим приложение с помощью Create React App, выполнив всего одну команду:
npx create-react-app fb-page-integration
2. Facebook требует, чтобы клиенты использовали HTTPS с Graph API. Мы можем включить его локально, изменив сценарий «start» в package.json.
"start": "HTTPS=true react-scripts start",
3. Затем мы должны внедрить Facebook SDK в наше приложение. Мы можем создать для этого перехватчик React и использовать его в сгенерированном App.js.
4. Для простоты примера весь процесс публикации на вашей странице в Facebook находится в одном файле - App.js.
Последовательность действий, показанная в приведенном ниже коде:
- инициализируется Facebook SDK
- пользователь входит в систему и мы получаем токен доступа пользователя
- токен доступа пользователя используется для получения токена доступа к странице
- пост можно опубликовать с токеном доступа к странице 🎉
Вопросы и ответы
Если что-то не работает должным образом или требуется дополнительная информация, просто оставьте комментарий ниже :)
