How to display Instagram Feed on your website using PHP or JavaScript?

Are you looking for a way to display Instagram feed on your website? You probably upload photos, videos, and albums on your Instagram account. And, you have a website as well. Am I right? If that is the case, then it is a good idea to display your Instagram posts on your website!

This is a great way to increase your Instagram followers and engage them in your brand. Today I'm going to show you how to display publicly available Instagram feed on your website using PHP or JavaScript.

3 ways to display Instagram feed on website

I've found out that there are three ways to display Instagram feed on your website. They are the following.

  1. Using the official Instagram API.
  2. Using an alternative API.
  3. Using a website plugin.

I will show you the code how to use those three. Let's dive in!

#1 Using the official Instagram API

On the official documentation, they call this the Instagram Basic Display API. This API allows users to read basic profile information, photos, videos, and albums of the connected account.

  1. Create a Facebook developer account. After you created a developer account, you need to create a Facebook application in the same interface. You can create a Facebook developer account and a Facebook application here.
  2. Configure Instagram's basic display. I think Instagram's documentation is good enough and I don't want to repeat the same instructions here. Follow their getting started guide here.
  3. Get your long-lived access token. By default, Instagram API will give you a short-lived access token which is valid only for 24 hours. If you get your long-lived access token, it will be valid for 60 days. Learn how to get a valid long-lived access token here.

PHP code

Once you got 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>"
?>

CSS code

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;
}

Output

The output will look like the following.

JavaScript Code

I don't recommend using the direct JSON feed URL with JavaScript code. This will easily reveal your long lived access token in the client side or in any user's browser. If you really want to use JavaScript, I suggest you create your own JSON feed on your server first. Then, you use that JSON feed on your JavaScript code.

Another options is to use a JSON feed from an alternative API. This method will never reveal your private or long-lived access token in any browser.

Do you want less work?

If you think following the Instagram documentation is hard and confusing because there are so many steps to follow and their API changes frequently, you can use an alternative API or a website plugin. This will save you a lot of time and remove headaches.

You don't need to deal with a broken data feed because of an Instagram API update. Disclaimer: The suggested products below, AccentAPI and SociableKIT, are developed by my company Codalify Software Development.

#2 Using an alternative API

To get your Instagram account's data feed, you can use an alternative API like AccentAPI.

What are the advantages of using AccentAPI over the official API?

There are data that the official Instagram API will not give you. AccentAPI will give you those missing data. Also, AccentAPI provides an easy-to-use API, tutorials, and human support. See the comparison table below.

FeaturesAccentAPIOfficial Instagram API
Post likes countYESNO
Post comments countYESNO
Profile biographyYESNO
Profile follower countYESNO
Profile following countYESNO
Profile website URLYESNO
Easy-to-use APIYESNO
Easy-to-follow tutorialYESNO
Human chat & email supportYESNO

How to display Instagram feed using PHP?

You need to get your own data feed URL from AccentAPI. Once you have that link, you can use it with the following PHP code.

<?php 
// query the user media
$limit = 10;
$json_feed_url="https://app.accentapi.com/api/instagram/feed?username=coolest.buildings&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>"
?>

How to embed Instagram feed using JavaScript?

If you want to use JavaScript, here is the code.

Coming soon!

CSS code

The following is the CSS code I used for both the PHP and JavaScript 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;
}

How to get the link to your Instagram data feed?

  1. You may pay using this link. Pricing is only $2/month, billed annualy.
  2. Once your payment is received, within 24 hours, our AccentAPI team will reply with a link to your data feed.
  3. We offer a 7-days money-back guarantee.

#3 Using a website plugin

If you do not want to code, use a "no-code" approach. You can use website plugins like SociableKIT.

What are the advantages of using SociableKIT over the AccentAPI?

SociableKIT have many of AccentAPI's great set features like easy-to-follow video tutorials and human chat and email support, and more. See the comparison table below.

FeaturesSociableKITAccentAPI
No need to learn PHP, JavaScript, or CSS.YESNO
Copy a single line of code and paste it on your website.YESNO
Responsive. Your Instagram feed will look great on mobile, tablet, or desktop.YESNO
Easily change the look & feel using lots of customization options.YESNO
Carousel layout, grid layout, lightbox, pop-up options, and more.YESNO
Use Instagram feed, Facebook posts feed, and more in one place.YESNO

How to use SociableKIT?

The following are the steps that you need to take.

  1. Sign up and log in to SociableKIT.
  2. Create a new solution. Select "Instagram feed" on the drop-down.
  3. Enter your Instagram username and click the Next button.
  4. It will show the customization options like layouts, colors, and more.
  5. Click the Save changes button. On the upper right, click the "Embed on website" button.
  6. Copy the code and paste it on your website.

Click here to see an Instagram feed made with SociableKIT.

SociableKIT offers a 7-days free trial. Their pricing is $4/feed/month if you buy 5 feeds. $2.50/feed/month if you buy 10 or more feeds. $8/month if you buy only one feed.

Thank you!

Thank you for learning from CodeOfaNinja! I hope you learned how to add, display, or embed Instagram feed on your website.

Before you write a comment, please read this guide and our code of conduct.