Home Basic PHP library to retrieve an Instagram profile feed

PHP library to retrieve an Instagram profile feed

0

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.

PHP library to retrieve an Instagram profile feed

Provide your App details.

PHP library to retrieve an Instagram profile feed


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

PHP library to retrieve an Instagram profile feed


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

PHP library to retrieve an Instagram profile feed


Scroll down and click on the Add Platform button.

PHP library to retrieve an Instagram profile feed


Select the platform Website.

PHP library to retrieve an Instagram profile feed


Enter your Site URL and save changes.

PHP library to retrieve an Instagram profile feed


Instagram Basic Display API

Now it is time to authorize your instagram account.

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

PHP library to retrieve an Instagram profile feed


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

PHP library to retrieve an Instagram profile feed


Add Instagram testers.

PHP library to retrieve an Instagram profile feed


Enter your Instagram username and select your profile.

PHP library to retrieve an Instagram profile feed


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

PHP library to retrieve an Instagram profile feed


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.

PHP library to retrieve an Instagram profile feed


Login and authorize the App.

PHP library to retrieve an Instagram profile feed


Click on I Understand checkbox and copy the generated token.

PHP library to retrieve an Instagram profile feed


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:

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

ArgumentTypeDescriptionOptionalDefault value
tokenstringYour Instagram Basic Display long-lived-access-token.No
pathstringThe path where the updated file will be saved on your server.Yesig_token
filenamestringThe name of the file in which the date of the last token update will be stored.Yesupdated.json

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:

KeyDescription
usernameInstagram username.
permalinkInstagram post permalink.
timestampInstagram post timestamp.
captionInstagram post caption.
idInstagram post identifier.

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exit mobile version