For this example, we will be using Glide.js, which will help us display our Instagram feed as slides on our website.
Install using Composer:
composer require yizack/instagram-feed
Crate a new PHP file with the content of feed.php.
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>
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.
Visit the demo on instagram-feed.yizack.com/demo.