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!

Display Instagram feed on 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.

  1. Retrieve long-lived access token.
  2. Use our PHP code to display your Instagram feed.
  3. Use our CSS code to make the display look good.
  4. View our output.

Retrieve your long-lived access token

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.

  1. Create a Facebook developer account. Create your Facebook developer account here. Then, you also need to create a Facebook application here.
  2. Configure Instagram's basic display API. Instagram's documentation is good enough, and I don't want to repeat the exact same instructions here. Follow the guide here.
  3. Get your long-lived access token. By default, Instagram API will give you a short-lived access token that 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.

Use our PHP code to display your Instagram feed

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>"
?>

Use our CSS code to make the display look good

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

View our output

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.

Display Instagram feed using a website plugin

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.

Step-by-step guide

Follow the steps below to display your Instagram feed using a website plugin.

  1. Sign up for SociableKIT. You will be logged in automatically after you enter your email address.
  2. Create a new solution. Select "Instagram feed" on the drop-down. Enter your Instagram username.
  3. Click the Next button. It will show the customization options like layouts, colors, and more. Click the Save changes button.
  4. Copy embed code. On the upper right, click the "Embed on website" button. Copy the embed code.
  5. Paste on your website. Create a new page or edit an existing page on your website. Paste the embed code where you want the Instagram feed to appear.

Using SociableKIT, you can also display Instagram reels, Instagram hashtag feed, Instagram stories, and more on your website.

Output

Your Instagram feed using SociableKIT can look like the following.

Example Instagram feed #1
Example Instagram feed #2

What’s Next?

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?

What students say?

Don't just take our word for it. See what our students have to say about our tutorials and source codes. We are proud to have helped many individuals and businesses to build their own applications. Here are a few of the testimonials from our satisfied students.

★★★★★ “Wow, I love you guys! The best web programming tutorial I’ve ever seen. So comprehensive, yet easy to follow. I love how you combine all necessary elements in such a neat structure.” ~ Olaug Nessa

★★★★★ “The fact that you’ve put it all together saves so much time and its worth buying the code. Makes me feel good supporting a developer like yourself. Keep up the good work!” ~ Dan Hudson

★★★★★ “Thanks for making these awesome tutorials! I bought your source codes. To be honest, it’s very readable code and helps me understand a lot of things and how it’s done in PHP. Thanks for that again.” ~ Michael Lammens

★★★★★ “Hey Mike, my name is Leonardo from Argentina. I’ve been reading your blog since like 4 months from now, and I really must say: your tutorials are very good, they has helped me in many of my works… Well, thank you very much man. I really admire your work.” ~ Leonardo

★★★★★ “Words can’t express how grateful I am for the work and the articles you post, had some troubles with doing somethings but your articles as per usual hit the hammer right on the head. They are a great way for expanding upon later too!” ~ Jeremy Smith

Got comments?

At codeofaninja.com, we strive to provide our readers with accurate and helpful Display Instagram Feed on your website using PHP Your feedback is essential in helping us achieve this goal.

If you have encountered any issues with the code, have suggestions for improvement, or wish to provide praise, we welcome you to leave a comment below. Please be as descriptive as possible to address your concerns effectively and include any relevant error messages, screenshots, or test URLs.

We request that comments remain on-topic and relevant to the article above. If your question or comment pertains to a different topic, we recommend seeking assistance elsewhere.

Furthermore, we ask that you review our code of conduct before commenting to ensure that your feedback is constructive and respectful.

Thank you for taking the time to provide feedback and for supporting codeofaninja.com. Your contributions help us improve our tutorials and serve the developer community better.

Subscribe for FREE!

Improve your web development skills and stay ahead of the competition by subscribing to our tutorial series. Sign up for FREE and access exclusive, cutting-edge content delivered straight to your inbox.

Take advantage of the chance to elevate your skills and advance your web development career. Subscribe now.

Thank You!

We hope you've found our Display Instagram Feed on your website using PHP helpful and informative. We understand that learning new programming concepts can be challenging, but we're glad we could make it easier for you.

Thank you for choosing to learn with us and for supporting codeofaninja.com! Consider sharing this tutorial with your friends and colleagues who may also be interested in learning about Display Instagram Feed on your website using PHP

The more people know about our tutorials, the more we can help the developer community grow. Keep learning, keep coding, and keep growing as a developer. We can't wait to see what you'll create next!

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.