How to Display an Instagram Feed with Images and Videos in WordPress Using the API

Instagram is one of the most powerful social media platforms for engaging with audiences. Displaying your Instagram feed on your WordPress website can boost engagement, showcase your latest posts, and enhance your website’s visual appeal. In this guide, we will show you how to integrate an Instagram feed in WordPress using the Instagram Graph API without any third-party plugins.

---

Step 1: Get Your Instagram API Access Token

Before fetching Instagram posts, you need an Access Token from Instagram. Follow these steps to get your API token:

1.1 Create a Facebook App

Since Instagram is part of Meta, you need to create a Facebook app:

1. Go to the Meta for Developers website.
2. Click on “My Apps” and then “Create App.”
3. Choose “For Business” and select “None” under the type selection.
4. Enter your app name and contact email.

1.2 Connect Instagram Account

1. In your newly created app, navigate to “Instagram Basic Display.”
2. Click “Create New App” under the Instagram Basic Display section.
3. Set up permissions to allow access to media, profile, and email.
4. Generate a long-lived access token by following the prompts.

---

Step 2: Add the Instagram Feed Shortcode in WordPress

Now that you have your Instagram API token, let’s create a custom shortcode to display Instagram posts with images and videos.

2.1 Add the Following Code to Your WordPress Theme

Open your functions.php file or create a custom plugin and paste the following PHP code:

function fetch_instagram_feeds_with_api($atts) {
    // Extract shortcode attributes
    $atts = shortcode_atts(['token' => '', 'limit' => 5], $atts);
    $token = sanitize_text_field($atts['token']);
    $limit = intval($atts['limit']);

    // Instagram API URL
    $url = "https://graph.instagram.com/me/media?fields=id,caption,media_url,thumbnail_url,permalink,media_type&access_token={$token}&limit={$limit}";

    // Fetch Instagram data
    $response = wp_remote_get($url);

    if (is_wp_error($response)) {
        return "Error fetching Instagram feed.";
    }

    $data = json_decode(wp_remote_retrieve_body($response), true);

    if (!isset($data['data'])) {
        return "Unable to fetch Instagram data.";
    }

    // Output HTML structure
    $output = '<div class="instagram-feed">';
    foreach ($data['data'] as $post) {
        $media_url = isset($post['media_url']) ? esc_url($post['media_url']) : '';
        $caption = isset($post['caption']) ? esc_html($post['caption']) : '';
        $permalink = isset($post['permalink']) ? esc_url($post['permalink']) : '#';
        $media_type = isset($post['media_type']) ? $post['media_type'] : 'IMAGE';

        $output .= '<div class="instagram-post">';
        $output .= "<a href='{$permalink}' target='_blank'>";

        if ($media_type === 'VIDEO') {
            // Embed video
            $output .= "<video controls style='width: 100%;'>
                          <source src='{$media_url}' type='video/mp4'>
                          Your browser does not support the video tag.
                        </video>";
        } else {
            // Default image display
            $output .= "<img src='{$media_url}' alt='Instagram Post' style='width: 100%;'>";
        }

        $output .= "</a>";
        $output .= "<p>{$caption}</p>";
        $output .= '</div>';
    }
    $output .= '</div>';

    return $output;
}

// Register the shortcode
add_shortcode('instagram_feed_api', 'fetch_instagram_feeds_with_api');

Step 3: Use the Shortcode to Display Instagram Feeds

After adding the function above, use the following shortcode anywhere in your posts, pages, or widgets, create token here:

plaintextCopyEdit[instagram_feed_api token="YOUR_ACCESS_TOKEN" limit="6"]

Shortcode Parameters:

• token – Your Instagram API Access Token.
• limit – The number of Instagram posts to display (default is 5).

---

Step 4: Style the Instagram Feed with CSS

For a clean design, add the following CSS to your WordPress theme’s style.css file:

cssCopyEdit.instagram-feed {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.instagram-post {
    max-width: 300px;
}

.instagram-post img,
.instagram-post video {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

---

Step 5: Test and Optimize Your Instagram Feed

1. Test on Different Devices: Ensure that the images and videos display properly on both desktop and mobile.
2. Cache the API Response: Since Instagram API requests have limits, consider caching the response to reduce server requests.
3. Use Lazy Loading: If you have many Instagram posts, use lazy loading for better performance.

---

Benefits of Using This Instagram Feed Solution

✅ No Third-Party Plugins – No need for extra plugins that may slow down your website.
✅ Automatically Updates – The shortcode dynamically fetches the latest posts.
✅ Full Control – You can modify the display and functionality as needed.
✅ SEO-Optimized – Adding fresh content from Instagram improves engagement and SEO.

---

Final Thoughts

Adding an Instagram feed with images and videos to your WordPress site enhances its visual appeal and keeps content fresh. By following this step-by-step guide, you can successfully integrate an Instagram feed without relying on plugins.

If you have any questions or need help with implementation, feel free to ask in the comments below! 🚀