Instagram feed

I Need Help
1

Hi.
Does anyone know how to integrate an Instagram feed?
I currently use a Flickr feed and have to post to Instagram separately, but want display with a single action.
Thanks, Andy

2

Hello @apswoodwork is this helpful?

There is the full instructions:

The following bits are needed to make the Instagram API work:

1 — instafeed.js ( https://github.com/stevenschobert/instafeed.js/ )

2 — your instagram account user ID ( https://smashballoon.com/instagram-feed/find-instagram-user-id/ )

3 — an API key (more on this later)

4 — magical JS code to activate the feed (more on this later)

Let’s go through each bit and explain what you need to do.

1. instafeed.js

This is a case of simply adding the instafeed.js file from this github link: GitHub - stevenschobert/instafeed.js: A simple Instagram JavaScript plugin for your website There’s no need to tamper with it, it simply works. It’s the magical JS code that you’ll have to play with (a little) to get the thing to work.

2. Your Instagram account user ID

To get this, simply visit Find my Instagram User ID and type in your instagram account name. If this doesn’t make sense, here is an example: My instagram account can be located at https://www.instagram.com/sunilsandhu Therefore, my account name is sunilsandhu Plop this into the smashballoon link and it’ll give you your user id — it’s quite long but make sure you copy the whole damn thing, as you’ll need it in a bit.

3. An API key

This can be a little awkward, but follow this and you’ll get it working:

  1. Firstly, go to https://www.instagram.com/developer/register/ — it’ll ask you to log in (if you’re not already);
  2. Then you should be taken to https://www.instagram.com/developer/ — you’ll see a button on there that says ‘Register Your Application’. Press that button. Go on, I dare ya!
  3. You should now be on https://www.instagram.com/developer/clients/manage/ — can you see where it says ‘Register a New Client’ towards the top-right-hand corner? Click that button.
  4. You’re now on https://www.instagram.com/developer/clients/register/ — fill in that pesky form!
  5. Once you’ve filled that in, you will see some details. That really long client ID is important, as we’ll need that later.

4. Magical JS code to activate the feed

  1. Once you’ve figured out where you want the Instagram feed to sit on your site, give the element an id of instafeed. Did that make sense? I sure hope so. If it didn’t, I implemented it by putting the following code on my site:
    <div id="instafeed"></div>
  2. Second things first: Make sure you’ve included the instafeed.js file in your code. This will need to be ABOVE the code we are about to discuss in the next point (but doesn’t need to be above the div tag we made in point 0).
  3. There’s a host of ways you can implement certain types of feeds, whether you want it to grab your own feed, or search for a specific hashtag. You can read more about doing this in the readme that can be found here instafeed.js/README.md at master · stevenschobert/instafeed.js · GitHub Anyway, so here’s how we implemented a feed:
var feed = new Instafeed({
            get: 'user',
            userId: '5729620331',
            template: '<a href="{{link}}"><img class="insta-image" src="{{image}}" /></a>',
            accessToken: 'superduperlongcodethatwillsithere'
        });
        feed.run();

Let’s break down each line to help make sense of it all.

  1. var feed = new Instafeed({ Creates a new instance of Instafeed and wraps it into a variable
  2. get: 'user', This is what determines the type of feed we want. In this example we have opted to get our own feed
  3. userId: '5729620331', This is the ID you will have gotten from Find my Instagram User ID earlier
  4. template: '<a href="{{link}}"><img class="insta-image" src="{{image}}" /></a>', This is basically what the JS is adding to your page, for every image the API is feeding in. You’ll see on mine that I’ve added a class called insta-image, which applies the CSS styling I’ve made
  5. accessToken: 'superduperlongcodethatwillsithere' This is generated at http://instagram.pixelunion.net/ - you must be logged into the Instagram account you want to validate before visiting this site as it will ask you to authorise the app before proceeding
  6. }); These are the closing tags from var feed new instance
  7. feed.run(); This executes everything

And there you have it — that’s everything you need to do to get a live instagram feed on your site!

1 Like
3

Hi Pealco.
I saw this but Instagram is saying it’s closing it’s API platform soon.
Shame that.

4

So I went for an Elfsight Instagram feed plugin. Very swish, free with a few limitations. Would like to purchase a plugin outright though, but they all seem to be on a subscription basis apart from Lightwidget.