Streaming live at 10am (PST)

Instagram Feed App/Plugin for Webflow?


#1

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: https://university.webflow.com/integrations

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:

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

Thanks all,

R


#2

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. :frowning:


#3

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.


#4

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


#5

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

2. Create a new client

2b. If you get this error, install Google Chrome extension https://github.com/PhilGrayson/chrome-csp-disable

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

Screenshot_2018-11-01_111140

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

Screenshot_2018-11-01_111122%20(2)

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

Screenshot_2018-11-01_111124

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.


#6

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


#7

See if Webflow support can work out something for you:

support@webflow.com


#8

Thank you for your assistance!


#9

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


#10

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: https://stackoverflow.com/questions/16496511/how-to-get-an-instagram-access-token


#11

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


#12

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.


#13

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


#14

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…


#15

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.


#16

@J_Canan Thanks for catching that! Wow! :heart_eyes:


#17

@Lucius_Blackheart Anytime! :slight_smile: