Instafeed

index.html

<!-- access token service -->
<script src="https://dompascal-instafeed.herokuapp.com/token.js"></script>

<!--  instafeed.js library (dont use in production) -->
<script src="https://cdn.jsdelivr.net/gh/stevenschobert/instafeed.js@2.0.0rc1/src/instafeed.min.js"></script>

<h1>Instagram Feed with basic display API</h1>
<div id="instafeed">instagram feed</div>

<script type="text/javascript">
  var feed = new Instafeed({
    target: 'instafeed',
    accessToken: InstagramToken,
    limit:10,
    template: '<a href="{{link}}"><img title="{{caption}}" src="{{image}}" alt="{{caption}}" /></a>'
  })
  feed.run()
</script>

instafeed.markdown

Instafeed

A Pen by Dominic Pascal on CodePen.

License.

Using the instafeed.js library: https://github.com/stevenschobert/instafeed.js

Requirements

• Facebook Developer Account
• Public Instagram account with image posts
• Heroku acount (needed to setup access token service)

Setup

To connect to the API, you need to create a FB app with the "Instagram basic API" product and access token. The access tokens generated from instragram will expire, we will use a token service to make sure your tokens are refreshed and dont expire.

FB APP

1. Login into FB developer account at https://developers.facebook.com/apps/ and create a app
2. During app setup, add the "Instagram Basic Display API" product
3. In the "Basic Display API" setup add a "Instgram Tester" role
4. Assign to the Instragram account you want to use for the feed (It needs to be a public account)
5. After adding the test user login into https://www.instagram.com/accounts/manage_access/ with that account and select the "Test Invites" tab and accept
6. Now return to the FB app sectup and scroll down to the "User Token Generator" section and clck "generate token"
7. This is your access token thats needed to authenticate with the API

Access Token Service

The service will be hosted on Heroku for free, go to https://heroku.com/deploy to create the service.

Check out this guide for more info: https://github.com/companionstudio/instagram-token-agent

Once the token service has been deployed you can check the status of the dynamic token here: https://{your-app-name}.herokuapp.com/. The access token can be accessed by js and json in the urls below:

• https://{your-app-name}.herokuapp.com/token.js
• https://{your-app-name}.herokuapp.com/token.json

Updating the JS

Once you have your access token verified and working, you will need to update the below block in the JS.

<!-- access token service -->
<script src="https://{your-app-name-here}.herokuapp.com/token.js"></script>

style.css

* {
  box-sizing: border-box;
  font-family: sans-serif
}

h1, footer {
  max-width: 64rem;
  margin: 2rem auto;
}

#instafeed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  max-width: 64rem;
  margin: auto;
}

#instafeed a {
  display: block;
}

#instafeed img {
  display: block;
  width: 100%;
}