search

DDKnoll / Instagram-Infinite-Scroll

A single page Infinite Scroll app built using Ractive.js, jQuery, and Pure CSS.
68 stars 19 forks source link

How to display a user's recent media with Instagram-Infinite-Scroll instead of a search query result? #10

Open monecchi opened 10 years ago

monecchi commented 10 years ago

Hi there. First thing first, congrats for the Instagram-Infinite-Scroll plugin, it is simply great. Also, I'm sorry for posting this question as an issue, but I couldn't find a better way to make it. As a beginner, I'm really confused on how to rewrite the code in order to adapt it to display a user's recent media, I'm concerned I'd do that by providing an access token, but I'm not really sure how to make it. I've tried to integrate other "Instagram jQuery plugins" by making minor changes in the code with no success.

Have you any plans to make this function available?

Thanks in advance.

monecchi commented 10 years ago

Hello. I've just searched through your commits and I've noticed this has been a work in progress. I'll watch it for when it's ready. I just can't see the time to use it on my Facebook Page, I know FB has an issue with https and that Instagram as for now does only serve its images over http, but it's worth it!!

I wish you success on your projects!

Regards,

Adriano.

DDKnoll commented 10 years ago

Thanks! The issue tracker is probably the appropriate place for this.

You are correct, I haven't quite finished the user search. The tricky part is that instagram needs to search by a user's numerical ID and not by their username.

So first we would need to run a search on the API. This example searches for the user named Dribbble:

https://api.instagram.com/v1/users/search?q=dribbble&access_token=188332450.f59def8.a6e3095d18b846d6b673441ba7125204

This will return a json of possible user names. We need to get the user ID value for the user and set the search value to that User ID. Then initialize the instagram API this way instead:

/**
 * Initialize the instagram feed with the user ID instead.
 */
  insta = new instagramFeed({
  el: 'template-target',
  template: template,
  method:'user', //We're not searching tags anymore, we're searching for the user.
  clientID: 'Your User ID',
  search: 320460923, //This is the User ID from our API search
  complete: infiniteScrollBinding
  });//Ractive init

So if you grab the change to the instagram.js that I just pushed up, it should be able to search for users.

Another option is that can also just call these functions once the instagram feed is initialized:

insta.set('method', 'user')
insta.set('search', 320460923) //This is the user ID for the Dribbble account.

Let me know if that doesn't work for you.

Best, Dugan

monecchi commented 9 years ago

Hi there. Sorry for the delay on giving a proper feedback. I've just grabbed the latest version of Instagram Infinite Scroll and it works as intended with the user method, however, after setting it up as instructed it displays only a few pics from a user.

Is there any additional step I've missed?

Here's a demo I'm working on https://www.pizzariameurancho.com.br/pizzagram/

In this demo I'm also trying to implement your plugin within a bootstrap template, and as for now I'm having some issues with the lightbox because I'm trying to switch the default lightbox to the bootstrap's built-in one.