Load Instagram images to multiple Divs using instafeed.js

Hi folks,

If you are using instafeed JavaScript library to load the Instagram images to you site, you may face the limitation to show the images into different Div elements. Here we’ll see how we can get the image feed and showing them into different Div elements.multidiv

The steps to achieve this;

  1. Override the success call back, because it provides the feasibility to handle the feed data as we want.
  2. Create feed data with desired template(because this success function returns JSON data and we need to rearrange this data in-order to match with the template)
  3. Slice the re-arranged feed data and assign to Divs

HTML

JavaScript

 

Happy Instagraming 😉

You may also like...

8 Responses

  1. joseph says:

    Hello, thank you for this great script success function. Can you tell me why it isn’t work tho? im trying it with a different client id and tag but cant get it to output anyting to those divs. I also tried using the user ‘get’.

  2. Brian says:

    Hi, Is there an update on this? The code doesnt seem to work anymore.

  3. Ajith Srikukan says:

    It seems the instafeed js has some problem with new authentication methods.
    Check the code here, and replace the authentication credentials with your one.
    http://codepen.io/ajithsri/pen/zGNxXG

  4. Brian says:

    Thank you! Works great!

  5. Jesse says:

    I’m having some issues getting the feed to work. Running into a console error. Any thoughts here?

    • Jesse says:

      Okay, I was able to get the feed to work, however, it’s pulling in the same image for both divs. Need to have 1 different image per div. Is this possible with the above code?

  1. February 1, 2016

    […] Load Instagram images to multiple Divs using instafeed.js […]

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: