Instagram feed on the site using js

Instagram feed on the site using js

Background

You may have come to this page from the plugin link instafeed.js… I actually did an article earlier on this topic, and even a video on YouTube, but I decided to update the information. On top of that, instafeed for me, sooner or later, fell off the site and stopped working, and it was also on jQuery.

Now, sitting down to rewrite information, I was faced with the fact that working with it is even more difficult than before: you need to get a token, create an application, and do a few more rather tedious things for the plugin to work.

And I decided to abandon it and look for a better solution. And I found it.

We will use a simple and handy plugin – InstagramFeed.js. It does not require any tokens, only the name of the Instagram account.

Note: This plugin has a limitation – it cannot display more than 12 photos. But, as a rule, the sites just display the last 8, and then go to the instu yourself and see)

However, it should be understood that this plugin has a limitation – it cannot display more than 12 photos. But, as a rule, the sites just display the last 8, and then go to the instu yourself and see)

There is a video above, if you are not satisfied with the text, you can watch it. Plus, there I show the option with custom html code for the Instagram feed, which will not be in the article.

Let’s take it in order, with html.

Html

<div id="insta"></div>

Just a div for displaying photos.

Js

Don’t forget to include the file instagramfeed.min.js to your html.

new InstagramFeed({
'username': 'ваш_юзернейм',
'container': document.getElementById("insta"),
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'display_captions': true,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 1
});

The most important thing we need to pass here is the correct selector for the container, as well as the correct username… The rest are just examples where you can show user information, profile, image captions, etc.

Note: since the plugin uses requests to instagram, it will not work just to run the html file in the browser. You definitely need a local server (Live Server or Browsersync) or hosting.

As I wrote above, you need to work hard to create a custom html code for an Instagram feed, and I described exactly how to do this in the video above. Use it! Below is a link to github, for your convenience.

See you!

Leave a Reply

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