How to Embed Instagram Posts on Your WordPress Site
Embedding your Instagram feed directly on your website is a great way to display dynamic content, engage your audience, and showcase your latest posts without needing to manually update anything. Whether you’re using a plugin like Smash Balloon’s Instagram Feed or working with Bricks Builder, here’s a step-by-step guide on how to embed your Instagram feed on your WordPress site.
1. Using Smash Balloon’s Instagram Feed Plugin
Smash Balloon’s Social Photo Feed plugin is one of the most popular options for embedding your Instagram feed, and for good reason. It’s highly customizable, easy to use, and doesn’t require any coding skills. Here’s how to set it up:
Step 1: Install and Activate the Plugin
Go to your WordPress dashboard, navigate to Plugins > Add New, and search for Smash Balloon Social Photo Feed. Install and activate the plugin.
Step 2: Connect Your Instagram Account
After activation, go to the plugin settings by clicking on Instagram Feed in the left-hand menu. Click Connect an Instagram Account and follow the prompts to connect your Instagram account (Personal or Business). This allows the plugin to pull in your Instagram content.
Step 2b: Add Your Account Manually
If these options are not working for you, you can add your account manually with an API Access Token. Use this blog post for steps on How to Get an Instagram Access Token
Step 3: Customize Your Feed
Once connected, you can customize how your feed looks. Smash Balloon allows you to:
- Display your feed in a grid, carousel, or masonry layout
- Adjust the number of photos to display
- Set image sizes and spacing
- Enable lightbox pop-ups for full-size images
Step 4: Embed Your Feed
After customizing your feed, Smash Balloon provides you with a shortcode. You can add this shortcode to any page or post on your WordPress site. Simply paste the shortcode where you want the Instagram feed to appear, and your live feed will be embedded.
2. Embedding Instagram Feed Using Bricks Builder
For those using Bricks Builder on WordPress, embedding your Instagram feed can be done without any additional plugins by utilizing Bricks’ advanced functionality.
Use this blog post for steps on How to Get an Instagram Access Token
Step 1: Add a Custom HTML Element in Bricks Builder
In Bricks Builder, navigate to the page or section where you want your Instagram feed to appear. From the left-hand panel, select the Instagram Feed element and drag it to your page layout.
Step 2: Embed Instagram Feed Code
To embed your Instagram feed using custom HTML, you’ll need to get your feed embed code from Instagram or a third-party service. Once you have the code, paste it into the Custom HTML element.
Step 3: Customize the Feed Layout
You can adjust the size, layout, and positioning of the feed directly within Bricks Builder. Bricks allows for full flexibility in customizing how your feed will look on your site. This is great if you’re integrating your feed into a specific section or part of a larger custom design.
Step 4: Save and Publish
Once everything looks good, save your changes and publish your page. Your Instagram feed will now be live on your website, pulling in real-time posts from your Instagram account.
Final Thoughts
Embedding your Instagram feed directly onto your website using tools like Smash Balloon or Bricks Builder is an excellent way to keep your site content dynamic and visually engaging. It provides a seamless way to showcase your latest social media activity without constant manual updates.