Display Instagram Posts on a Webpage with Instafeed.js (2020)

#instagram#web design#javascript#tutorial

Instafeed is a simple javascript plugin that enables you to add Instagram photos to your website.

Update

Instagram no longer supports this method to display posts on your webpage… the updated article and follow the steps required to get this to work.

You’ll need to register your website as an application with Instagram and get an Access Token before you start - Instagram has recently changed the process, but it is quite straight-forward, just follow the steps here.

You will need:

  1. A Facebook Developer account.
  2. An Instagram account.
  3. A published webpage - you can use Codepen for testing.
  4. The Postman app to perform cURL requests.

Create the Facebook App

  • Go to developers.facebook.com, click My Apps, and create a new app.
  • Select Build Connected Experiences from the menu.
  • Give you app a name, and add an email address.

Once you have created the app, navigate to Settings > Basic, scroll to the bottom of page, and click Add Platform.

Choose Website from the menu, add your website’s URL. I used a Codepen URL (https://codepen.io/matthewelsom/pen/YzGXxEP) for testing, you can change the platform or URL later.

Link Instagram Account

  • Go back to your app Dashboard, click Products +, and set up the Instagram Basic Display permissions.
  • Click the Create New App button at the bottom of the page.
  • Fill in the form as follows:

Display Name

Enter the name of the Facebook app you just created.

Client OAuth Settings

Enter your website’s URL.

In this example: https://codepen.io/matthewelsom/pen/YzGXxEP

Facebook may append a trailing forward slash when you save this form, please check this afetr saving.

Deauthorize

Enter your website’s URL again.

Data Deletion Requests

Enter your website’s URL again.

App Review

Skip this section, we will not be switching the app to Live mode.

Save your changes, then click the Add or Remove Instagram Testers button.

Add Instagram Testers

  • Scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.
  • In a new web browser window go to https://www.instagram.com/accounts/manage_access/, select the Tester Invites tab, and accept the request.

This will allow your Instagram account to be accessed by your app while it is in Development Mode.

Authenticate the Test User

  • Create an Authorization URL as below, you need to replace the {app-id} variable with your Instagram app ID - not the Facebook one!
  • Your {redirect-uri} must be exactly the same as the URL entered in the Client OAuth Settings.

(IMAGE HERE)

https://api.instagram.com/oauth/authorize
  ?client_id={app-id}
  &redirect_uri={redirect-uri}
  &scope=user_profile,user_media
  &response_type=code

Here is what my URL looks like…

https://api.instagram.com/oauth/authorize
  ?client_id=776301186285004
  &redirect_uri=https://codepen.io/matthewelsom/pen/YzGXxEP
  &scope=user_profile,user_media
  &response_type=code
  • Open a new browser window and load the Authorization URL, you will see an Authorization window with the name of your App.
  • Click ** Authorize**, to grant access to your media.
  • The page will redirect to the redirect URI you entered, it will be appended with a long Authorization Code that ends with a #_.
  • Copy the code without the #_ for use in the next step.

For example: https://codepen.io/matthewelsom/pen/YzGXxEP?code=AQDa4f...#_

This authorization code is a ‘short-lived’ code and only valid for one hour.

Exchange Code for Token

IGQVJYT2RubmVUT19rcHU0dnlXWlJ4Rk01R2Ric19oVlhPMTIxVW5MbW1LZAnJFZAkFHV1J1QlY5UUpHU0JkMVZAlVDQ3T1NVZAFBlaklPR1VTX1QxaGRLZAFVyTGxlVXVlQ2dmYkVacUx2SjZACQUwzUjJjZAgZDZD

Setup

I wanted to create an Instagram Feed on my About page - the feed would pull the latest Images with respective URLs from my IG account, I also wanted to show the Like count and Comment count to go with each image.

I decided to use a jekyll include to templatize the feed; that basically means the feed code is seperated form my page code making it easier to update or relocate at a later date.

The include used on my About page:

{% include instafeed.html %}

Installation

  • To start, download the Instafeed.js plugin from Github and include it in your website assets
  • Above the script add <div id="instafeed"></div>, the plugin will automatially look for this element and fill it with your thumbnails.
  • Add a link to the instafeed.html file:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
  • Lastly, we need to add a script that tells the plugin to pull my photos and respective information:
    • userId: This is your unique user identifier, you can check yours here.
    • clientId: Follow this post to get your Client ID.
    • accessToken: Follow this post to get your Access Token.
    • resolution: Controls the size of the image returned - standard_rsolution is the largest size at 612x612px.
    • template: See below.
    • sortBy: Sort the images in a set order.
    • limit: Maximum number of images to display; Note that if your application has not been approved by Instagram the limit is always 20.
    • links: Automatically wrap images with a link to Instagram.
<script type="text/javascript">
  var userFeed = new Instafeed({
    get: 'user',
    userId: '8987997106',
    clientId: '924f677fa3854436947ab4372ffa688d',
    accessToken: '8987997106.924f677.8555ecbd52584f41b9b22ec1a16dafb9',
    resolution: 'standard_resolution',
    template: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /><span>{{likes}}{{comments}}</span></a>',
    sortBy: 'most-recent',
    limit: 32,
    links: false
  });
  userFeed.run();
</script>

Adding a Template

The template function allows you to customise the output for each image. A full list of template options are available here.

For my template I wrapped each image inside an <a> tag that linked to the original photo (in a blank window), and included the Like and Comment scores for each photo.

If you are building your site in Jekyll make sure you wrap your template with the {% raw %} and {% endraw %} tags - this prevents the liquid language from being interupted by Jekyll.

Demo

Here is a sample feed, it shows my last 4 Instgram posts

See the Pen Sample Instagram Feed with Instafeed.js by Matthew Elsom (@matthewelsom) on CodePen.

Update: User Details

Update: 11 Aug 2016

This article has been updated to include a method to show ‘user details’ in each post.

Need to show your user details? You can use the {{model.user}} fuction to do that.

  • Username: {{model.user.username}}
  • Profile Picture: {{model.user.profile_picture}}
  • Full Name: {{model.user.full_name}}

See the Pen Sample Instagram Feed with Instafeed.js with User Details by Matthew Elsom (@matthewelsom) on CodePen.