InstagramPostEmbed - A React component to embed an Instagram Post

TL;DR

<InstagramPostEmbed /> is an Open Source React component that uses the oEmbed API to embed an Instagram post. View it in action.

Source code

Inspiration

I built this component to familiarize myself with the Facebook Developer Network. So if you do like it, feel free to fork or share. You can find more components here.

Installation

npm install --save @kunalnagarco/react-component-library

Usage


import { InstagramPostEmbed } from '@kunalnagarco/react-component-library';

// Single Post
<InstagramPostEmbed
  clientAccessToken="<token>"
  url="https://www.instagram.com/p/CO_u0wftV4Q/"
/>

// Multiple Posts
<InstagramPostEmbed
  clientAccessToken="<token>"
  url="https://www.instagram.com/p/CORs4wShENX/"
/>
<InstagramPostEmbed
  clientAccessToken="<token>"
  url="https://www.instagram.com/p/CNyrgMsh3a2/"
/>

// Hide Caption
<InstagramPostEmbed
  clientAccessToken="<token>"
  hideCaption
  url="https://www.instagram.com/p/CNxdfcCB8Yb/"
/>

// Max width 320px
<InstagramPostEmbed
  clientAccessToken="<token>"
  maxWidth={320}
  url="https://www.instagram.com/p/CNxdfcCB8Yb/"
/>

// Max width 658
<InstagramPostEmbed
  clientAccessToken="<token>"
  maxWidth={658}
  url="https://www.instagram.com/p/CNxdfcCB8Yb/"
/>

Requirements

At the very minimum, you will need two things to use this component:

  • This component requires the clientAccessToken which can be obtained by creating a Facebook App. For full requirements, please follow the instructions in the Requirements section of the documentation.
  • You will also need the full link to an Instagram Post.

Technical Quirk

The component will automatically take care of the quirk for you. I just thought it’s an interesting point that folks might tend to miss while developing with the API.

After fetching the post details from the oEmbed API, you’ll get a blob of HTML that can be inserted into the DOM. The embed HTML contains a reference to the Instagram embed.js JavaScript library. Since the html is already in the DOM, the embed script needs to scan all the embed code and re-initialize it. This can be done by calling instgrm.Embeds.process() function after loading the library.

If this is not done, you’ll get an empty Instagram post embed.

Demo

Watch this component in action.

Support

If you find a bug, please open an issue.