Does this library use the new instagram_oembed endpoint via the facebook graph api [1]? Asking this because I would like to use it later on. But currently I am still struggling to do even raw requests to the endpoint for dev purpose. Reason for this see https://developers.facebook.com/community/threads/388554676046719/?post_id=388554679380052 . Many thanks for your answer and maybe somebody of you has or had the same struggle.

[1]
https://developers.facebook.com/docs/instagram/oembed/
https://developers.facebook.com/docs/features-reference/oembed_read
https://developers.facebook.com/docs/graph-api/reference/instagram-oembed/

The post is not actually showing, just a generic link with "View This Post on Instagram" that takes you to the post on instagram's site.

Hello. I'm facing a issue that even I remove the package and install later this warning keeps showing on my npm install:

npm WARN [email protected] requires a peer of react@^16.0.0 || ^15.0.0 || ~0.14.0 but none is installed. You must install peer dependencies yourself.

And I'm using at the moment React 17.0.1.

Can someone give a little advice to how fix that?

Bug noticed on live demo: https://sugarshin.github.io/react-instagram-embed/

Hy all,
I'm facing this issue to make a clone of Instagram using mern. any to help to resolve it would be highly appreciated.

Module not found: Error: Can't resolve 'querystring' in 'C:\Old windows data\Study data]\Practice Projects\MERN Stack Projects\instaCloneMern\instaclonemern\node_modules\react-instagram-embed\es'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "querystring": false }

The onSuccess callback is being called after an error while loading the Instagram URL. Additionally, the error is still propagated to the browser instead of being swallowed by the callback.

Hey!

Thank you for this plugin, I came across it again as a new version was released.

I struggle to find out what got changed in v2? Is there a changelog? What are the steps to migrate?

Thank you a bunch,
Benedikt

I'm getting error message: Unexpected token ','

It's nested all the way down to the debug package. I'm using eslint@"^4.19.1" which uses the latest version of debug. So maybe it can be updated.

This is the error i get

_Module not found: Error: Can't resolve 'querystring' in \node_modules\react-instagram-embed\es'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "querystring": false }_

I have added my client access token and app id

I use this plugin and follow the basic example but I got the following error (I print it inside onFailure):

TypeError: Cannot read property 'Embeds' of undefined(…)

How to fix this? Thanks.

The demo URL at https://sugarshin.github.io/react-instagram-embed/ doesn't show me any images and when I change the embed URL I get a "this.request is null" error.

Is there a way to have the code show just the entire feed of the users post? Id love to be able to show more than just one post similar to the https://saurabhnemade.github.io/react-twitter-embed/?path=/story/twitter-timeline-embed--timeline-autoheight
Cheers

Thanks for useful package.

Can you add support to v18?

Related: #271

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^16.0.0 || ^15.0.0 || ~0.14.0" from [email protected]
npm ERR! node_modules/react-instagram-embed
npm ERR! react-instagram-embed@"^3.0.0" from the root project

Really enjoy using the tool, thanks!

Recently I have been encountering a 404 error when using the bike example in this repo. Is anyone else having the same 404?

When I add the client access token per the NPM and Facebook Developer page the only output I get is the clientaccesstoken.....

I've updated React to 16 and npm gives me a peer dep warning.

Is it possible to add support for it ?

Thanks :)

The github pages deployment is indicative of this module not being functional
https://sugarshin.github.io/react-instagram-embed/

It seems like on >1024 wide screens height is not calculated properly and comment section is not shown.

It might be related with Instagram API or the amount of text inside of the caption section. This React component can not set height manually or adjust it dinamically, thats why I'm raising this issue.

Thank you.

Hi,
All my embeds are broken because Facebook rejected my app review.
Did anyone manage to have their review accepted ? And how did you do it ? I'm very confused with "Please provide a hanks for your helpURL where we can test Oembed Read." I'd think I should paste there a link to a page in my site where there are embeds. But the field won't accept anything else than a facebook.com URL !
T

Hey nice library, worked straight away

I just ran into one issue when I upgraded to react 16.

Your checkAPI() function is returning too early (window.instgrm isn't found yet), and then calling handleFetchSuccess which errors since window.instgrm.Embeds can't be found.

I added my own code around yours which which sets a state variable based on <script async onload={this.onLoad} />

loadInstagram() {  // called from componentWillMount()
    if (!window.instgrm) {
      const s = document.createElement('script')
      s.async = s.defer = true
      s.src = `https://platform.instagram.com/en_US/embeds.js`
      s.id = 'react-instagram-embed-script'
      s.onload = this.onLoad
      const body: HTMLElement | null = document.body
      if (body) {
        body.appendChild(s)
      }
    }
  }

When I did something like

<InstagramEmbed url="https://www.instagram.com/p/CHS8IfKpEbD/" />

the embed no longer shows, and there's a 400 Bad Request for the URL https://api.instagram.com/oembed/?hidecaption=false&omitscript=true&url=https%3A%2F%2Fwww.instagram.com%2Fp%2FCHS8IfKpEbD%2F.

Visiting the page myself, when I was logged in, this showed the correct JSON, but if I was not logged in (i.e. incognito mode), there will be the following message:

This endpoint is deprecated. Please read https://developers.facebook.com/docs/instagram/oembed to learn how to migrate your endpoint.

The URL that it pointed to said that /oembed was deprecated on Oct. 24 2020 in favor of /instagram_oembed, which requires an API key.

I have been trying to use onLoading function to display a progress indicator. I tried to return a JSX element from the onloading function but that doesn't work. Is there a simple way to do this?

I have added true in hideCaption but it's working. I am still able to see the caption.
hideCaption={true}

Hello. I'm having an issue with 2.0.1. I get the following when trying to build with webpack:

ERROR in ./node_modules/react-instagram-embed/es/index.js 1:1243-1278
Module not found: Error: Can't resolve 'querystring' in './node_modules/react-instagram-embed/es'

This doesn't happen with 2.0.0 because that has querystring listed in its dependencies but it was removed in 2.0.1. Was there a reason it was removed? I don't want to add that to my root dependencies.

Thanks,
Patrick

Hi, I am using this library in a project where I need to cover error when there is no media on given Instagram URL. I have noticed that library in that situation doesn't call OnFailure function, but instead renders an empty div after it loads. Any suggestions how should this be handled? Thank you in advance!

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Datasource	Name	Replacement PR?
npm	@babel/plugin-proposal-class-properties
npm	@types/webpack-dev-server

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update All patch update devDependencies (patch) (@babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript, eslint-plugin-react)
• Update dependency webpack to v5.92.1
• Update actions/checkout action to v4
• Update dependency @types/react-test-renderer to v18
• Update dependency @types/webpack-dev-server to v4
• Update dependency babel-loader to v9
• Update dependency css-loader to v7
• Update dependency dotenv-webpack to v8
• Update dependency eslint to v9
• Update dependency husky to v9
• Update dependency lint-staged to v15
• Update dependency node to v20 (node, @types/node)
• Update dependency prettier to v3
• Update dependency style-loader to v4
• Update dependency type-fest to v4
• Update dependency typescript to v5
• Update dependency ubuntu to v22
• Update dependency webpack-cli to v5
• Update dependency webpack-dev-server to v5
• Update gh-pages orb to v1
• Update jest monorepo to v29 (major) (@types/jest, jest, ts-jest)
• Update react monorepo to v18 (major) (@types/react, @types/react-dom, react, react-dom, react-test-renderer)
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency node to v14.17.6

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update Node.js to v14.17.6
• Update Node.js to v14.21.3
• Update dependency node to v14.21.3
• Update Node.js to v22
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

As titled,

Is this possible?

Sometimes the media contents of the post causing the embed to become varying in heights.. it look especially weird and ugly if i show it as a carousel of Instagram post.

Is there a way to standardize the embed height? Thanks

Guys, I started getting this error today:

'InstagramEmbed' cannot be used as a JSX component.
Its instance type 'InstagramEmbed' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("<...>/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.

I have no ideia what's behind it. Do you know have any clues?

My component:

import InstagramEmbed from "react-instagram-embed";

interface Props {
	href: string;
}

export const Instagram = ({ href }: Props) => {
	return (
		<InstagramEmbed
			url={href}
			clientAccessToken={process.env.NEXT_PUBLIC_INSTAGRAM_TOKEN}
		/>
	);
};

Hello, I installed the npm package, imported it at the top of my React file, and cut and pasted the component code straight from the npm documentation. Still, the component doesn't display in my app. There is a popular Youtube tutorial that uses this package and many people in the comments are having the same issue of the component not displaying.

When I'm using the InstagramEmbed component, after a few refreshes the application refuses to load, and the console logs the attached error. React is trying to perform an action on an unmounted component, which seems to be indicating that some async action wasn't canceled in the unmount lifecycle method.

Hey, thanks for the nice component. Plugging it in was pretty pretty simple and it worked flawlessly. Just one small thing, the styling I am seeing is a little different from the demo.

1. I am not getting the instagram logo which is at the bottom
2. The follow button doesn't have the box around it.
3. The number of weeks old doesn't show.
   I checked out the example code and didn't find any css in there which I could use.

Btw, I am doing server side rendering.

Currently I'm using typescript along with react 17.0.2. I made a yarn add react-instagram-embed. I have a component called instagram.tsx where I'm using the following code:

import React from "react";
import InstagramEmbed from "react-instagram-embed";

export default function Instagram({ posts }) {
  return (
    <div >
      <InstagramEmbed
        url="https://instagr.am/p/Zw9o4/"
        maxWidth={600}
        hideCaption={false}
        containerTagName="div"
        protocol=""
        injectScript
        onLoading={() => {}}
        onSuccess={() => {}}
        onAfterRender={() => {}}
        onFailure={() => {}}
      />
    </div>
  );
}

But when I go to my webpage I cannot see the instagram post. I went to inspect element to check out the react developer tools and I could see the components.

But when I hover over the components I get

I have tried adding height manually by adding style={{height:"400px"}} in the parent component and maxHeight in the instagramEmbed component but it still does not show up

UPDATE
March 30, 2020 Update: We understand these are challenging times for our developer community, so we are postponing disabling the Instagram Legacy API Platform by 90 days to June 29, 2020. Remaining endpoints on the Legacy API will no longer be available after this date and your app's users may lose functionality.
We urge you to migrate to the Instagram Graph API and the Instagram Basic Display API without delay so that users of your app have time to transition as well. Both APIs rely on permissions that require App Review , which can take a week or longer to complete, so you should begin the process as soon as you can to avoid any interruption in service. Please see this blog post for tips on getting through our App Review process.
If you're only using the Legacy API to generate tokens in order to display your Instagram Feed on a personal website, you can use the Instagram Basic Display API's User Token Generator to continue generating tokens. The User Token Generator does not require App Review, but it will only work for your owned Instagram accounts (i.e. accounts for which you know the login credentials). Refer to the developer documentation to learn more.

Will the library still work after the above mentioned change?

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@sugarshin:js-lib)

Hi, no matter what I add to the maxWidth option field (1024, 2048, 100%, undefined), the maximum width is set to 658px. If I put in a maxWidth smaller that 658px it works fine.

https://www.instagram.com/explore/tags/upelections/?__a=1

i have used my proxy it ask for headers i have added still showing it
same origin shows the error over the webapp

Hi, when rerendering InstagramEmbed fast - switching between articles very fast, we sometimes get Cannot read property of null ( reading 'cancel' ) in componentDidUpdate method.

Seems that simple this.request?.cancel() should fix it. Or is there any other way I can fix it ? We are using basic example component from docs.

Thank you

`npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0 || ^15.0.0 || ~0.14.0" from [email protected]
npm ERR! node_modules/react-instagram-embed
npm ERR! react-instagram-embed@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-01-20T11_18_25_291Z-debug.log`

I gess, that I can hide only Caption class or I`m wrong?

Hi, i've some issue about this package, just copy the same code in documentation and the right app id and accesstoken but still can't display something. im using reactjs for this.

I've got three Instagram posts on a webpage, however only the last one is interactable. When I delete the other third the second one is interactable and so on and so forth.

Is this a bug ony my end or the library?

cannot set width, always overrided.

Hi
Thanks for the nice component.
It seems like the request from the component are now blocked by CORS.
The error can be seen on the live demo

I've tried my keys. ' | '.
Even the first one is confusing because it can be the app id or the Instagram app id. Tried both.