Display Instagram Feed on your website using PHP
Previously, we learned how to display Facebook page posts feed on your website using PHP.
Today, our tutorial will explore integrating Instagram into your website by displaying your Instagram feed using PHP. This can be a great way to showcase your content and keep your website visitors engaged with your brand.
Using PHP, we can easily connect to the Instagram API and retrieve your latest posts, allowing them to be displayed on your website. Any new content you upload to Instagram will automatically appear on your website, saving you the hassle of manually updating your website every time you post something new.
Following this tutorial can bring your Instagram content to your website, providing your audience with a seamless browsing experience and keeping them updated with your latest content. So, let’s dive in and start displaying your Instagram feed on your website using PHP!
We will use the official Instagram Basic Display API. This API allows users to read basic profile information, photos, videos, and albums of the connected account.
Here are the steps to display the Instagram feed on a website using PHP.
The long-lived access token is like a key that you will use to retrieve your Instagram photos and videos programmatically. You will use this token on our PHP code later.
Once you get your long-lived access token, use it as the value of the $token variable below. The code below will allow you to display the list of posts
<?php
// query the user media
$fields = "id,caption,media_type,media_url,permalink,thumbnail_url,timestamp,username";
$token = "your_long_lived_user_access_token";
$limit = 10;
$json_feed_url="https://graph.instagram.com/me/media?fields={$fields}&access_token={$token}&limit={$limit}";
$json_feed = @file_get_contents($json_feed_url);
$contents = json_decode($json_feed, true, 512, JSON_BIGINT_AS_STRING);
echo "<div class='ig_feed_container'>";
foreach($contents["data"] as $post){
$username = isset($post["username"]) ? $post["username"] : "";
$caption = isset($post["caption"]) ? $post["caption"] : "";
$media_url = isset($post["media_url"]) ? $post["media_url"] : "";
$permalink = isset($post["permalink"]) ? $post["permalink"] : "";
$media_type = isset($post["media_type"]) ? $post["media_type"] : "";
echo "
<div class='ig_post_container'>
<div>";
if($media_type=="VIDEO"){
echo "<video controls style='width:100%; display: block !important;'>
<source src='{$media_url}' type='video/mp4'>
Your browser does not support the video tag.
</video>";
}
else{
echo "<img src='{$media_url}' />";
}
echo "</div>
<div class='ig_post_details'>
<div>
<strong>@{$username}</strong> {$caption}
</div>
<div class='ig_view_link'>
<a href='{$permalink}' target='_blank'>View on Instagram</a>
</div>
</div>
</div>
";
}
echo "</div>"
?>
Here’s the CSS code I used with the code above.
.ig_feed_container{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.ig_post_container{
border: 2px solid #f1f1f1; margin-bottom:25px; margin-left:3%; width:20%; height:550px; float:left;
}
.ig_post_container img{
width:100%;
}
.ig_post_container .ig_post_details{
padding:15px;
}
.ig_post_container .ig_view_link{
margin-top:10px;
}
The output will look like the following.
We will also cover using a website plugin to achieve the same output. This is best for people who do not want to code. Continue reading below.
If you do not want to code, use a “no-code” approach. You can use website plugins like SociableKIT. Follow this tutorial: embed your Instagram feed on your website. You can use its free plan if you do not need the premium features.
Follow the steps below to display your Instagram feed using a website plugin.
Using SociableKIT, you can also display Instagram reels, Instagram hashtag feed, Instagram stories, and more on your website.
Your Instagram feed using SociableKIT can look like the following.
Today we have learned how to show your Facebook page events on your website. Did you know that you can also display a Twitter feed on your website?
Let us go to the next tutorial: How to display a Twitter feed on website?
[adinserter block=”3″]