How to Create a Custom Instagram Feed in WordPress (2023)
Wish your WordPress site featured your beautiful Instagram photos? Embedding an Instagram feed is an excellent way to keep your site fresh and engaging while cross-promoting your Instagram presence.
In this guide, we‘ll walk you through how to create a custom Instagram photo feed in WordPress step-by-step. We‘ll cover everything from connecting your Instagram account to customizing your feed‘s appearance and layout. Let‘s get started!
Why Embed an Instagram Feed in WordPress?
Before we dive into the tutorial, let‘s consider some of the key benefits of adding an Instagram feed to your WordPress site:
Fresh visual content – An Instagram feed provides an always-updated source of images to keep your site looking fresh. This is an effortless way to regularly add new content.
Encourage Instagram follows – Showcasing your Instagram photos and profile on your website encourages visitors to follow you on Instagram too. This can help you grow your audience on that important social network.
Boost engagement – Beautiful photos catch visitors‘ attention and encourage them to spend more time browsing your site. You can also use the Instagram feed to drive traffic to key pages and products.
Social proof – Seeing your active Instagram presence and the likes and comments on your posts builds your credibility and shows that you have an engaged following.
With these perks in mind, let‘s look at how to actually get your Instagram photos showcased on your WordPress site.
How to Connect Instagram to WordPress
The easiest way to create a custom Instagram feed is by using a plugin. We recommend Smash Balloon‘s Instagram Feed plugin. It‘s the best Instagram plugin for WordPress, used by over 1 million websites.
The free version of the plugin provides a simple way to embed your Instagram photos. The Pro version unlocks advanced features like hashtag feeds, tagged posts, shoppable links, and more customization options. We‘ll be using the Pro version for this tutorial.
To get started, install and activate the Instagram Feed plugin on your WordPress site. If you need help, see our step-by-step guide on how to install a WordPress plugin.
With the plugin activated, head to Instagram Feed » Settings in your WordPress dashboard. Here, enter your license key for the Pro version. You can find this in the email receipt from your purchase.
Next, click on the Add New button at the top of the Instagram Feed » Feeds page.
First, choose what type of Instagram feed to create. You can show your latest Instagram posts, a hashtag feed, or tagged posts that you‘re mentioned in. If this is your first time setting up the plugin, we recommend choosing to show your latest posts.
After selecting your feed type, click Next. Now it‘s time to connect your Instagram account.
If you‘re embedding a feed of just your own latest posts, you can use either a Personal or Business account. For a hashtag or tagged posts feed, you‘ll need to connect an Instagram Business account.
Don‘t have a Business account? No worries – it‘s free and easy to convert. Just follow Instagram‘s instructions to switch to a Business account.
With that squared away, click the Add Source button. Choose the type of Instagram account you‘re connecting and click Login with Facebook.
Why Facebook? Since Facebook owns Instagram, they share an authentication system. Completing the Facebook login also gives Smash Balloon access to your Instagram account.
On the next screen, select the Instagram account you want to use for this feed. Then click Next.
Now you‘ll see a list of all your Facebook pages. Select the checkbox for the page that‘s connected to the Instagram account. Then click Next.
You‘ll now see all the information and abilities the Instagram plugin is requesting. You can click Yes or No for each option, but we recommend leaving them all enabled so your feed works smoothly.
When you‘re finished, click Done. Then click Add to confirm you want to use that Instagram source for your feed.
You‘ve now successfully connected your Instagram account to WordPress! Let‘s look at how to customize how your embedded feed will look.
Customizing Your Instagram Feed‘s Appearance
The Smash Balloon plugin provides an intuitive visual feed editor. Here you can customize your Instagram feed to your heart‘s content and instantly preview how it will look.
To launch the editor, click on your feed from the Instagram Feed » Feeds page. You‘ll see a live preview on the right and customization options on the left.
Layout and Number of Posts
In the Layout section, choose from four layout options:
- Grid – Uniform rows and columns
- Carousel – Horizontally scrolling feed
- Masonry – Staggered grid of images
- Highlight – Every 5th photo enlarged
For Carousel feeds, you can choose whether to autoplay the carousel and how quickly it should scroll.
Under Posts, choose how many Instagram posts to display. You can show different numbers for desktop and mobile to optimize for different screen sizes.
For instance, you may want to show a 4×4 grid of 16 images on desktop, but only 4 images on mobile to keep the feed quick loading.
Columns and Responsive Options
Next, customize the number of columns based on screen size under the Columns section. By default, you‘ll see 4 columns on desktop, 2 on tablet, and 1 on mobile.
Checking the box for "Make the feed fully responsive" will fluidly adjust the size and number of columns based on the screen or browser window size. We recommend enabling this option for the most user-friendly feed.
Color Scheme
Under Color Scheme, choose Light or Dark mode to match your branding. You can also click the color picker to select custom colors for your feed if you prefer.
Header
Smash Balloon shows a header with your profile information above your photo feed by default.
In the Header section, you can choose from Small, Medium, and Large header sizes. Or switch the Enable button off if you don‘t want to show the header at all.
To pull in your profile picture and bio, make sure the respective Enable buttons are switched on. (Note: the bio only shows for Large headers.)
To change the profile picture or bio in your feed, click Add Custom Avatar or Add Custom Bio. You can then add alternative text and images here if you wish.
Caption and Post Appearance
Under Posts » Caption, toggle the button on to display captions below your Instagram photos. We recommend enabling this so visitors can read the context you added on Instagram.
You can set a character limit for captions so they don‘t get cut off. And you can customize the caption color and size.
To style the photo "cards", go to Posts » Post Style. Switch between the Boxed and Regular options. Choosing Boxed will let you add a background color, border, and shadow effect.
Under Posts » Likes and Comments, enable the totals to showcase your Instagram engagement and add social proof.
Lightbox and "Load More"
The Instagram Feed plugin includes a nice Lightbox feature. When a visitor clicks on a photo in your feed, it will open a full-screen lightbox slideshow.
You can customize your Lightbox under the popup Lightbox menu. Or switch it off if you prefer.
To customize the "Load More" button that appears below your feed, go to the Load More Button section. Here you can edit the button text and colors to match your theme.
"Follow" Button
One key purpose of embedding an Instagram feed is encouraging visitors to follow you on Instagram. The plugin adds a "Follow on Instagram" button by default.
Under the Follow Button settings, you can edit this label – for instance, changing it to "Follow Us for More!" And you can make the button stand out by customizing the colors.
Advanced Customization
With the visual customizer, you can easily dial in your Instagram feed to match your site and branding. All the customization options update the preview in real-time.
If you know CSS, you can also add custom CSS styles under the Custom CSS menu for even more flexibility.
Once you‘re happy with your feed‘s appearance, make sure to click Save so you don‘t lose your work. Then let‘s look at how to actually embed your feed on your WordPress site.
Where to Embed Your Instagram Feed
With your Instagram feed created, you can add it to your WordPress site in several ways:
- In a post or page using a shortcode or block
- In your sidebar or footer using a widget
- In your theme‘s template files using the Smash Balloon block
Let‘s look at each of those options.
Embedding an Instagram Feed in Posts and Pages
To add your Instagram feed to a post or page, edit that post or page and add a new block. Search for "Instagram" and select the Smash Balloon Instagram Feed block.
In the block settings, add the ID number of your Instagram feed in the shortcode area. You can find this ID next to your feed name on the Instagram Feeds page.
Now, publish or update the post or page as normal. Your feed should automatically appear!
Adding an Instagram Widget
To showcase your Instagram photos in your sidebar, footer, or other widget areas, go to Appearance » Widgets in the WordPress dashboard.
Click the + button to add a new widget and search for "Instagram Feed". Add the widget to the widget area where you want it to appear.
In the widget settings, enter the ID number for your Instagram feed in the Shortcode settings, just like you did for the block.
Then click Update to make the widget and feed live.
Embedding in Theme Templates
Finally, if you‘re comfortable editing your WordPress theme, you can use the Smash Balloon block to add your Instagram feed directly to your theme‘s template files.
Go to Appearance » Theme Editor to edit your theme files. Remember, it‘s always a good idea to use a child theme so you don‘t lose your changes when the theme updates.
Open up the template file where you want the Instagram feed to appear, such as footer.php. Click the + button to add a new block and search for "Instagram Feed" just like you would in the post editor.
Enter your Instagram feed‘s ID number and click Update File to save your changes.
Bonus: Advanced Instagram Feed Customization Tips
By following the steps above, you can create a beautiful custom Instagram photo feed that integrates seamlessly with your WordPress site. But Smash Balloon offers some advanced features that are worth mentioning.
Shoppable Instagram Feeds
If you‘re using Instagram to promote your business or sell products, you‘ll love this feature. Upgrade to the Pro version to tag your Instagram posts with product links and turn your feed into a shoppable gallery.
In your feed settings, scroll down to the Shoppable Feed section. Here you can choose a custom icon color and style for the shopping bag icon.
To tag products, go to the Posts tab and click on a post. Enter the full URL to the product and click Add Link.
You can track clicks on shoppable posts in the Shoppable Feeds menu.
Hashtag Feeds and Tagged Posts
Smash Balloon doesn‘t just support photo feeds from your own Instagram posts. With a Business account, you can also create feeds based on hashtags and posts you‘re tagged in.
Here are some ideas for using those advanced feeds:
- Create a branded hashtag for your business and encourage customers to share photos with it, then embed that hashtag feed to showcase user-generated content
- Aggregate posts from an event hashtag to create a feed of photos from your conference or workshop
- Collect tagged posts from influencers, brand ambassadors, or happy customers showing off your products
To set up these advanced feeds, choose the relevant feed type when first configuring your feed. You can manage your created feeds from the Instagram Feeds page.
GDPR Compliance
Using a third-party Instagram integration can raise privacy and GDPR concerns. By default, the Instagram Feed plugin collects some data via cookies in the lightbox and for usage tracking.
If you‘re subject to GDPR or want to limit this, go to Instagram Feed » Settings and click on the Customize tab. Scroll down to GDPR and toggle off the "GDPR Integrations" setting.
The plugin will then display a GDPR compliant feed without the lightbox and without any cookies.
Keeping Your Instagram Feed Fresh
To make sure your Instagram feed always shows your latest posts, it‘s important to keep your access token up to date.
You‘ll see an alert in your WordPress dashboard if your access token has expired. To refresh it, go to Instagram Feed » Settings.
Click Re-authorize in the alert box at the top of the page. Go through the authorization process again to generate a new token.
It‘s also a good idea to keep the plugin itself up to date for the latest features and security patches. We recommend enabling automatic updates so you never miss a release.
Get More Instagram Followers from Your Website
An embedded Instagram feed doesn‘t just make your WordPress site more engaging. It can also help you gain more Instagram followers.
To maximize this benefit, consider these tips:
Choose your best photos. Populate your feed with your most stunning and on-brand Instagram photos to showcase your profile in the best light.
Write compelling captions. Take the time to write captions that will make visitors want to see more from you on Instagram.
Use a call-to-action. Customize the label on your "Follow" button with a strong call-to-action like "Join the community on Instagram!"
Run a contest. Promote an Instagram contest on your website. Require visitors to follow you and use your branded hashtag to enter, then use the hashtag feed to showcase the entries.
Tease exclusive content. In your captions or bio, mention that you share exclusive content, stories, or promotions on Instagram that aren‘t available anywhere else.
By combining an engaging Instagram feed with clear calls-to-action and incentives, you can turn more of your website visitors into dedicated Instagram followers.
Create a Custom Instagram Photo Feed Today
Adding an Instagram feed to your WordPress site is an easy and effective way to keep your site fresh and encourage visitors to engage with you on social media.
The Instagram Feed plugin from Smash Balloon makes it simple to create customized, responsive, and stylish Instagram feeds. To recap, here‘s how to set it up:
- Install and activate the Instagram Feed plugin
- Connect your Instagram account
- Customize your feed‘s layout and appearance
- Embed your feed in posts, pages, widgets, or your theme
With the tips and tools covered in this post, you‘re ready to level-up your WordPress site with a custom Instagram photo feed. Get started today to put your Instagram content in front of a wider audience.
