Add a Social Component to Headless Sites with an Instagram Feed

Let’s assume that you have a React based website and want to add your Instagram feed to it. Many people and businesses use Instagram as a method of communication, advertising, and a means of promotion for their products or personal brand. If you have a business Instagram account you probably know how helpful it can be for these purposes but it can also bring added benefits if you merge your online presence and your live feed is displayed on your website as well. 

Chances are your website currently exists and you just want to add a little extra to it but if this is a new project just be sure that it is live and has your desired domain name attached. In order to set up your new feed, the published app (site) must first be added to your Facebook developer account, if you don’t have one the sign up process is fairly simple with a Facebook profile, so that you can start acquiring permissions to display your media on your site. Using the Instagram Basic Display API, and a few permissions, you can get a simple feed set up for your site.

There are several layers of requests that you need to work through in this process, permission to access your (or your client’s) account via a code valid for 1 hour, a short-lived token to use with the API to access the account’s media that is also valid for 1 hour but can be exchanged for the next permission, and a long-lived token to use for the same purpose that is valid for 60 days. The long-lived token can be refreshed for an additional 60 days of validity at any time after it is 24 hours old, up until it expires. The current process for obtaining these permissions via Command Line Interface (CLI) can be found here in the Facebook for Developers docs.

Once you have the long-lived token any request you make using it will return a JSON object with specific data about the media that can aid in displaying it on your site. B.t how do we get that data to actually display the media when the initial data is traveling the CLI? We can send a GET request through axios to acquire the correct data fields and then store them in a state for use in your application. For example, returning and storing the media’s caption then setting its value as the alt text for your image or media_url as your src value. Tips for constructing your GET request URL and a list of fields you may want to include can also be found in the Facebook for Developers docs.

Now you have your Instagram feed displayed on your site! Just remember to refresh your long-lived token every 60 days and enjoy the new addition to your site.

Take the Next Step

Get started on your website today with Shifter. Try out our free plan and take the first step towards building the perfect website for you and your visitors.