Making it work with the 2020 API change #34

oneWaveAdrian · 2020-03-25T18:17:10Z

Hey @kevinongko thanks for the amazing work on this!

Unfortunately with the recent API change (see https://www.instagram.com/developer/) it did not work for me anymore.
FB changed the structure entirely, I made a snippet maybe that helps in rewriting your component.
I am very sorry not to be able to rewrite yours, too backlogged atm, but I want to give back and maybe this saves some fellas from headaches in the meantime:

https://gitlab.com/snippets/1957175

sebastianjung · 2020-03-30T11:12:32Z

Sorry for hijacking this thread!

I know that the longterm access token is the recommended way for showing someones' feed.

But I wonder if YOUR_LONGTERM_ACCESS_TOKEN will expire in 60 days and the feed is broken again.

The 60 days are described here:
https://developers.facebook.com/docs/instagram-basic-display-api/overview#instagram-user-access-tokens

@oneWaveAdrian
Do you have any ideas on this?

And thanks for your snippet. Actually helped me :)

zwickmueller · 2020-03-30T11:20:03Z

I have the same question as @sebastianjung, but also another question: I tried @oneWaveAdrians snippet, and it worked fine, so thanks for that. But the feed was blocked by uBlock Origin which made me wonder if all Instagram feeds using the new API will break/be blocked by adblockers after tomorrow's API changes? Has anyone else experience that, or is this just something on my end/implementation/setup?

oneWaveAdrian · 2020-03-30T12:11:31Z

@sebastianjung Glad I could help! Ja the token gave me a headache too - for now I will do it manually since I lack the proper time but I thought a simple CRON on the server should do the trick since (as far as I understood it) all you have to do is call the refresh URL once every 60 days and then use the returned token for future.

As far as I understand this is the request you have to make:
GET https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token=YOUR_LONGTERM_ACCESS_TOKEN

This will return a json array from which you could pick the new token

{
  "access_token": "YOUR_NEW_LONGTERM_ACCESS_TOKEN",
  "token_type": "bearer",
  "expires_in": 5183966
}

Source: facebook user guides

@zwickmueller using uBlock myself I do not get any of these issues, just tested it again and it came out clear, thank's for the hint though, I usually deactivate it on dev URLs

sebastianjung · 2020-03-30T12:27:42Z

So do api calls to
"https://api.instagram.com/v1/users/self/media/recent/?access_token="
fail from tomorrow on?

As stated on https://www.instagram.com/developer/

"As we previously shared, we will be disabling the final Instagram Legacy API permission ("Basic") on March 31, 2020. As of March 31, 2020, all Legacy API capabilities will be fulfilled by the Instagram Graph API and the Instagram Basic Display API."

But im not sure whether or not the self/media-route is affected by this. Can someone clarify this?

oneWaveAdrian · 2020-03-30T13:20:11Z

Sorry mate, I ditched the old auth completely, because of that uncertainty 😕

asefcamel · 2020-03-30T21:04:03Z

@oneWaveAdrian Nice, it's working!! any idea of how i can get the content also? now it's just returning some images only..

asefcamel · 2020-03-30T21:06:39Z

@oneWaveAdrian Okey the text is working!! 😅

oneWaveAdrian · 2020-03-30T21:28:38Z

@oneWaveAdrian Nice, it's working!! any idea of how i can get the content also? now it's just returning some images only..

@asefcamel

That's what the fields="media_url,media_type,caption" prop is for.
Further details here

sebastianjung · 2020-04-01T15:11:38Z

For anyone interested:
Seems like the old api is still working. I think getting an access token for it is not possible anymore.

madebycaliper · 2020-05-02T00:02:12Z

@sebastianjung I can confirm the same thing: API is working for existing tokens but new access tokens are no longer being provisioned. Does anyone know a simple way of getting the long term token to use the new graph.instagram.com endpoint? Been working on this for hours, submitting a developer application to Facebook but that seems like the wrong route. Any advice would be helpful!

oneWaveAdrian · 2020-05-02T00:58:22Z

@madebycaliper You can do it manually by sending a simple GET request containing all necessary info:

grant type -> ig_exchange_token
access_token
client_secret

Like this:

https://graph.instagram.com/access_token?grant_type=ig_exchange_token&access_token=87WN8R9d32naQb9rIuXm_89NXDvJYZtOTrP723nuc8f340ncfy289&client_secret=16833896e041307987a7e8987a

this is not my real data but you get the point

Source: facebook dev guide

madebycaliper · 2020-05-02T01:05:26Z

@oneWaveAdrian thanks for your reply. The problem for me is that Facebook/Instagram isn't allowing anymore client ID registrations for the old API and the process to get one for the new version is confusing to me. You used to be able to simply obtain an access token if you knew a couple details about the user account and have a client ID, and now it seems like you need to get vetted by Facebook for developer access. Am I missing something here? Is there an easy way to obtain the access_token and client secret?

oneWaveAdrian · 2020-05-02T01:14:02Z

Sorry don't know. I have a fb dev account and there it's as "simple" as creating an app and clicking a button to request the secret. But i agree this became unnecessarily complicated for simply displaying pictures. >I know banking software that's less secure...

madebycaliper · 2020-05-02T01:17:02Z

@oneWaveAdrian 🤣 🎯

drKreso · 2020-07-03T07:47:01Z

This stopped working

{
meta: {
   code: 400,
   error_type: "APINotAllowedError",
   error_message: "This endpoint has been retired"
   }
}

oneWaveAdrian · 2020-07-03T14:06:35Z

Is it possible to describe the issue a little more? Which endpoint did you use?

sebastianjung · 2020-07-03T14:17:03Z

For @drKreso and anyone else still having trouble with the api:

A friend of mine told me about this package:
https://github.com/jsanahuja/InstagramFeed
which just scrapes the instagram page for the information instead of hustling with the instagram APIs.

Check example 7 on their demo page for using the script without a template (just retrieving the data): https://www.sowecms.com/demos/InstagramFeed/

Did the job for me at least!

drKreso · 2020-07-22T07:37:28Z

Is it possible to describe the issue a little more? Which endpoint did you use?

@oneWaveAdrian I meant the original solution stopped working (that you already know). Your approach is working like a glove after you get access token. Since my app is not approved and I just need it for my company Instagram (one account) I added Instagram tester to get the token. It will stop working after two months, but I can adjust until then :)

I think they are making it convoluted on purpose.

drKreso · 2020-07-22T07:38:41Z

For @drKreso and anyone else still having trouble with the api:

A friend of mine told me about this package:
https://github.com/jsanahuja/InstagramFeed
which just scrapes the instagram page for the information instead of hustling with the instagram APIs.

Check example 7 on their demo page for using the script without a template (just retrieving the data): https://www.sowecms.com/demos/InstagramFeed/

Did the job for me at least!
@sebastianjung This approach got blocked (throttled my IP after a while) so I went with @oneWaveAdrian snippet

redxtech · 2020-08-12T06:09:47Z

I'm using some variation of this in one of my websites! Very glad you made this. Would you be willing to either make a PR to this repo with your version or publish your own on npm?

oneWaveAdrian · 2020-11-14T19:14:38Z

I'm sorry I don't have the time to maintain a repo, so it will be this snippet for now...

hvitis · 2021-02-26T12:52:31Z

I'm sorry I don't have the time to maintain a repo, so it will be this snippet for now...

Requesting Permission to follow supporting it as a maintainer.

oneWaveAdrian · 2021-02-26T13:26:47Z

@hvitis go ahead 👍

case112 · 2021-03-11T17:32:06Z

@kevinongko & @oneWaveAdrian thanks so much for your input!

I was just following along and couldn't manage to get the GET request working with your provided URL. There might have been a change again with the newer API version 10.0.

So I ended up using it with this URL and it works for me:

https://graph.facebook.com/v10.0/{instagram_business_account_id}/media?fields={fields}&access_token={access-token}

// in the code change the URL in the get request and swap the order of params
.get('https://graph.facebook.com/v10.0/353454321123231239/media', {
          params: { fields: this.fields, access_token: this.token }
        })

oneWaveAdrian · 2021-03-31T16:29:41Z

@case112 you're using facebook graph instead of instagram graph - did they merge that? Do you have any documentation to back it up that the insta graph API does not work anymore? My existing deployments still seem to work somehow...

restyler · 2021-05-12T18:15:41Z

For @drKreso and anyone else still having trouble with the api:

A friend of mine told me about this package:
https://github.com/jsanahuja/InstagramFeed
which just scrapes the instagram page for the information instead of hustling with the instagram APIs.

Check example 7 on their demo page for using the script without a template (just retrieving the data): https://www.sowecms.com/demos/InstagramFeed/

Did the job for me at least!

Unfortunately InstagramFeed is now archived.. in case anyone is sick of Instagram tokens and still needs to display simple Instagram feed widget on the website - take a look at https://github.com/restyler/inwidget-proxified which currently works fine (PHP/JS widget)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Making it work with the 2020 API change #34

Making it work with the 2020 API change #34

oneWaveAdrian commented Mar 25, 2020

sebastianjung commented Mar 30, 2020

zwickmueller commented Mar 30, 2020

oneWaveAdrian commented Mar 30, 2020 •

edited

Loading

sebastianjung commented Mar 30, 2020

oneWaveAdrian commented Mar 30, 2020

asefcamel commented Mar 30, 2020

asefcamel commented Mar 30, 2020

oneWaveAdrian commented Mar 30, 2020 •

edited

Loading

sebastianjung commented Apr 1, 2020

madebycaliper commented May 2, 2020

oneWaveAdrian commented May 2, 2020 •

edited

Loading

madebycaliper commented May 2, 2020 •

edited

Loading

oneWaveAdrian commented May 2, 2020 via email •

edited

Loading

madebycaliper commented May 2, 2020

drKreso commented Jul 3, 2020 •

edited

Loading

oneWaveAdrian commented Jul 3, 2020

sebastianjung commented Jul 3, 2020 •

edited

Loading

drKreso commented Jul 22, 2020

drKreso commented Jul 22, 2020

redxtech commented Aug 12, 2020

oneWaveAdrian commented Nov 14, 2020

hvitis commented Feb 26, 2021 •

edited

Loading

oneWaveAdrian commented Feb 26, 2021

case112 commented Mar 11, 2021

oneWaveAdrian commented Mar 31, 2021

restyler commented May 12, 2021

Making it work with the 2020 API change #34

Making it work with the 2020 API change #34

Comments

oneWaveAdrian commented Mar 25, 2020

sebastianjung commented Mar 30, 2020

zwickmueller commented Mar 30, 2020

oneWaveAdrian commented Mar 30, 2020 • edited Loading

sebastianjung commented Mar 30, 2020

oneWaveAdrian commented Mar 30, 2020

asefcamel commented Mar 30, 2020

asefcamel commented Mar 30, 2020

oneWaveAdrian commented Mar 30, 2020 • edited Loading

sebastianjung commented Apr 1, 2020

madebycaliper commented May 2, 2020

oneWaveAdrian commented May 2, 2020 • edited Loading

madebycaliper commented May 2, 2020 • edited Loading

oneWaveAdrian commented May 2, 2020 via email • edited Loading

madebycaliper commented May 2, 2020

drKreso commented Jul 3, 2020 • edited Loading

oneWaveAdrian commented Jul 3, 2020

sebastianjung commented Jul 3, 2020 • edited Loading

drKreso commented Jul 22, 2020

drKreso commented Jul 22, 2020

redxtech commented Aug 12, 2020

oneWaveAdrian commented Nov 14, 2020

hvitis commented Feb 26, 2021 • edited Loading

oneWaveAdrian commented Feb 26, 2021

case112 commented Mar 11, 2021

oneWaveAdrian commented Mar 31, 2021

restyler commented May 12, 2021

oneWaveAdrian commented Mar 30, 2020 •

edited

Loading

oneWaveAdrian commented Mar 30, 2020 •

edited

Loading

oneWaveAdrian commented May 2, 2020 •

edited

Loading

madebycaliper commented May 2, 2020 •

edited

Loading

oneWaveAdrian commented May 2, 2020 via email •

edited

Loading

drKreso commented Jul 3, 2020 •

edited

Loading

sebastianjung commented Jul 3, 2020 •

edited

Loading

hvitis commented Feb 26, 2021 •

edited

Loading