Making it work with the 2020 API change

[oneWaveAdrian]

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]

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]

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]

@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]

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]

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

[asefcamel]

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

[asefcamel]

@oneWaveAdrian Okey the text is working!! 😅

[oneWaveAdrian]

@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]

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

[madebycaliper]

@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]

@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]

@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]

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]

@oneWaveAdrian 🤣 🎯

[drKreso]

This stopped working

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

[oneWaveAdrian]

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

[sebastianjung]

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]

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]

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]

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]

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

[hvitis]

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]

@hvitis go ahead 👍

[case112]

@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]

@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]

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)