Как отображать фотографии из Instagram на вашем сайте

Интерактивный виджет предоставляет простой способ отображать ваши настоящие фотографии из Instagram на вашем сайте WordPress в реальном времени. Мы расскажем вам, как это сделать.

У вас есть профиль в Instagram , который содержит много информации и фотографий. И вы хотите, чтобы посетители вашего сайта видели это. Это вполне реально. В этом случае вам поможет виджет плагина Instagram.

Этот виджет поддерживает два способа отображения фотографий. Первый способ — показать фотографию с определенным тегом. Второй — выбрать опцию «Мои фотографии», тем самым вы сможете вытащить фото из своего аккаунта.

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

Что такое токен доступа к Instagram и как отображать фотографии из Instagram?

Токен доступа к Instagram — это набор символов, которые являются уникальными для вашей учетной записи и позволяют другим приложениям получать доступ к вашей ленте Instagram. Ваш сайт не сможет подключиться к серверам Instagram, если у вас нет токена. Токен предоставляет веб-сайту безопасный способ запросить у Instagram разрешение на доступ к вашему профилю и отображение его изображений.

И, если вы хотите демонстрировать галереи Instagram с возможностью покупки в магазине Shopify, вы можете просто установить приложение от Growave и подключить свой бизнес-аккаунт Facebook.

Как получить мой токен доступа к Instagram?

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

Шаг 1. Создайте приложение Facebook

Для этого вам нужно зайти на developer.facebook.com, выбрать «Мои приложения » и создать приложение. На панели App Dashboard выберите Settings > Basic , прокрутите страницу вниз и нажмите Add Platform .

Затем выберите Веб -сайт, введите URL своего веб-сайта и сохраните изменения. Здесь мы будем использовать веб-сайт, но позже вы сможете изменить платформу.

Шаг 2. Настройте базовый вид Instagram

Итак, нажмите « Продукты », найдите продукт Instagram и нажмите « Настроить» .

Нажмите « Базовый дисплей » , прокрутите страницу вниз и нажмите « Создать новое приложение » .

Заполните форму, как описано ниже.

Отображаемое имя

Введите название приложения Facebook, которое вы только что создали.

Действительные URI для перенаправления OAuth

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

Например https://zemez.io/

После ввода URL-адреса сохраните изменения и проверьте его еще раз. В зависимости от структуры к URL-адресу может автоматически добавляться косая черта. Сохраняйте полный URL: он понадобится вам для получения кодов авторизации и токенов доступа.

Деавторизовать URL-адрес обратного вызова

Введите URL вашего сайта еще раз. Затем вам нужно будет заменить его URL-адресом для обработки уведомлений о деавторизации.

URL обратного вызова запроса на удаление данных

Введите URL вашего сайта еще раз. Затем вам снова нужно будет заменить его соответствующим URL-адресом для обработки запросов на удаление данных.

Обзор приложения

Пока пропускаем, он нам пока не нужен.

Шаг 3. Добавьте тестового пользователя Instagram

Выберите « Роли» > «Роли» и прокрутите до раздела « Тестеры Instagram ». Нажмите « Добавить тестировщиков Instagram », введите свое имя пользователя в Instagram и отправьте приглашение.

Откройте новое окно браузера, перейдите на сайт www.instagram.com и войдите в свою приглашенную учетную запись Instagram. Выберите (значок профиля) > «Редактировать профиль» > «Приложения и сайты» > «Приглашение тестировщика» и примите приглашение.

Теперь ваше приложение Facebook будет иметь доступ к вашей учетной записи Instagram даже в режиме разработки.

Шаг 4. Войдите в систему под тестовым пользователем, чтобы быстро отображать фотографии из Instagram

Создайте приведенный ниже URL-адрес окна авторизации, заменив {app-id} идентификатором вашего приложения Instagram (из панели управления приложения > Продукты > Instagram > Основной дисплей > поле идентификатора приложения Instagram ) и {redirect-uri} URL-адресом вашего веб-сайта, который вы указали в Шаг 2 («Действительные URI перенаправления OAuth»). URL-адрес должен быть точно таким же.

Откройте новое окно браузера и перейдите по полученному URL-адресу окна авторизации. На странице должно отображаться имя пользователя Instagram , название приложения и описание запрашиваемых им разрешений.

Авторизуйте тестового пользователя Instagram (то есть дайте приложению доступ к данным вашего профиля). Для этого войдите в свою учетную запись в окне авторизации и нажмите Авторизоваться . В случае успеха страница перенаправит вас на URI, указанный на предыдущем шаге, добавив код авторизации.

Обратите внимание: в конце URI перенаправления стоят символы #_, но они не входят в код. Скопируйте этот код (без символов #_): он понадобится вам на следующем шаге.

Шаг 5. Обменяйте код на токен

Откройте инструмент командной строки или приложение, которое поддерживает запросы cURL, и отправьте API запрос POST следующим образом:

curl -X POST \ https://api.instagram.com/oauth/access_token \ -F client_id={app-id} \ -F client_secret={app-secret} \ -F grant_type=authorization_code \ -F redirect_uri={ перенаправление-uri} \ -F code={код}

Подставьте идентификатор {app-id} вашего приложения Instagram, вместо {app-secret} — секрет приложения Instagram, вместо {redirect-uri} — URI редиректа, а вместо {code — полученный от нас код }. Обратите внимание: URI перенаправления должен точно совпадать с указанным на предыдущем шаге, вплоть до косой черты в конце (панель приложения могла автоматически добавить его в URI при настройке приложения Instagram).

В случае успеха API вернет закодированный объект JSON с краткосрочным токеном доступа пользователя Instagram, действительным в течение одного часа, и вашим тестовым идентификатором пользователя Instagram.

Шаг 6. Запросите пользовательский узел для отображения фотографий из Instagram

Используя командную строку или приложение, отправьте запрос cURL узлу пользователя, показанному ниже, чтобы получить имя пользователя и идентификатор. Замените {user-id} и {access-token} идентификатором и токеном доступа, полученными на предыдущем шаге, соответственно.

curl -X GET \ 'https://graph.instagram.com/{user-id}?fields=id, username&access_token={access-token}'

В случае успеха API отобразит имя пользователя и идентификатор Instagram.

Шаг 7. Добавьте токен доступа в настройки плагина

Перейдите на панель инструментов WordPress> JetPlugins> Настройки JetElements. Перейдите на вкладку «Интеграция», найдите раздел Instagram и вставьте свой токен в поле «Токен доступа», затем нажмите кнопку «Сохранить».

Готово! Теперь вы можете вернуться в Elementor и использовать виджет Instagram для отображения фотографий из своей учетной записи. Кроме того, чтобы добавить больше функциональности вашему веб-сайту, попробуйте плагин ZeGuten.