Intafeed.js on Webflow

Design help Custom code
1

Hi,
I am new to coding and have been using Webflow a good amount lately to get websites up-and-running quickly. My current project is looking to create blocks that link to a specific Instagram feed and display the latest images from it. I found a javascript library that allows me to do this here: http://instafeedjs.com/.
I downloaded the instafeed.js and uploaded it to dropbox where I copied the link to it and changed the dropbox link according to this tutorial: http://webflowcodestutorials.webflow.io/tips
I then added an embed element to my site with the following code:

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/oupwsjsq7waertg/instafeed.min.js?dl=0"><
var userFeed = new Instafeed({
        get: 'user',
    	userID: '[MY USER ID]',
        accessToken: '[MY ACCESS TOKEN]'
    });
    userFeed.run();
</script>
<div id="instafeed"></div>

Nothing is showing up on my page. I also tried putting the javascript in the section of the website in the Custom Code section and then embedding an item with code:

Help! What have I done wrong?

Any advice would be greatly appreciated. Thank you so much!

2

Please post your published URL and public share link when asking for help. Thank you.

3

Of course here is the published site: http://loft-987f15.webflow.io/ and the share link: https://preview.webflow.com/preview/loft-987f15?preview=805fd14696eeeffdc0a49d41f2f2fa3b

4

userId has a lowercase d

You also need to setup an app, and get a clientId and accessToken. Here is an example:

var userFeed = new Instafeed({
  get: 'user',
  userId: 979633571,
  clientId: '8158c75860824862ad084cb4c2d7c306',
  accessToken: '979633571.8158c75.d15d6af33b124155997a0458a6207c4e'
});
userFeed.run();

Demo: http://fixxstaging.com/sqrooms/about/

Google “How to get an Instagram clientId” and “How to get an Instagram accessToken”.

5

Thanks samliew! I had the user Id in there and the access token but no client Id. I’ve added that in and it still isn’t working. Here’s the verbatim embed code:
`

`
6

You cannot wrap JS code in an external source. Split them into two script tags.

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/oupwsjsq7waertg/instafeed.min.js?dl=0">
</script>

<script>
var userFeed = new Instafeed({
  get: 'user',
  userId: '2212704808',
  clientId: '03a4bc563b2a45ae81d6bdb1c3fb1274',
  accessToken: '201168543.03a4bc5.be0b3caf2d904995a0c59c4c7a755a9e',
});
userFeed.run();
</script>
7

have you tried snapwidget.com ?

1 Like