Making it work with the 2020 API change about vue-instagram HOT 26 OPEN

@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

from vue-instagram.

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.

from vue-instagram.

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

from vue-instagram.

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 :)

from vue-instagram.

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

from vue-instagram.

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

from vue-instagram.

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!

from vue-instagram.

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.

from vue-instagram.

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?

from vue-instagram.

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

from vue-instagram.

@hvitis go ahead 👍

from vue-instagram.

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?

from vue-instagram.

@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

from vue-instagram.

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?

from vue-instagram.

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

from vue-instagram.

@oneWaveAdrian Okey the text is working!! 😅

from vue-instagram.

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

from vue-instagram.

@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

from vue-instagram.

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

from vue-instagram.

from vue-instagram.

@oneWaveAdrian 🤣 🎯

from vue-instagram.

This stopped working

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

from vue-instagram.

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

from vue-instagram.

@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 }
        })

from vue-instagram.

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

from vue-instagram.

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)

from vue-instagram.