How to setup a custom Instagram feed in ASP.NET 6

How to setup a custom Instagram feed in ASP.NET 6

Original YouTube Logo

Article have related YouTube video

This is actually not just ASP.NET 6 restricted. No matter what framework your website is using you would be able to integrate this solution to your website. It will all be with help from Bootstrap, CSS and JavaScript. The only thing you need is a token from Instagram (or actually Meta, former Facebook) to get access to your account’s posts. But no worry I will guide you through it.

21-06-2022 |

ASP.NET Core
Social Media

You can either read the steps of getting the token in this article or watch the YouTube video where I explain the exact same thing, that is all up to your preferences. However when writing the actual code for the custom Instagram feed, the easiest thing will of course be to copy and paste it from this article.

Getting the Access token

So first of all we need to know that Instagram is owned by Meta, and that is why we need the access token from Meta. However follow these steps to get your access token.

  1. You will need to go to developers.facebook.com and hit My Apps in the menu. If you are not logged in, then login.

  2. On the My Apps page you need to Create app.

  3. Then when saying what type of app you will use, you need to choose Consumer so you get access to the Instagram Basic Display.

  4. Then give the app a name and you should be good to go for next step.

  5. In My Apps you now have a app which you can click on. So by doing that you will be navigated to a page where you can choose products to your app.

  6. In this case you will have to choose Instagram Basic Display.

  7. Now when you are in the “Set up” of Instagram Basic Display, you need to scroll down to the section called User Token Generator. Here you can Add and remove Instagram Testers which is what we want to do.

  8. You will then be navigated to a new page, and inside here you want to go to the bottom of the page and click Add Instagram Testers, and then type your Instagram profile from which you want to display the Instagram feed from.

  9. Now login to your Instagram account on a PC on Instagram.com

  10. Up the right corner, click on your profile image and choose Settings

  11. In the settings choose Apps and websites

  12. Now you should have a Test Invitations tab that you will click on and then accept the invitation.

  13. So now we can go back to the developer page and inside the Instagram Basic Display you can go to User Token Generator once again and actually get your access token.

Remember to save this a secure place. You don’t want anyone to get your access token and once it has been displayed to you again, you cannot watch it again. Then you can only generate a new again.

Setup the custom Instagram feed

First of all the reason I call this a “Custom” Instagram feed is because you can actually do what ever you want with it and style it as much as you want. There is really no limits, only your own CSS skills of course. However for the HTML we are going to use this piece of code.

Remember to change the path to the Instagram image, the href in the anchor tag and the text in the anchor tag to your own.

HTML

  
<div style="padding: 5px; padding-left: 25px;">
    <img style="width: 20px; display: inline-block;" src="~/img/logos/instagram-logo.webp">
    <a style="display: inline-block; color: gray;" href="https://www.instagram.com/zetbit.tech/">&#64;zetbit.tech</a>
</div>
            
<div class="container" style="padding-top: 10px; padding-bottom: 10px; border-radius: 10px;">
    <div class="row">
        <div id="instafeed-container"></div>
    </div>
</div>

For the CSS we will need to make the instafeed-container id a grid of 3x3 with each cell to have a high and width of 100px. You can of course change this to fit your need.

CSS

  
#instafeed-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#instafeed-container a {
    display: inline-block;
    padding: 5px;
}

#instafeed-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    grid-gap: 5px;
}

And for the JavaScript which is the part that is actually doing the hard work, we will use stevenschobert/instafeed.js which is doing a really great job and is easy to implement. So a big shout out to stevenschobert on GitHub. In the JavaScript code we include both his work from the JS file, and then a new instance of a Instafeed which is where will configure the connection with the access token. Just change YOUR_ACCESS_TOKEN to your own, and then it will take the images from your Instagram account.

JavaScript

  
<script src="https://cdn.jsdelivr.net/gh/stevenschobert/instafeed.js@2.0.0rc1/src/instafeed.min.js"></script>
<script type="text/javascript">
var userFeed = new Instafeed({
        get: 'user',
        limit: 9,
        target: "instafeed-container",
        resolution: 'low_resolution',
        accessToken: 'YOUR_ACCESS_TOKEN'
});
userFeed.run();
</script>

So the last part for you is just to figure out where on your website you want the Instagram feed to be.


Like what you see?


New C# Learning Area - Free!

Our website now offers a new section on C# theory, including code examples and related video tutorials.

ZetBit

Subscribe to ZetBits Newsletter