Как установить виджет Instagram на свой сайт?

Как установить виджет instagram (принадлежат компании Meta, признанной экстремистской организацией и запрещенной в России) на свой сайт? Почему-то готового решения для внедрения от разработчиком социальной сети нет. Но это не повод отчаиваться – у instagram-а открыт API, поэтому можно написать своё маленькое приложение. Ну или просто использовать уже готовое, добрыми людьми подготовленное!


Готовых решение много, но далеко не все работают напрямую с instagram, минуя посредников в виде третьих сайтов. Для серьёзного проекта ставить виджет “уводящих” пользователей на другие сайты – не лучшее решение, но требующее определенных навыков и времени. Если вы этого не боитесь, то для вас подойдёт виджет inwidget.ru.

Если же вам покажется настройка “прямого” виджета от inwidget.ru слишком сложной задачей, то можно воспользоваться самым простым решением – stapico.ru/instagram-widget. Тут вам не надо будет получать токен, скачивать файлы на хостинг и т.д. Достаточно настроить отображение виджета и вставить код в нужно место шаблона сайта. Но повторю, такой виджет будет иметь “прослойку” между вашим сайтом и инстаграмом в виде сайта stapico.ru.

Настройка прямого виджета от inwidget.ru

Основная проблема – это получить TOKEN, вы можете его получать самостоятельно, вот таким путём:

  1. Регистрируемся на https://www.instagram.com/developer/. Жмем кнопку “Регистрация твоего приложения”.
    instagram2
  2. Как заполнять поля вроде как непринципиально. Я пошел по пути наименьшего сопротивления и ничего придумывать не стал
    instagram3

Дальше начинаются танцы с бубном (не очень понимаю, почему это делается через такие ухищрения):

Сформируйте вот такой URL: https://instagram.com/oauth/authorize/?client_id=[Client ID]&redirect_uri=[адрес сайта]&response_type=token – где [Client ID] выданный Client ID, [адрес сайта] – это ваш адрес сайта. Перед прохождением по ссылки автоматизируйтесь в Instagram. В строке браузера будет информация:
http://[адрес сайта]/#access_token=183494706.ddbf7558cc6e457481777333df6bc0f3 (это и есть ваш ID TOKEN).

На этом трудности все заканчиваются, дальше всё элементарно – скачиваем папку себе на сервер, устанавливаем права на папку, правим конфигурацию (ID TOKEN нужно получать из того аккаунта, фото которого хотите получать) и вставляем html-код себе на сайт.

У меня все действия заняли 10-15 минут. Что получаем на выходе? Аккуратный виджет, со ссылками напрямую на социальную сеть, с миниатюрами фотографий, счетчиками подписчиков и т.д. Осталось подогнать его внешний вид под дизайн сайта.

instagram4

Всё ещё остались вопросы?

Создатель виджета выпустил обучающее видео

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (2 оценок, среднее: 5,00 из 5)
Загрузка...
logo