kevinongko / vue-instagram Goto Github PK

Hello! I make clear Nuxt.js project and copy/insert your code (from main GitHub repo page). And get Vue.js error on red screen:

E:\nuxt-project\node_modules\vue-instagram\src\vue-instagram.vue:1
(function (exports, require, module, __filename, __dirname) { <template> ...

SyntaxError: Unexpected token <
...

How to fix it? Maybe you write instructon for Nuxt.js users?

Hi Kevin, thanks for the plugin, it works perfect.

I need to call a method when all the photos are already loaded, any ideas??

Thank you!

This seems really obtuse and confusing, so how do I generate an access token? Going through Instagram's docs is like slowly hammering nails into my skull while sitting in a kiddie pool filled with electric eels...

Do you have a recommended workflow for this? Will getting an Instagram access token work while in local development mode? Any resources that you could recommend to get through this insanity?

Thank you in advance! XD

Hi there!

Thank you for your amazing plugin, it's amazing!

I just have on concern about Content Security Policy. I added these rules (I removed the non-relevant ones):

default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' https://api.instagram.com; img-src 'self' https://scontent.cdninstagram.com; 

I still have errors about CSP in my console (there wasn't any before I added this plugin):

The picture above is in French but it means:
"The page settings have prevented the loading of a resource to be evaluated".

Are these evaluated scripts necessary?

Thanks for your help! 👍

Love the component, looking forward to adding this to a project I'm working on!

Would it be possible to add filtering by a specific keyword/hashtag? I'm not familiar with the Instagram API, but I see that the endpoint you use is specifically a user search. Ideally, the component would be able to search for a specific hashtag from within a specific user's feed.

Typing it out like that, it could honestly be something that even happens in the client if this isn't an endpoint that Instagram provides:

• Retrieve list of user's feed items
• Filter through them to only show items with specific criteria
• Fetch the images/comments/etc. for whatever is left after the filter

Would be happy to take a look at implementing the latter solution, if you're open to contributions.

Vue 3 will deprecate scoped slots.
https://vuejs.org/v2/guide/components-slots.html

Hi,

Does this support a template slot while loading (eg. waiting for the API to respond)? If so, could you please point me to some documentation for it? I can't seem to find anything on it if there is such a thing.

Thanks for creating this cool Vue component!

Hi!
I'm using this package, and i have this issue:

Access to XMLHttpRequest at 'https://api.instagram.com/v1/users/self/media/recent?access_token=###TOKEN###&count=3' from origin '###URL###' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any ideas?
Thanks a lot!
Vincent

Did something change to stop this from working? Your demo seems to be down, and it no longer works on the app I was developing. I will try to troubleshoot if this is not the case and something is wrong locally over here let me know!

Thanks!

I am filtering posts by count but no matter what the count is, it only returns 6 posts.

I like the initial idea of your component, but for some clients I would only need to show pictures, not comments or captions or anything else, so is that possible? I would also want the styling stripped down to match the aesthetic of a clients app, so is this possible as well?

Thank you in advance for your time :-)

Hi. Thanks for your package. Initially this worked really well, however I'm trying to use it in a Vuepress build, which also work fine when running in dev mode, however when trying to build the project i get a ReferenceError: window is not defined error.

My initial guess would be that this is caused by the browser-jsonp library. Would you consider switching this to a node compatible library like axios or similar? I'd be happy to have a go at this and make a PR but wanted to see what your view on it was first.

Cheers!

This nice component is missing an online demo. Static github or codepen for example?

hello everyone. I tried to use it but this error came.
I thought that it should be from Eslint and I added :
"eslintConfig": {
"globals": {
"window": true
}
}
To my 'package.json' but it didn't work either.

Hey guys,

just wanted to share my findings on the problem that i was fighting with for an hour:

If you have the message described in the headline just follow those steps:

1. Sign into your IG profile at https://www.instagram.com/developer/
2. Create a Client
3. Go to this URL https://api.instagram.com/oauth/authorize/?client_id=[YOUR_CLIENT_ID]&redirect_uri=[YOUR_REDIRECT_URI]&scope=public_content&response_type=token
REMEMBER TO FILL IN YOUR FRESHLY CREATED CLIENT ID AND YOUR REDIRECT URI (with 'http://' in front)
4. Take the new token out of the response (in the url bar) and put it into the token prop of the vue-instagram component

if you still get {"error_type": "OAuthForbiddenException", "code": 403, "error_message": "Implicit authentication is disabled"} try unchecking "Disable implicit OAuth" in the Security tab on your newly created client.

If you have any questions, feel free to ask,

Sebastian

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

Started getting some bug reports that script was timing out being able to fetch from IG. Noticed that the demo site is also not displaying anything.

Any ideas if this is pertaining to an API change or just downtime from IG?

API call doesn't seem to work

I use this module with nuxtjs, the implementation seems to work, I have created my application in facebook developer I have created an Instagram app "basic display", I generate my token without problem but impossible to display the images.

is there a problem since the last update on facebook and instagram?

token generated

token tested

api call

api response

Hello Kevin,

I loved your plugin, I want to create a post list and display it in the view using the bootstrap-vue carousel but without success, have you used it that way or some other carousel component that works?

thank you!

Hi,
Great work on this component! 👍

Today I encountered an issue though, suddenly my feed stopped working (been working just fine until today, I havent changed or updated anything - it just broke all of a sudden).

I did some testing and it seems that {{ props.feed.caption.text }} is the issue, not sure what's causing it to break however. Any ideas?

Template:

<template>
    <vue-instagram token="token" username="user" :count="3">
        <template slot="feeds" slot-scope="props">
            <article class="media">
                <!-- Not working -->
                {{ props.feed.caption.text }}
            </article>
        </template>
        <template slot="error" slot-scope="props">
            <div class="fancy-alert"> {{ props.error.error_message }} </div>
        </template>
    </vue-instagram>
</template>
<script>
import VueInstagram from 'vue-instagram'
export default {
    components: {
        VueInstagram
    }
}
</script>

Error:
This is my console error returned when trying to fetch the caption text:
TypeError: Cannot read property 'text' of null

Because suddenly my access token has become invalid and I can't register a client anymore in the old way.

And the provided demo also doesn't seem to work?

How do I use vue-instagram with waterfall?
https://github.com/MopTym/vue-waterfall

@kevinongko

Is it possible that it is in real time?

Some simple documentation showing the properties of each feed object would be very handy.

Your example code could also use some work. I would recommend you add the template code from this comment ~ #1 (comment)