How the Eff Do You Add Instagram Feed to WordPress

Ah, Instagram! The land of endless scrolling, where food looks too good to eat, and everyone’s life (AKA butt) seems just a tad more glamorous than yours. And then there’s your WordPress site, patiently waiting for its turn in the spotlight.

Why separate this odd couple when you can merge them into one glorious display of social media and content?

Yep, you guessed it—it’s time to embed your Instagram feed into your WordPress website and watch your digital charisma skyrocket. So, buckle up, buttercup! We’re diving headfirst into the art of making your website an Instagram haven.

Off topic: Skyrocket seems like an odd and old mash-up of sky and rocket when rockets were fairly new. Okay. Had to research it. That term is from the 1890s.

That was a fun detour, now back to the topic at hand.

What is an Instagram Business Account?

Switching to an Instagram business account can be a game-changer for brands and entrepreneurs looking to elevate their online presence. An Instagram Business Account opens up a trove of features designed to amplify your marketing efforts.

First off, you gain access to in-depth analytics, offering a clear view of your audience’s behaviour and engagement patterns. This insight allows you to tailor your content strategy for maximum impact & interactions.

The ability to run Instagram ads directly from your account means you can reach a broader audience with ease. Plus, the added functionality of contact buttons and the option to add links to Instagram Stories (if you have over 10,000 followers) enhances the way you connect with your audience. In essence, an Instagram business account isn’t just about posting photos; it’s about strategically growing your brand and strengthening your customer relationships in the digital age.

Step 1: Court Your Instagram Account Like It’s High School All Over Again

First things first, let’s talk about your Instagram account. It’s not just about selfies and sunsets anymore; it’s about making a connection. Ensure your account is set to public because, spoiler alert, you can’t display Instagram feeds from a private account on your WordPress site. If you’re a business, consider switching to an Instagram business account for added perks.

Step 2: Picking the Right Wingman: The Instagram Feed Plugin

“Smash Balloon Instagram Feed,” your soon-to-be best friend in the WordPress plugin world. It’s like the cool kid in school who knows everyone and makes you look good. This plugin is a pro at embedding Instagram feeds, offering customization options that’ll make your website visitors do a double-take.

1. Add New: Head over to the ‘Plugins’ section in your WordPress dashboard, click ‘Add New,’ and search for ‘Smash Balloon Instagram Feed.’ Hit ‘Install Now’ and then ‘Activate.’ Congratulations, you’ve just made your first move!
2. Access Token Dance: Next, it’s time to get cozy with the Instagram API. Navigate to the plugin settings and connect your Instagram account. You’ll need to perform the sacred “Access Token” dance—don’t worry, it’s just a few clicks, no actual dancing required.

Step 3: Customise Like You’re the Next Big Thing in Interior Design

Now, for the fun part—customisation! Want to display your Instagram photos in a sleek carousel or perhaps a snazzy grid? Dreaming of a popup that showcases your latest adventures in high-res? Smash Balloon has got you covered. With its plethora of templates and customisation options, you’re the designer, and Instagram is your canvas.

1. Widgets and Shortcodes: Fancy a sidebar widget showcasing your latest posts? Or maybe a shortcode to sprinkle Instagram magic throughout your pages? Smash Balloon is ready with its widget and shortcode functionality, making embedding a breeze.
2. Feeds and More Feeds: Hashtag feeds, Instagram stories, reels, personal account posts, you name it. Want to show off your user-generated content or create a shoppable feed? This plugin turns your site into a social media feeds wonderland.

Step 4: Engage and Convert – The Social Proof Strategy

Embedding your Instagram feed isn’t just about aesthetics; it’s about engagement and conversions. Social proof, baby! When website visitors see real people loving your products or services, they’re more likely to jump on the bandwagon. Plus, a follow button right there? Hello, new Instagram followers!

Ecommerce Ready: Using WooCommerce? Make your Instagram feed shoppable. Imagine the possibilities—visitors admire your Instagram photos and can click directly to buy. eCommerce, meet Instagram; Instagram, meet eCommerce.

Pro Tips for the Overachievers

1. SEO and Speed: Yes, embedding your Instagram feed can impact your site’s SEO and speed. But fear not! Optimise your images, lazy load your content, and keep an eye on that page speed. Remember, no one likes a slowpoke.
2. Instagram API Changes: Keep abreast of Instagram API updates. They’re like the weather in England—unpredictable and always a hot topic of conversation.
3. CSS and HTML Wiz: Feeling adventurous? Dive into the CSS and HTML to tweak your feed to perfection. Just don’t get lost in the code jungle.
4. Page Builders and Themes: Using Elementor or another page builder? Or perhaps a specific WordPress theme? Compatibility is key, so make sure everything plays nice together to avoid a digital temper tantrum.

Don’t need a plugin? Want to do it with HTML & JS? Cool, here we go:

Embedding an Instagram feed on your website without a plugin requires you to use Instagram’s Graph API, HTML, and JavaScript. We assume you have a basic understanding of web development and access to your Instagram Business or Creator account’s credentials.

AKA, you are a Nerd Lite, at least.

Here’s a simplified step-by-step guide. It’s conceptual. So do your research.

1. Create an Instagram App:
   • Go to the Facebook Developer portal and create a new app.
   • Choose “For Everything Else” and name your app.
   • Add the “Instagram” product and configure it.
2. Get Access Token:
   • In the App Dashboard, navigate to Settings > Basic, add your website’s URL, and save changes.
   • Go to Instagram > Basic Display, create a new Instagram App, and add a tester.
   • Authorise the tester account to generate an access token.
3. Fetch Instagram Feed:
   • Use the Instagram Graph API endpoint to fetch your media.
4. Embed with HTML & JavaScript:
   • Create a container in your HTML where the Instagram feed will be displayed.
   • Use JavaScript to fetch your Instagram feed using the access token and dynamically insert it into the HTML container.

Create an empty <div> to load your IG feed.

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

JavaScript to Fetch and Display the Instagram Feed:

// Your access token goes here
const accessToken = 'YOUR_ACCESS_TOKEN';

// Instagram Graph API URL for your media
const apiUrl = `https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,permalink&access_token=${accessToken}`;

// Fetch your Instagram media
fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    const media = data.data;
    const container = document.getElementById('instagram-feed');
    
    // Create HTML content for each post
    let content = '';
    media.forEach(post => {
      content += `
        <div class="instagram-post">
          <a href="${post.permalink}" target="_blank">
            <img src="${post.media_url}" alt="${post.caption}">
          </a>
        </div>
      `;
    });
    
    // Insert the content into the container
    container.innerHTML = content;
  })
  .catch(error => console.error('Error fetching Instagram media:', error));

CSS (Optional):

#instagram-feed {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.instagram-post {
  margin: 10px;
}

Keep this in mind:

• Access Token Security: Keep your access token secure and avoid exposing it in public repositories or client-side code if possible.
• CORS Policy: Fetching data from a different domain might result in CORS policy issues. Consider setting up a server-side solution to act as a proxy if needed.
• Instagram API Limitations: Be aware of rate limits and permissions when using the Instagram Graph API.

While this blog talks about embedding Instagram into a WordPress site or any other, did you know you can automatically convert WordPress blogs to Instagram Reels? Automatically? blogtovideo plugin for WordPress will automatically convert your blog into a 60 second Reel and automatically publish it to Instagram and Facebook. Additionally, it will also push the video as a YouTube Short to your YouTube channel. Get started today!

Look! More questions we know the answers to: