How to Add an Instagram Widget to WordPress

Displaying your Instagram feed directly on your WordPress site is a fantastic way to showcase your latest content and build social proof without requiring visitors to leave your website. This guide will walk you through exactly how to add a beautiful, responsive Instagram feed or widget to WordPress, covering both the simple plugin method and a manual approach for individual posts.

Why Should You Add an Instagram Feed to Your WordPress Site?

Before getting into the "how," it's helpful to understand the "why." Integrating your Instagram content with your website isn't just about aesthetics, it offers some real marketing benefits.

• Keeps Your Website Content Fresh: Your Instagram feed is constantly updated. When you sync it with your site, you’re adding a dynamic element that automatically refreshes with new photos and videos. This shows visitors that your brand is active and current.
• Increases Instagram Followers: Website visitors who might not know about your Instagram account get a direct opportunity to see your content and follow you. It's a low-friction way to cross-promote your channels and grow your social media audience.
• Enhances Your Brand's Visual Storytelling: Your website might focus on your products or services, but your Instagram tells the story of your brand. Displaying your feed lets you blend that authentic, visual narrative directly into your primary digital hub.

Two Ways to Add Your Instagram Feed: Plugin vs. Manual

There are two primary methods for getting your Instagram content onto your WordPress site. The best one for you depends on what you want to achieve and how comfortable you are with technical steps.

1. Using a WordPress Plugin (The Recommended Method)

This is by far the most popular and flexible method. Plugins are designed to make the process easy, offering extensive customization options without you having to touch a single line of code. You can create beautiful, multi-column grids, carousels, and even feeds based on specific hashtags.

• Pros: User-friendly, highly customizable, automatically updates, and offers features like moderating content and combining multiple feed types.
• Cons: A poorly coded plugin can slightly slow down your website. You'll need to keep it updated.

2. Manually Embedding a Single Post (The Quick &, Simple Method)

If you don’t need a full-flowing live feed and just want to highlight one specific Instagram post within a blog article or on a page, manual embedding is a great option. Instagram provides a simple embed code for every public post.

• Pros: Free, doesn't require installing another plugin, and is very lightweight on your site’s performance.
• Cons: Doesn't automatically update, limited to one post at a time, and offers no customization beyond turning the caption on or off.

Method 1: How to Add an Instagram Widget Using a Plugin (Step-by-Step)

For most people, a plugin is the best way forward. We'll use the popular Smash Balloon Social Photo Feed plugin as our example because its free version is powerful, reliable, and used by over a million websites. The process is similar for most other Instagram feed plugins.

Step 1: Install and Activate the Plugin

First, you’ll need to add the plugin to your WordPress site.

1. Log in to your WordPress dashboard.
2. Navigate to Plugins → Add New.
3. In the search bar, type "Smash Balloon Instagram Feed."
4. Find the plugin called "Smash Balloon Social Photo Feed" and click Install Now.
5. After it installs, click Activate.

Once activated, you'll see a new menu item in your WordPress dashboard called Instagram Feed.

Step 2: Connect Your Instagram Account

Next, you have to give the plugin permission to access your Instagram photos. Smash Balloon makes this process safe and straightforward.

1. Navigate to Instagram Feed → Settings in your dashboard.
2. Click the large blue button that says Add New Source.
3. A pop-up will ask you to choose between connecting an Instagram Business profile or a Personal profile. If you have a business account, choose that option as it offers more features and better reliability due to how the API works.
4. Click Login with Facebook (since Business profiles are managed through Facebook) or connect directly with Instagram for personal profiles.
5. Follow the on-screen prompts to authorize the connection. You'll simply be asked to grant permission for the app to view your profile and media. It's a secure process that doesn't share your password with the plugin.

After a successful connection, you'll see your Instagram account listed as a connected source.

Step 3: Customize Your Instagram Feed

This is where you can make the feed look exactly how you want it to. From the Instagram Feed → Settings page again, find the Customize tab.

Here are some of the key settings you'll want to adjust:

• General: Set the width and height of your feed. You can leave it at 100% to be responsive.
• Layout: This is a big one. Choose a Grid, Carousel, Masonry, or Highlight layout. You can also define the number of photos you want to show and the number of columns for your grid. For a footer or sidebar widget, 4 posts in 4 columns often looks great.
• Header: Decide if you want to show your profile picture, bio, and follower count above the feed. You can turn this on or off to create a clean grid of just photos.
• 'Load More' Button: Customize the text and color of the button that lets users load more of your Instagram posts.
• 'Follow' Button: Enable a prominent "Follow on Instagram" button to help convert website visitors into followers.

Play around with these settings until you achieve a look that perfectly matches your website's branding and design. Don't forget to click Save Changes!

Step 4: Display Your Feed on Your Website

Smash Balloon gives you three easy ways to add your newly created feed to your site: using a shortcode, a Gutenberg block, or a widget.

A. Adding the Feed to a Page or Post

For pages like your homepage, a dedicated gallery page, or within a blog post, the easiest method is using the built-in block.

1. Open the post or page where you want the feed to appear.
2. Click the plus (+) icon to add a new block.
3. Search for "Instagram Feed" and select the block.
4. Your customized feed will instantly appear in the editor. Save or publish your page to see it live.

Alternatively, if you're using the Classic Editor, you can use the shortcode. Simply go to Instagram Feed → Settings → Display Your Feed tab. Copy the primary shortcode, which is [instagram-feed], and paste it directly into your page's text editor.

B. Adding the Feed to Your Footer or Sidebar

Placing an Instagram widget in your site's sidebar or footer is a great way to feature your content on every page.

1. Navigate to Appearance → Widgets in your dashboard.
2. You'll see your available widget areas (like "Sidebar" or "Footer Area 1").
3. Find the "Instagram Feed" widget from the list of available widgets.
4. Drag and drop it into the desired widget area.
5. You can add an optional title, like "Follow Us on Instagram."
6. Click Save.

Now, visit your site, and you should see a great-looking Instagram feed right where you placed it!

Method 2: How to Manually Embed a Single Instagram Post

If a simple, single post is all you need, skip the plugin and follow these quick steps. This method is perfect for blog posts where you want to reference a specific visual.

1. Open a web browser on your computer (not the mobile app) and go to the Instagram post you want to embed.
2. Click the three dots (...) icon in the top-right corner of the post.
3. From the dropdown menu, click on Embed.
4. A small dialogue box will appear with the embed code. You have one choice here: you can either include the caption or not. Uncheck "Include caption" for a cleaner look.
5. Click Copy Embed Code.
6. Now, go back to your WordPress post or page editor.
7. Click the plus (+) icon to add a new block and search for "Custom HTML."
8. Paste the code you just copied into the Custom HTML block.

When you preview or publish the page, you'll see the Instagram post perfectly embedded in your content. That's it!

Best Practices for Your WordPress Instagram Feed

• Match Your Brand Style: Use the plugin's customization options to adjust colors, fonts, and layouts to ensure the feed feels like a natural part of your website, not a tacked-on extra.
• Placement is Important: Your footer is prime real estate because it appears on nearly every page. For a more prominent display, consider a full-width feed on your homepage or a dedicated "Community" page. Sidebars also work well, especially on blogs.
• Curate Your Content: With plugins like Smash Balloon Pro, you can moderate your feed by hiding specific posts or creating feeds based on hashtags. This is especially useful for user-generated content campaigns where you only want to show the best submissions.
• Keep Mobile in Mind: Most of your visitors will be on mobile devices. Luckily, good plugins are fully responsive. Always check how your feed looks on a phone to make sure it's easy to view and interact with.

Final Thoughts

Adding an Instagram widget to WordPress bridges the gap between your social media presence and your website, creating a more dynamic and engaging experience for your visitors.

Of course, a beautiful feed on your site depends on having great content to show in the first place. Consistency and quality are what keep your audience engaged and your brand story alive. As a team that has managed social media for years, we built Postbase to make creating and scheduling that content feel effortless. With our visual calendar, you can plan your posts, videos, and Stories for weeks ahead, ensuring that your official Instagram profile - and the feed on your website - always has fresh, engaging content ready to go.