Hi Nikhil, Having issue in loading the instagram feeds

[TAKSoftware]

Still the output is three boxes with empty images...... keep on loading

please help

[georgecollier]

Hi,

I'm experiencing the same issue.

[barrak71]

HI,

Is there a fix yet. I'm having the same issue.

[Nighthawk-Rider]

Just adding my voice to the pile here - web part never loads, not even your "test" Instagram!

[Nighthawk-Rider]

Adding to this - weirdly my users in California can see the web part with no issue, but my users in Denver cannot. It's not tied to an ISP or a web filter or cellular provider or desktop vs. mobile, it seems to be entirely regional. I went ahead and disabled the SharePoint CDN, thinking this might help address this, but no effect after 1 day. I see this error using Chrome dev tools in Denver (California does not):

Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at t.handleSuccess (instagram-feed-web-part_1d4b4dfd69d34d5f7608be9783eb873f.js:1)
    at XMLHttpRequest.s.onload (instagram-feed-web-part_1d4b4dfd69d34d5f7608be9783eb873f.js:1)

[mvanderhoff]

I am seeing the same issue here in Texas with exa any update.

[robertpsoto]

I tried this today and it's not working. I confirmed with a coworker that this web part worked for a little while and then he saw it was broken today.

[FemkeCornelissen]

I'm also tried and it's not working.

[Moord2004]

I'm having the same problems as others have mentioned. It's blank.

[gerardoabal]

This issue its related with CORS policy blocked by SharePoint

And there is also a closed issue with no solution or workarround.

Is this WebPart died or discontinued?

[jarajala]

Would be great to get this issue fixed. Instagram web part is not working. @thenikhilk Do you have any plans/suggestions?

[2XL]

The issue persist?, is there are work around for it?

[KavitaKalme]

Issue is still there...however I am getting is intermittently. Sometimes I can see instagram feeds, sometimes it just keep displaying blank tiles with loading mode. And yes its CORS issue when it doesnt work. But then how it works at times.

[Zahra234]

I have the same issue. How to solve it? I need Instagram web part to be in my page

[sansa91]

Try the code below instead of the img tags, change it to iframes instead. If you check the dev for facebook and read about it it looks like you have to use it to get application id / tokens etc from instagram to be able to post information like before. But if you write the code with iframes like this it works for me. :)

    <div className={classNames.postsGridSizer}>
      <div className={classNames.postsGridPadder}>
        <a target='_blank' href={'https://www.instagram.com/p/' + post.shortcode} className={classNames.postsGridLink}>
          {/* <img src={post.thumbnail_src} className={classNames.postsGridImage} /> */}
          <iframe src={'https://www.instagram.com/p/' + post.shortcode + '/embed'} className={classNames.postsGridImage} />
          {/* <iframe src={post.thumbnail_src + '/embed'} className={classNames.postsGridImage} /> */}
        </a>
      </div>
    </div>
  </div>`

[Nighthawk-Rider]

Try the code below instead of the img tags, change it to iframes instead. If you check the dev for facebook and read about it it looks like you have to use it to get application id / tokens etc from instagram to be able to post information like before. But if you write the code with iframes like this it works for me. :)

    <div className={classNames.postsGridSizer}>
      <div className={classNames.postsGridPadder}>
        <a target='_blank' href={'https://www.instagram.com/p/' + post.shortcode} className={classNames.postsGridLink}>
          {/* <img src={post.thumbnail_src} className={classNames.postsGridImage} /> */}
          <iframe src={'https://www.instagram.com/p/' + post.shortcode + '/embed'} className={classNames.postsGridImage} />
          {/* <iframe src={post.thumbnail_src + '/embed'} className={classNames.postsGridImage} /> */}
        </a>
      </div>
    </div>
  </div>`

@sansa91 forgive my ignorance, but this code needs to be changed in this project, or I can use a code snippet web part with this info? If the code needs to be changed...maybe we fork/copy this into a new project and let this abandoned one die?

[sansa91]

Try the code below instead of the img tags, change it to iframes instead. If you check the dev for facebook and read about it it looks like you have to use it to get application id / tokens etc from instagram to be able to post information like before. But if you write the code with iframes like this it works for me. :)

    <div className={classNames.postsGridSizer}>
      <div className={classNames.postsGridPadder}>
        <a target='_blank' href={'https://www.instagram.com/p/' + post.shortcode} className={classNames.postsGridLink}>
          {/* <img src={post.thumbnail_src} className={classNames.postsGridImage} /> */}
          <iframe src={'https://www.instagram.com/p/' + post.shortcode + '/embed'} className={classNames.postsGridImage} />
          {/* <iframe src={post.thumbnail_src + '/embed'} className={classNames.postsGridImage} /> */}
        </a>
      </div>
    </div>
  </div>`

@sansa91 forgive my ignorance, but this code needs to be changed in this project, or I can use a code snippet web part with this info? If the code needs to be changed...maybe we fork/copy this into a new project and let this abandoned one die?

@Nighthawk-Rider

This is just a simple quickfix that is pretty limited if a company want a cheap quick version of showing the instagram feed.

you should add a configuration in the propertypane to be able to limit the amount of posts because now it shows the last 12 posts in this manner.

You could make a new project on this webpart just for this since this way of posting an instagram feed does not work anymore, it is possible to use the ''embed webpart'' that is built-in within SharePoint to show ''1'' post aswell, but if we wan't to make this a good-looking webpart today we have to use the facebook developer portal or what you wan't to call it to collect an application ID and an instagram application ID :)

[RCLA-TheMachine]

Hi All,

Is there a decent solution yet?

I was thinking about solving the CORS issue itself, and found following link: https://tahoeninjas.blog/2019/02/05/getting-around-cors-issues-in-spfx-with-sphttpclient/

It says that when using an SpHttpRequest instead of using the link, the CORS issue should be solved. Does anyone have any experience with this? Is it worth trying?

Thx

[Zahra234]

Dear,

How can I change the code if I install only the .sppkg file?

Please tell me step by step.

Regards,

---

From: sansa91 @.> Sent: Tuesday, June 1, 2021 11:46 AM To: thenikhilk/sharepoint-instagram-feed @.> Cc: Zahra234 @.>; Comment @.> Subject: Re: [thenikhilk/sharepoint-instagram-feed] Hi Nikhil, Having issue in loading the instagram feeds (#6)

Try the code below instead of the img tags, change it to iframes instead. If you check the dev for facebook and read about it it looks like you have to use it to get application id / tokens etc from instagram to be able to post information like before. But if you write the code with iframes like this it works for me. :)

<div className={classNames.postsGridSizer}>
  <div className={classNames.postsGridPadder}>
    <a target='_blank' href={'https://www.instagram.com/p/' + post.shortcode} className={classNames.postsGridLink}>
      {/* <img src={post.thumbnail_src} className={classNames.postsGridImage} /> */}
      <iframe src={'https://www.instagram.com/p/' + post.shortcode + '/embed'} className={classNames.postsGridImage} />
      {/* <iframe src={post.thumbnail_src + '/embed'} className={classNames.postsGridImage} /> */}
    </a>
  </div>
</div>

[Zahra234]

Dear,

Kindly send the .sppkg that you did after changing the code.

Regards,

---

From: sansa91 @.> Sent: Tuesday, June 1, 2021 11:46 AM To: thenikhilk/sharepoint-instagram-feed @.> Cc: Zahra234 @.>; Comment @.> Subject: Re: [thenikhilk/sharepoint-instagram-feed] Hi Nikhil, Having issue in loading the instagram feeds (#6)

Try the code below instead of the img tags, change it to iframes instead. If you check the dev for facebook and read about it it looks like you have to use it to get application id / tokens etc from instagram to be able to post information like before. But if you write the code with iframes like this it works for me. :)

<div className={classNames.postsGridSizer}>
  <div className={classNames.postsGridPadder}>
    <a target='_blank' href={'https://www.instagram.com/p/' + post.shortcode} className={classNames.postsGridLink}>
      {/* <img src={post.thumbnail_src} className={classNames.postsGridImage} /> */}
      <iframe src={'https://www.instagram.com/p/' + post.shortcode + '/embed'} className={classNames.postsGridImage} />
      {/* <iframe src={post.thumbnail_src + '/embed'} className={classNames.postsGridImage} /> */}
    </a>
  </div>
</div>