How to Add an Instagram Feed to Your Laravel Site
Table of Contents:
- Introduction
- The Problem with the Instagram Feed
- The Retired Endpoint: Instafeed.js
- The New Basic Display API
- The Authentication Process
- The Instagram Token Agent
- The Laravel Instagram Feed Package
- Setting Up the Facebook App
- Installing and Configuring the Laravel Instagram Feed Package
- Creating the Profile Model
- Authorizing the Instagram Account
- Displaying the Instagram Feed
- Setting Up the Laravel Scheduler
- Conclusion
The Instagram Feed: An Easy Solution Turned Complicated
The Instagram feed is a popular feature on websites that allows users to display their Instagram posts directly on their site. However, when faced with a retirement of the endpoint used for this feature, it became clear that the process of switching to the new Basic Display API was not as simple as expected.
Introduction
Hi everyone, I'm Bill and welcome to "Taste the Code." In today's episode, I will show you how to switch the Instagram feed on your website to the new Basic Display API. If you haven't already, be sure to subscribe to my channel, as I have a ton of videos covering topics like coding, electronics, and making. I'm sure you'll find other interesting videos to watch.
The Problem with the Instagram Feed
While writing a blog post for the workshop air filter I made, I noticed that the usual Instagram feed I've placed at the bottom of my website was missing. It had been more than a year since I last touched that part of the site, so I decided to investigate.
The Retired Endpoint: Instafeed.js
Upon inspecting the code, I found that the error was coming from a file called "instafeed.js." I remembered using this library when I built the site. After some further digging, I discovered that the endpoint had been retired, as indicated by a message in the developer tools.
The New Basic Display API
Instagram had made changes to their API, replacing the old version with the Basic Display API. The main difference lies in the authentication process used to access the API. Instead of an API key, the Basic Display API requires using OAuth. This means that a user must log in and authorize the application to access their account.
The Authentication Process
To access my Instagram feed, I had provided an API key to the script. However, with the switch to the Basic Display API, I now needed to obtain an access token through the OAuth process. This access token is required to make API requests, but it expires and needs to be periodically refreshed.
The Instagram Token Agent
Instafeed recommended using an Instagram Token Agent, a separate app that can be run as a service on Heroku for free. This agent would handle the token refreshing and management. However, I found this option to be unnecessary and opted for an alternative solution.
The Laravel Instagram Feed Package
After some research, I came across the Laravel Instagram Feed package. Developed by a marketing agency from Taiwan called Diamantic, this package claimed to handle the OAuth process and provide an easy integration with Laravel.
Setting Up the Facebook App
Before installing and configuring the Laravel Instagram Feed package, we needed to set up a Facebook app. This app would provide us with the necessary app ID and secret key required for the integration.
Installing and Configuring the Laravel Instagram Feed Package
To begin the integration process, we first needed to install the Laravel Instagram Feed package using Composer. This package would handle the communication with the Instagram API and simplify the setup process.
Creating the Profile Model
In order to associate the access tokens with our user account, we needed to create a profile model using a command provided by the package. This model would store the necessary information for accessing the Instagram feed.
Authorizing the Instagram Account
Before we could retrieve the access token, we needed to authorize our Instagram account with the Facebook app. This involved adding our account as a tester for the app and accepting the invitation on Instagram.
Displaying the Instagram Feed
With the integration and authorization complete, we could now display the Instagram feed on our website. We did this by creating a Blade template and populating it with the latest images from our feed.
Setting Up the Laravel Scheduler
To periodically refresh the Instagram feed and access tokens, we added the necessary commands to the Laravel scheduler. This ensured that our Instagram feed would stay up to date and the access tokens would not expire.
Conclusion
In this tutorial, we explored the process of switching to the new Basic Display API for the Instagram feed on our website. While the process may have seemed complex at first, by following the steps outlined in this article, you should be able to successfully integrate the new API and display your Instagram feed without hassle. Remember to reach out in the comments if you encounter any issues, and don't forget to like and share this video with your friends.
