PHP library to retrieve an Instagram profile feed, embed the feed of your authorized Instagram accounts on your website. The library uses the Instagram Basic Display API with auto-refreshing access token support.

Requirements Guide

PHP Hosting

You can use any PHP Hosting unless it does not support fopen().

Meta Developer App

In order to use the Instagram API, we must first create a Meta App. Follow the steps below to create a Meta App.

Go to Meta for Developers site, login and create App. Select the app type as None.

Provide your App details.

Look for Instagram Basic Display product, and click on Set up to use the Instagram API.

Scroll down until you see an alert and click on Settings to update your App settings.

Scroll down and click on the Add Platform button.

Select the platform Website.

Enter your Site URL and save changes.

Instagram Basic Display API

Now it is time to authorize your instagram account.

Back to Products > Instagram > Basic Display. Create new App.

Fill OAuth Redirect, Deauthorize Callback and Data Deletion Request URL with your site URL and save changes.

Add Instagram testers.

Enter your Instagram username and select your profile.

Go to your Instagram account settings page > App and Websites > Tester invites, accept the invite.

Back to Products > Instagram > Basic Display > User Token Generator, you Instagram account should appear in the list, then click Generate Token button for authorize and generate long-lived access token for Instagram.

Login and authorize the App.

Click on I Understand checkbox and copy the generated token.

Paste your token in your code.

Installation

To install the library, make sure you have Composer installed and using your command terminal run the following:

composer require yizack/instagram-feed

Use

Installing this library will allow you to use the InstagramFeed class by simply importing the composer autoload.

Import the composer autoload, use the namespace Yizack\InstagramFeed and initialize the InstagramFeed object.

require "vendor/autoload.php";
use Yizack\InstagramFeed;

$feed = new InstagramFeed(
  "long-lived-access-token" // Paste your long-lived-access-token here
);

To retrieve your Instagram feed array use the getFeed() function.

$array = $feed->getFeed();

Or loop it directly in a foreach method wherever you need it.

foreach ($feed->getFeed() as $value) {
    // your code
}

About the code

InstagramFeed constructor arguments

getFeed() function

Updates the date of the last token update and requests feed data from an Instagram account.

Returns an array with the data of the last 25 posts with the following data for each one:

Long-Lived Access token

This approach uses Long-Lived Access Tokens obtained by authorizing your Instagram account with your Meta App.

Since Long-lived tokens are valid for 60 days and can be refreshed as long as they are at least 24 hours old and not expired, the getFeed() method will refresh your token everytime it is been called if 24 hours have passed.

Tokens that have not been refreshed in 60 days will expire and can no longer be refreshed, so be sure to visit often the site where you placed the feed.

Instagram feed Example

For this example, we will be using Glide.js, which will help us display our Instagram feed as slides on our website.

Feed page

Crate a new PHP file with the content of feed.php.

Feed page on your website

Use the code below, replace http://your-site.com/feed.php with your site URL and paste it on your site where you want your Instagram feed to appear.

<iframe style="border: none;height: 100vh" src="http://your-site.com/feed.php" width="100%"></iframe>

About the code

Paste here your Instagram Basic Display API long-lived access token.

<?php
require "vendor/autoload.php";
use Yizack\InstagramFeed;

$feed = new InstagramFeed(
  "long-lived-access-token" // Your long-lived-access-token
);
?>

This code section will loop the post(...) method for each Instagram post found and adds a slide for each one.

<div class="glide__track" data-glide-el="track">
  <ul class="glide__slides">
<?php
foreach($feed->getFeed() as $value) {
    $username = $value["username"];
    $permalink = $value["permalink"];
    $timestamp = $value["timestamp"];
    $caption = "";

    if(isset($value["caption"])) {
      $caption = $value["caption"];
    }

?>
    <li class="glide__slide">
        <div class="instagram-wrapper"><?= post($username, $permalink, $caption, $timestamp); ?></div>
    </li>
<?php
}
?>
      
  </ul>
</div>

HTML Glide.js slide arrows.

<div class="glide__arrows" data-glide-el="controls">
  <span class="glide__arrow glide__arrow--left" data-glide-dir="<">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
    </svg>
  </span>
  <span class="glide__arrow glide__arrow--right" data-glide-dir=">">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
    </svg>
  </span>
</div>

Page and Glide.js arrows CSS styling in <head>.

<style>
  html, body {
    height: fit-content;
    overflow-y: hidden;
    overflow-x: hidden;
    background: transparent;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
  }
  
  .instagram-wrapper {
    background: white;
    border-radius: 11px;
    border: 1px solid rgb(219, 219, 219);
    overflow: hidden;
    width: 90%;
    margin: auto;
    max-height: 100%;
  }

  .glide__arrow {
    position: absolute;
    display: block;
    padding: 10px;
    cursor: pointer;
    background: #fff;
    border-radius: 100%;
    border-style: solid;
    color: #262626;
    border-color: #dbdbdb;
  }

  .glide__arrow:hover {
    background: #262626;
    border-style: solid;
    color: #fff;
    border-color: #dbdbdb;
  }

  .glide__arrow--right {
    top: 300px;
    right: 0px;
  }

  .glide__arrow--left {
    top: 300px;
    left: 0px;
  }
  
  .instagram-media {
    border-radius: 3px!important;
    border: 0!important;
    box-shadow: none!important;
    display: block!important;
    min-width: 0!important;
    margin: auto!important;
    margin-bottom: -54px!important;
    width: 100%!important;
    position: relative;
    top: -54px;
  }
</style>

Javascript Glide.js code settings.

<script>
  new Glide(".glide", {
    perView: 3,
    bound: true,
    breakpoints: {
      968: {
        perView: 2
      },
      630: {
        perView: 1
      }
    }
  }).mount();
</script>

Inside post(...) method, there is a HTML <blockquote> code that is provided by instargam when you want to embed a post. I added the argument values of $username, $permalink, $caption, and $timestamp to match each post.