How to: Instagram Feed without plugins

Sergio · October 28, 2021, 4:38am

Hello.

I am not a javascript master by any stretch of the imagination. “Hello World!” is as funky as I get.

I am looking to add an instagram feed on my website without plugins. Most of the plugins I’ve seen (smashballoon, etc.) add some bloat I’d like to avoid. Plus doing my own css stylings gives me more freedom.

I have been reading about Instafeed.js (Instafeed.js - a simple Instagram javascript plugin). My question is: how can I get this to work with Bricks?

P.S. Just a question for the devs, would it be possible (or even reasonable) to add instagram functionality to bricks like you did with facebook?

timmse · November 2, 2021, 11:00pm

Hi Sergio,

the setup is pretty simple. By far the most difficult part is to generate the Instagram Access Token

Follow these steps:

https://github.com/stevenschobert/instafeed.js/wiki/Facebook-app-and-test-user-setup https://github.com/stevenschobert/instafeed.js/wiki/Managing-Access-Tokens

You can skip the part with the token refresh for testing purposes, it will work for at least 60 days.

After you have generated your access token, copy the following code into a code element, paste your Access Token, and if everything works your images will appear like mine.

<div id="instafeed"></div>

<script type="text/javascript" src="https://unpkg.com/instafeed.js@2.0.0/dist/instafeed.js"></script>

<script type="text/javascript">
    var feed = new Instafeed({
      accessToken: 'your-access-token'
    });
    feed.run();
</script>

There are some options as well as custom templates available, but you need to write at least some HTML and CSS to style your “feed” accordingly.

Best Regards,
timmse

Sergio · November 4, 2021, 4:24am

You are a Godsend! It works! I just used Instant-Tokens.com || Instagram Access Tokens to pull the ‘InstagramToken’ and copy that into the accesstoken variable.

timmse · November 4, 2021, 1:06pm

Hi Sergio,
you’re welcome. Yeah Instant-Tokens are definitely the easier way to get the token than hiking through developers.facebook

alexgr · November 5, 2021, 1:12am

So you don’t actually have to create a fb app to get the token? You can just use instant-tokens.com and then just paste the js code that Tim posted? I created an instant token and I added it on the code but instagram images don’t show up at all.

Sergio · November 5, 2021, 3:28am

No. The instant-tokens page does it all for you. It has two options to pass that token on, the javascript and the json. I just copy/pasted the javascript url.

Here is how my page looks now:

<script src="the javascript url that instant-tokens gives you goes here"></script>

<!-- <script type="text/javascript" src="https://unpkg.com/instafeed.js@2.0.0/dist/instafeed.js"></script>-->
<script type="text/javascript" src="https://myawesomewordpresspage.com/wp-content/plugins/instafeed/instafeed.js"></script>
 
<style>
  #instafeed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  max-width: max-content;
  margin: auto;
}

#instafeed a {
  display: block;
}

#instafeed img {
  display: block;
  width: 100%;
  background-size: cover;
}
</style>

<div id="instafeed"></div>

<script>
  	console.log("Token: ", InstagramToken, Instafeed);
    var feed = new Instafeed({
      accessToken: String(InstagramToken),
      limit: 8
    });
    feed.run();
</script>

alexgr · November 5, 2021, 3:31am

Sergio:

<script src="https://ig.instant-tokens.com/users/117b7e8f-4dac-4d48-81be-7323e717a806/instagram/17841421292392496/token.js?userSecret=mysupersecretkey"></script>

<!--<script type="text/javascript" src="https://unpkg.com/instafeed.js@2.0.0/dist/instafeed.js"></script>-->
<script type="text/javascript" src="https://myawesomewordpresspage.com/wp-content/plugins/instafeed/instafeed.js"></script>
 
<style>
  #instafeed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  max-width: max-content;
  margin: auto;
}

#instafeed a {
  display: block;
}

#instafeed img {
  display: block;
  width: 100%;
  background-size: cover;
}
</style>

<div id="instafeed"></div>

<script>
  	console.log("Token: ", InstagramToken, Instafeed);
    var feed = new Instafeed({
      accessToken: String(InstagramToken),
      limit: 8
    });
    feed.run();
</script>

Strange, I copy/pasted your above code and it still doesn’t work.

Sergio · November 6, 2021, 1:16am

Alex,

That’s because you’ll need to A. change the myawesomewordpresspage.com to your own page and upload the javascript there

OR

B. delete that line and uncomment the unpkg.com line.

I uploaded the javascript because Lighthouse kept moaning about external scripts and whatnot. Might not even be worth the effort since it is such a small script.

Let me know if it works!

alexgr · November 6, 2021, 1:51am

oh, got it! yes, I changed the url of the page but can you send me a link with the javascript code that I need to upload to wp-content/plugins/instafeed folder? I have some trouble locating the javascript code.

The B solution that you mentioned, you mean delete completely the line of code below? I don’t understand exactly what you mean by “uncomment”?

Sergio · November 6, 2021, 3:15am

Hello Alex,

Uncomment simply means removing the “” characters from the line. And completely delete the other line.

Becomes

<script type="text/javascript" src="https://unpkg.com/instafeed.js@2.0.0/dist/instafeed.js"></script>

And completely remove:
<script type="text/javascript" src="https://myawesomewordpresspage.com/wp-content/plugins/instafeed/instafeed.js"></script>

This uses the script Stefan uploaded to unpkg site.

If you want to host the script locally, then simply create the file on your server and copy/paste the code from the github site: https://github.com/stevenschobert/instafeed.js/blob/master/dist/instafeed.js

And then delete the unpkg line and change myawesomewebpage to your website and the folder you put the script in.

alexgr · November 6, 2021, 2:35pm

Sergio:

<script src="https://ig.instant-tokens.com/users/117b7e8f-4dac-4d48-81be-7323e717a806/instagram/17841421292392496/token.js?userSecret=mysupersecretkey"></script>

<!--<script type="text/javascript" src="https://unpkg.com/instafeed.js@2.0.0/dist/instafeed.js"></script>-->
<script type="text/javascript" src="https://myawesomewordpresspage.com/wp-content/plugins/instafeed/instafeed.js"></script>
 
<style>
  #instafeed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  max-width: max-content;
  margin: auto;
}

#instafeed a {
  display: block;
}

#instafeed img {
  display: block;
  width: 100%;
  background-size: cover;
}
</style>

<div id="instafeed"></div>

<script>
  	console.log("Token: ", InstagramToken, Instafeed);
    var feed = new Instafeed({
      accessToken: String(InstagramToken),
      limit: 8
    });
    feed.run();
</script>

Yeah, success!! It worked now, you explained so clearly what I was doing wrong. Thank you so much, I can get rid of the smush feed instagram plugin and use this light code.

alexgr · November 6, 2021, 6:07pm

Is there a way to make the feed images show in random instead of chronological order? I clicked on the links with options and custom template but I couldn’t find that specific function. Also, when I check the page in google page speed, it says that Instagram images should have properly size images and serve them in next-gen formats. I already have a webp plugin for my other images on the website but it doesn’t serve insta images in webp also.

Sergio · November 7, 2021, 11:30pm

Hi Alex,

For that you’ll need to look at https://github.com/stevenschobert/instafeed.js/wiki/Options-Reference, especially the sort function and put it in your script code, perhaps after the limit: 8 part (don’t forget to add a comma after 8 since you are passing multiple arguments).

As for PSI complaining about next gen stuff, I wouldn’t worry about it since it is an external image that you have zero control over. You can try to import the images into your local server and resize/compress them there, but you’ll have to do that custom coding yourself and quite frankly, that’s just too much of a headache if I were you.

alexgr · November 8, 2021, 12:53am

Thanks but what value should I put on the sort function? value: random?

Sergio · November 8, 2021, 1:23am

That I am not sure. Look at how Instagram passes arguments via their API and you should find some information there. The documentation for the instafeed is not very in depth.

alexgr · November 8, 2021, 2:17am

That’s strange. You’d think that would be something that would be clear on instafeed documentation.

Spipov · December 27, 2021, 10:12pm

is that code still working? ive pasted the code (have gotten insta token already and used that link). ive also hosted the instafeed.js or used the direct link to the github, nothing appears to be rendering.

wanted to make sure this method still works before trying more

Sergio · December 28, 2021, 12:46am

Still works for me. I have the script uploaded into a folder on my staging site and am calling that from the code block, pretty much how it is posted initially.

Check your console to see if there are any errors and let us know.

Alexson · March 31, 2022, 5:28pm

If you are looking to display your Instagram feed on a WordPress website, there are a couple of options.

You can get the Instagram feed plugin for WordPress or use the embedded Instagram widget.

I have tried both and here is the result:

Instagram widget looks ugly and restricts your creative freedom.

Sergio · April 4, 2022, 12:25am

Hello Alexson,

Yes, you are correct. I am doing away with plugins and the widget is just…no.

Hence why that javascript works so well for me: it is fast and allows me to customize it via css with little problems.