How to Integrate Instagram Feed on Your Website Using API | 2025

How to Integrate Instagram Feed Using API

Ever wondered how to integrate Instagram feed into your website without breaking a sweat? ???? You’re not alone! Displaying your latest ‘grams right on your site not only boosts engagement but also keeps things fresh and social. In this guide, we’ll walk through how to integrate Instagram feed using API into website (yes, even into your WordPress site!), with simple steps, real code snippets, and tips to make it SEO-friendly. Ready? Let’s dive in!

1. Why Use the Instagram API?

• Dynamic Updates: Unlike static embeds, an API-based feed auto-refreshes as you post—no manual copy-pasting needed!
• Customization: Control layout, styling, and which posts to show (e.g., filter by hashtag or media type).
• Performance: Fetch only the data you need (thumbnails, captions), reducing page load times.
• Compliance: Using the official API keeps you on the right side of Instagram’s terms of service.

2. Overview of Instagram APIs

⭐ Note: If you’re just showing your own personal profile posts, Basic Display API is the easiest pick!

3. Setting Up Your Instagram App

Step 1: Create a Facebook Developer Account

1. Go to Meta for Developers and log in.
2. Click My Apps → Create App. Choose Consumer type for Basic Display.

Step 2: Add Instagram Basic Display

In your app dashboard, click Add Product, select Instagram Basic Display and click Set Up.

Step 3: Configure OAuth & Redirect URIs

Under Instagram Basic Display → Settings, add your website URL in Valid OAuth Redirect URIs (e.g., https://yourdomain.com/ig-callback).

Step 4: Add Test Users

While in Development Mode, only you (and any added testers) can fetch data. Invite test users under Roles → Instagram Testers.

Step 5: Get Your Credentials

• App ID & App Secret (found in Settings → Basic).
• Keep them safe—think of them like your site’s keys to the Instagram kingdom!

4. Fetching Your Instagram Feed

Here’s the simplified flow:

1. User Authorization:
   

   https://api.instagram.com/oauth/authorize?client_id={APP_ID}&redirect_uri={REDIRECT_URI}&scope=user_profile,user_media&response_type=code
             

2. Exchange Code for Short-Lived Token:
   

   POST https://api.instagram.com/oauth/access_token
   - client_id
   - client_secret
   - grant_type=authorization_code
   - redirect_uri
   - code
             

3. Exchange for Long-Lived Token:
   

   GET https://graph.instagram.com/access_token?grant_type=ig_exchange_token&client_secret={APP_SECRET}&access_token={SHORT_LIVED_TOKEN}
             

4. Fetch Media:
   

   GET https://graph.instagram.com/me/media?fields=id,caption,media_url,permalink,thumbnail_url,timestamp&access_token={LONG_LIVED_TOKEN}
             

5. Display on Your Site:
   Loop through the JSON response and inject into your HTML.

5. Integrating into a Plain HTML/JS Site

<div id="ig-feed"></div>

<script>
  const token = 'YOUR_LONG_LIVED_TOKEN';
  fetch(`https://graph.instagram.com/me/media?fields=id,media_url,permalink&access_token=${token}`)
    .then(res => res.json())
    .then(data => {
      const container = document.getElementById('ig-feed');
      data.data.forEach(post => {
        const link = document.createElement('a');
        link.href = post.permalink;
        link.innerHTML = ``;
        container.appendChild(link);
      });
    })
    .catch(err => console.error('Error fetching Instagram feed:', err));
</script>
      

6. Integrating into WordPress

6.1 Manual Method (No Plugin)

1. Add the JS snippet above into your theme’s footer.php or via a code-injection plugin.
2. Ensure SSL (HTTPS) is configured.
3. Wrap it in a shortcode:
   

   function ig_feed_shortcode() {
     ob_start();
     ?>
     <!-- Paste HTML/JS here -->
     <?php
     return ob_get_clean();
   }
   add_shortcode('ig_feed', 'ig_feed_shortcode');
             

4. Use [ig_feed] in any post or page.

6.2 Using a Plugin

7. Styling Your Instagram Feed

#ig-feed {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#ig-feed img {
  width: calc(25% - 10px);
  border-radius: 8px;
  transition: transform 0.3s;
}
#ig-feed img:hover {
  transform: scale(1.05);
}
      

8. SEO Best Practices

• Lazy-load images: Improves page speed.
• Use alt tags: Pull captions into alt attributes.
• Cache responses: Reduce API calls by caching JSON.
• Schema Markup: Use JSON-LD to mark up each post.
• Keyword Placement: Naturally include:
  • "how to integrate instagram feed”
  • "how to integrate instagram feed using api into website”
  • "how to integrate instagram feed into wordpress website”

9. Common Pitfalls & Solutions

1. Invalid Redirect URI: Ensure exact match, including https://.
2. Token Expired: Refresh every ~50 days.
3. CORS Errors: Require HTTPS or use ngrok for localhost.
4. Rate Limits: Cache responses, avoid fetching on every load.

10. FAQs

Do I need a Business account to fetch feeds?

No! A personal account works with the Basic Display API.

Can I filter posts by hashtag or media type?

You can filter client-side after fetching with the Graph API.

What if I don’t want to code?

Use plugins like Smash Balloon or 10Web Social Feed for no-code setup.

How often should I refresh my token?

Every 50 days to avoid token expiration.

Is it SEO-friendly?

Yes—with proper alt tags, lazy loading, and schema markup.

Conclusion

There you have it—a full guide on how to integrate Instagram feed using API into website. Whether you code it yourself or pick a plugin, these methods will keep your site looking fresh and social. Now go show off those ‘grams on your site—your visitors (and Google!) will thank you!