Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hi Nikhil, Having issue in loading the instagram feeds #6

Open
TAKSoftware opened this issue Nov 28, 2019 · 19 comments
Open

Hi Nikhil, Having issue in loading the instagram feeds #6

TAKSoftware opened this issue Nov 28, 2019 · 19 comments

Comments

@TAKSoftware
Copy link

TAKSoftware commented Nov 28, 2019 •
edited

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

please help
@georgecollier
Copy link

Hi,

I'm experiencing the same issue.

@barrak71
Copy link

barrak71 commented Dec 4, 2019

HI,

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

@Nighthawk-Rider
Copy link

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

@Nighthawk-Rider
Copy link

Nighthawk-Rider commented Dec 17, 2019 •
edited

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
Copy link

mvanderhoff commented Dec 20, 2019 •
edited

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

@robertpsoto
Copy link

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
Copy link

FemkeCornelissen commented Apr 2, 2020 •
edited

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

@Moord2004
Copy link

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

@gerardoabal
Copy link

This issue its related with CORS policy blocked by SharePoint
image

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

Is this WebPart died or discontinued?

@jarajala
Copy link

jarajala commented Jun 5, 2020

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

@2XL
Copy link

2XL commented Jan 28, 2021

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

@KavitaKalme
Copy link

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
Copy link

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

@sansa91
Copy link

sansa91 commented Jun 1, 2021 •
edited

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>`

image

@Nighthawk-Rider
Copy link

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>`

image

@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
Copy link

sansa91 commented Jun 30, 2021

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>`

image

@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
Copy link

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
Copy link

Zahra234 commented Jul 12, 2021 via email

@Zahra234
Copy link

Zahra234 commented Jul 12, 2021 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests