Comments (26)
@oneWaveAdrian Nice, it's working!! any idea of how i can get the content also? now it's just returning some images only..
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
}
@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
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.
Related Issues (20)
- Cannot read property 'text' of null HOT 1
- Tutorial: How to fix "This client has not been approved to access this resource." HOT 1
- API Down? HOT 11
- Realtime HOT 1
- Your demo shows no instragram feed? HOT 2
- Unable to use with Vuepress / SSR (browser-jsonp?) HOT 1
- Issue with Content Security Policy (CSP) HOT 1
- Please document the "feed" object HOT 1
- Loading slot? HOT 1
- Vue 3 will deprecate scoped slots HOT 1
- Does this work with new 2019 Instagram Graph API? HOT 3
- Call method on load images HOT 3
- Using carousel with vue instagram HOT 1
- The access_token provided is invalid.
- 'window is not defined' in 'node_modules\vue-instagram\dist\vue-instagram.min.js'
- No 'Access-Control-Allow-Origin' header is present on the requested resource.
- Add filtering by String HOT 2
- How do I use vue-instagram with waterfall? HOT 2
- Only 6 posts returned HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-instagram.