Instagram Feed App/Plugin for Webflow?

Lucius_Blackheart · October 31, 2018, 9:50pm

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:

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

Thanks all,

R

Lucius_Blackheart · October 31, 2018, 10:16pm

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 · October 31, 2018, 10:36pm

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 · October 31, 2018, 11:58pm

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 · November 1, 2018, 12:18am

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)

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.

Lucius_Blackheart · November 1, 2018, 12:39am

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 · November 1, 2018, 12:43am

See if Webflow support can work out something for you:

support@webflow.com

Lucius_Blackheart · November 1, 2018, 12:44am

Thank you for your assistance!

Lucius_Blackheart · November 1, 2018, 5:43pm

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 · November 1, 2018, 6:03pm

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 · November 1, 2018, 6:42pm

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 · November 1, 2018, 10:15pm

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 · November 2, 2018, 12:54am

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 · November 6, 2018, 7:47am

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 · November 6, 2018, 8:20am

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 · November 9, 2018, 2:43am

@Noah-R Thanks for catching that! Wow!

Noah-R · November 10, 2018, 10:48am

@Lucius_Blackheart Anytime!

forresto · November 29, 2018, 9:29pm

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 · November 30, 2018, 11:58am

Good to know! Thank you!

Diu · January 3, 2019, 3:45pm

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

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.

On a non-used page, add a link block, give it class name “agrama”. Style accordingly for each device.
Add an image, give it class name “igrami”. And style as you wish for each device.