Instagram Feed App/Plugin for Webflow?

[Lucius_Blackheart]

Hi everyone,

I would like to add an instagram feed (row of images) above the footer of a website. Webflow Integrations for instagram link just goes to instagram’s help page which has nothing to do with webflow and instagram integrations. See here: Webflow integrations | Webflow University

Is there going to be a native app / plugin for this to make embeds of Instagram feeds possible in webflow? There are third party apps out there but their pricing and value offers doesn’t fit me. If anyone can provide suggestions would greatly appreciate it also.

Third Party Instagram Feeds I found in the forums:

Instagram Feed widget - ready code for embedding on any websites!

Additionally, what other easy ways or methods available to add feeds into your webflow website?

Thanks all,

R

[Lucius_Blackheart]

I also found this feed widget instagram: https://lightwidget.com/

But I can’t test it in webflow using the custom code container or embed tool as you need a full paid subscription to use it.

[jasper.lark]

I just tested the free lightwidget and code works nicely. Great thing about it is you only have to pay once for the upgraded version @ $10.

[Lucius_Blackheart]

Thanks for confirming Jasper. Unfortunately it’s very limited and not responsive friendly for mobile devices. Would prefer the image blocks to be reduced to a couple for narrow vertical displays.

R

[samliew (webflowexpert.com)]

1. Go to here Instagram Platform - Documentation - Meta for Developers

2. Create a new client

2b. If you get this error, install Google Chrome extension GitHub - PhilGrayson/chrome-csp-disable: Disable Content-Security-Policy in Chromium browsers for web application testing

(see https://groups.google.com/d/msg/recaptcha/YZiYRHPVgS4/MDScwO5OCQAJ)

3. After creating instagram app, manage and copy the CLIENTID and ACCESSTOKEN (secret) keys

4. Drop an embed code component on the page, give it ID instagram-feed

5. Paste custom code:

<script src="https://cdn.jsdelivr.net/gh/stevenschobert/instafeed.js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
  clientId: 'CLIENTID',
  accessToken: 'ACCESSTOKEN',
  target: 'instagram-feed',
  get: 'user',
  userId: 'INSTAGRAMUSERID',
  sortBy: 'none',
  links: true,
  resolution: 'thumbnail', // or low_resolution
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
  error: function() {
  	$('#instagram-feed').prev().addBack().hide();
  },
});
feed.run();
</script>

5b. Replace CLIENTID and ACCESSTOKEN values from the instagram app.

5c. Replace INSTAGRAMUSERID with your instagram user id.

[Lucius_Blackheart]

Thank you Sam,

I was able to get as far as embed code section but need to pay to get that tool working.

Do they have a 1 week trial to test a full version of webflow without restrictions to core functionalities? I need to see how this feed code works and appears on the website. If you have an examples please do share.

Thanks for that info!

R

[samliew (webflowexpert.com)]

@Lucius_Blackheart

Do they have a 1 week trial to test a full version of webflow without restrictions to core functionalities?

See if Webflow support can work out something for you:

support@webflow.com

[Lucius_Blackheart]

Thank you for your assistance!

[Lucius_Blackheart]

Hi Sam,

I can’t get this to work. Is the “Client Secret” the token? I’ve got my ClientID and InstagramUserID. Not sure about Access token.

R

[Lucius_Blackheart]

Got it to work. It was the token. I got the token by following this:

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

Fill in your CLIENT-ID and REDIRECT-URL you designated.

Then that’s going to the log in page , but the most important thing is how to get the access token after the user correctly logging in.

After the user click the log in button with both correct account and password, the web page will redirect to the url you designated followed by a new access token.

http://your-redirect-uri#access_token=ACCESS-TOKEN

Source: How to get an Instagram Access Token - Stack Overflow

[Lucius_Blackheart]

I got this to work but it’s not responsive in that it stacks the images to the bottom if the page is narrow. One way to offset is use a div container with absolute height value and set inside content to hidden so it hides the stack that moves to the new rows.

Anyone got a solution to make this responsive in webflow?

R

[samliew (webflowexpert.com)]

Yeah, I use the “The Nested Children Selector Hack” to style the link items.

You might want to set the instagram-feed to display flex, and wrap children as well.

[Lucius_Blackheart]

Thanks Sam. Now we are going into advance coding. I’ll have to take the time to understand this. Much appreciated for the info.

In the meantime, I used (https://lightwidget.com/) and just embeded the code feed near the footer. Looks great for anyone seeking a fast alternative solution.

Ray

[MortenRavnbo (Morten Ravnbö)]

I would strongly recommend Snapwidget instead! Easy and free (with several options, also facebook grid ++). Check https://snapwidget.com/
Had lightwidget earlier, but it stopped working and I had problems with updating when they started to demand payment for it…

[Noah-R (Noah Raskin)]

Lightwidget is responsive! You have to select the “Add” tab to set the breakpoints. I know it’s not clear but see the pics below.

[Lucius_Blackheart]

@Noah-R Thanks for catching that! Wow!

[Noah-R (Noah Raskin)]

@Lucius_Blackheart Anytime!

[forresto (Forrest Oliphant)]

@samliew

1. Go to here https://www.instagram.com/developer/clients/manage/

Note: Instafeed and other js-only^ solutions will stop working on December 18, according to Instagram’s developer page:

The following will be deprecated according to the timeline we shared previously:

• Public Content - all remaining capabilities to read public media on a user’s behalf on December 11, 2018

^ js-only, meaning no server required. Before now, a js library in your page could call these APIs and get public posts from public accounts. Now, Instagram and Facebook are requiring authentication to use these APIs, which means that libraries that don’t have a server-side component will stop working.

---

Though not ideal, 3rd party services like Snapwidget and Lightwidget will be your best bet.

---

EDIT! Instafeed, where the Instagram account owner makes their own client id, might work until 2020:

• Basic - to read a user’s own profile info and media in early 2020

[Noah-R (Noah Raskin)]

Good to know! Thank you!

[Diu]

@forresto

Instafeed, where the Instagram account owner makes their own client id, might work until 2020:

@samliew’s solution still works. Here’s a recent tutorial with links that work:

How to Get Instagram Access Token - Documentation

Make sure to change the valid redirect URL to generate the access token to:
https://oceanwp.org/instagram/

Good luck

Edit:
You are able to make it responsive by changing the template a little, by adding a class to the link and the image. See below:

Change the line in the HTML embed from:
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',

To
template: '<a href="{{link}}" target="_blank" class="agrama"><img src="{{image}}" class="igrami" /></a>',

You can then style class “agrama” and “igrami” as follows.

1. On a non-used page, add a link block, give it class name “agrama”. Style accordingly for each device.

2. Add an image, give it class name “igrami”. And style as you wish for each device.