Закончив систему постов в этом блоге, я наткнулся на идею проекта в разговоре со своей девушкой. Она упомянула, что ее парикмахер ищет кого-нибудь, кто создаст для нее веб-сайт, и я решил сделать для нее демонстрацию. Вскоре эта дизайнерская идея включала в себя изображения работы стилиста. Простейшей мыслью было импортировать ее ленту из Instagram прямо на веб-сайт через вызов API.
Вскоре я обнаружил, что использовать API Instagram не так просто, как вызывать и использовать данные, как, например, через API github. К счастью, я узнал о библиотеке под названием Instafeedjs, которая описана на их сайте следующим образом:
Насколько это верно, есть еще несколько шагов, чтобы сделать что-либо из Instagram на ваш сайт.
1. Установка
Прежде всего, необходимо установить библиотеку! Если вы не используете менеджер пакетов, просто нажмите Загрузить на их веб-сайте и включите файл в свой проект, чтобы получить доступ к библиотеке Instafeedjs. Это не учебник по NPM, менеджерам пакетов или использованию терминала/командной строки, но я настоятельно рекомендую его, потому что они позволяют вам быстро и легко устанавливать многие вещи в свои проекты. Если вам интересно, вот краткое руководство по Node NPM от learncode.academy.
2. Инстаграм
После установки перейдите в Instagram/developer и авторизуйтесь. После авторизации вы увидите кнопку Register Your Application. Щелкните ее, продолжайте заполнять необходимую информацию, а затем зарегистрируйте свое приложение.
3. Идентификатор клиента
Если вы будете следить за Instafeedjs.com, вы заметите несколько примеров кода, которые очень помогут вам начать работу. Вы также заметите раздел Требования. Одна из первых отмеченных вещей — это ваш идентификатор клиента.
Первое место, которое я нашел в поиске Google, чтобы найти свой идентификатор клиента Instagram (не имя пользователя), — это веб-сайт под названием Smash Balloon. Здесь вы можете перейти к Попробовать демоверсию и просто ввести свое имя пользователя, и он вернет серию чисел, которая является вашим идентификатором клиента Instagram.
Первое место, которое я нашел в поиске Google, чтобы найти свой идентификатор клиента Instagram (не имя пользователя), — это веб-сайт под названием Smash Balloon. Здесь вы можете перейти к Попробовать демоверсию и просто ввести свое имя пользователя, и он вернет серию чисел, которая является вашим идентификатором клиента Instagram.
4. Аутентификация
Как я уже упоминал, последняя часть информации, которая вам нужна для запуска фида на вашем веб-сайте, — это аутентификация вашего запроса. Веб-сайт, который я нашел наиболее полезным для этого, — Pixel Union. Просто нажмите кнопку Создать токен доступа, и вам будет предложено ввести имя пользователя и пароль. (Ознакомьтесь с часто задаваемыми вопросами в нижней части их веб-сайта, чтобы узнать больше о безопасности и о том, к чему имеет доступ Pixel Union при создании вашего токена доступа.) После этого вы получите токен доступа и сможете использовать его в коде JavaScript своего веб-сайта.
5. Напишите код
Возможно, вы уже написали свой код JavaScript (по крайней мере, у меня были проблемы с устранением неполадок). Если вы этого не сделали, вот пример кода из документации Instafeed, касающийся отображения ваших последних 20 изображений:
6. Создайте выходной div
По умолчанию, и если на этом этапе все настроено правильно, Instafeedjs заполнит созданный вами div с идентификатором Instafeed в вашем коде последними 20 сообщениями, связанными с вашей учетной записью. Как я упоминал ранее, если вы хотите что-то изменить, ознакомьтесь с документацией. Я обнаружил, что это очень полезно. Для меня это действие по умолчанию работает для того, что я пытаюсь сделать.
Вот и все! К настоящему времени у вас должны быть последние 20 фотографий, заполняющих ваш веб-сайт! Я надеюсь, что этот урок был информативным и полезным. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать.
Если вам интересен демо-сайт, который я создал, вы можете найти мою ленту в Instagram на вкладке Галерея здесь: jaime-quach.surge.sh.
