How to Display Your Own Instagram Feed on Your Application

Updated photos below

Hi all, did some digging and saw some unresolved posts asking for help, so wanted to post a how-to. The below covers how to embed your OWN IG feed on your site. NOTE: This is an entirely different process from setting up a login for your users to let you access / display their IG feeds.

  1. Go to Instagram’s API page https://www.instagram.com/developer/

  2. Create your developer account and set up your bubble app

  3. Once you’ve set this up, click “Manage” on your app:

  4. Click on the “Security” tab. Change the website in the “Valid Redirect URIs” to your website address. Uncheck the “Disable implicit OAuth” box. Click “Update Client” at the bottom to save.

  5. Take the below url and replace “CLIENT-ID” with the client ID Instagram lists for your app. Replace “HTTPS://YOURWEBSITE.COM” with, well, your website. Paste it into a fresh browser page and press enter.

  1. You’ll go to a URL that reads like the below with a lot of numbers/letters at the end. Copy everything after access_token=[copy this text]
    The Craziest & Most Affordable Hosting Deal Ever!**

  2. Set up a new API Connector call as follows:
    In the GET box, enter:
    https://api.instagram.com/v1/users/self/media/recent/?access_token=**[youraccesstoken]**
    You don’t need any other info (headers, parameters, etc.) Test the call to make sure it works.

  1. On your app, create an RG. Set it up as follows. Type of Content is your API call with the word “data” on the end. Same exact name for Data Source.

Use standard resolution URL to pull the images.

And voila. You can Add text boxes below the images and pull captions etc. from the API.

More pics here:
https://ariasthompson.com/2018/02/08/adding-instagram-feed-website-without-plugin/

Hope this helps!
Jamie

14 Likes

Jamie, thanks for this!

I was hoping to find something like this where my users that logged in with OAuth could see or display their IG feeds on the page.

Any insight on how the above process changes and if this is possible?

Hi there, I haven’t done this myself but there is a link to a YouTube video that shows a similar process for LinkedIn and Giphy. That will be a good place to start to see the general process. It’s in this chain: Get photos from instagram business profile

3 Likes

Thank you so much for this! :heart_eyes:

1 Like

anyonw knows how I can display users instagram feed?
please help!

1 Like

Hello there,
@jamie Thank you for posting your hard work! :100: I tried to replicate the same steps but they have changed the rules a bit now, it has to be done on Facebook developer’s end and there is also an App Review process involved.

“The remaining Instagram Legacy API permission (“Basic Permission”) was disabled on June 29, 2020. As of June 29, third-party apps no longer have access to the Legacy API. To avoid disruption of service to your app and business, developers previously using the Legacy API should instead rely on Instagram Basic Display API and Instagram Graph API . Please request approval for required permissions through the App Review process.”

After reading up various posts on Stack overflow I found curator.io, sign up and there is a free plan which allows you to connect 3 social media accounts with HTML, then you can copy paste the HTML on your Bubble app!
It is honestly a BIG time saver versus getting it done on Fb developer end, access token, API , repeating group, workflow, etc. They also have different styles of feed/grid to choose from. Not affiliated in any way with curator.io but thought I would share this beneficial info with you, try it and you will know!

5 Likes

@jamie @emmawu1021 has anyone tried a repeating group with this new plugin below? Insta/Meta is changing all the time. I want to put posts in a repeating group, other users not just mine. Thanks for your solutions and experience:

Interesting plugin and thank you for this. Been trying to find a similar plugin that does exactly this. Only issue i have is you need to have access to the said IG account. I emailed the plugin owner/creator since i want to know what if you just want to pull the images from, lets say, 3 IG accounts. I just want to view them in a repeating group without saving them in bubble DB

Here’s how to copy the link for an Instagram post:-
Using the Instagram App:-

  1. Open the Instagram app on your phone.
  2. Find the post you want to copy the link for.
  3. Tap the three dots (…) in the top right corner of the post.
  4. In the menu that appears, select “Copy Link”.

This will copy the link to the post’s specific URL to your clipboard. You can then paste it anywhere you want, like a text message, email, or another app. More assistance below.
https://www.youtube.com/watch?v=BfL0nefDD-8&ab_channel=TheGeekPage