How to Embed Instagram Feed on Your Astra WordPress Site
Home Blog How to Embed Instagram Feed on Your Astra WordPress Site

How to Embed Instagram Feed on Your Astra WordPress Site

How to Embed Instagram Feed on Your Astra WordPress Site

If you want to add your Instagram feed on Astra websites, this is the right place.

As a popular WordPress theme, tons of people are using Astra to create an engaging website for their brand.

And if you want to make your Astra website even more engaging, you can simply embed photos and videos from Instagram.

Since manually embedding Instagram feeds can be tough, we’ll show you a much easier way today.

But first, let’s see how displaying Instagram content can help your Astra website.

Or you can click here and skip ahead to the tutorial.

Why Embed Instagram Feed on Astra Websites?

Developed by Brainstorm Force, Astra is a popular WordPress theme and a great option if you’re looking for a way to build a website for your brand.

wp astra wordpress theme plugin

With the Pro version of Astra, you’ll have an easier time building a WordPress website that can engage website visitors and keep them interested.

To make your Astra website even more engaging, an easy solution is to embed content from social networks like Instagram.

By embedding feeds of Instagram content, you’ll be able to:

  • Grab people’s attention with beautiful photos and videos, and keep them on your site
  • Display positive reviews to show visitors that regular people on Instagram are happy with your products and boost your sales
  • Show Instagram posts from your own profile to get tons of new interactions and followers
  • Embed a shoppable Instagram feed and give your website visitors an engaging shopping experience
  • And much more…

All you have to do is embed Instagram feeds on your Astra site, and you can start growing your brand’s Instagram presence, boosting your sales, and more.

With that, let’s look at the easiest way of embedding Instagram feeds in Astra.

Easiest Way to Embed Instagram Feeds on Your Astra Website

When it comes to integrating WordPress with Instagram, the best tool that you can use is Instagram Feed Pro.

best instagram feed pro plugin

Using this plugin, you can embed Instagram photos, videos, shorts, carousels, stories, and more – no need to touch a single line of code.

Just follow this simple guided flow, and the plugin will guide you through the process of creating, customizing, and embedding Instagram feeds.

guided flow instagram feed pro

Plus, Instagram Feed Pro gives you lots of ways to customize the design of your feeds.

For an easy way to personalize your feeds, you can import a pre-designed template and instantly copy a unique design.

You also get a visual customizer where you can customize your Instagram feed in detail. 

In just a few clicks, you can edit your layout, color scheme, post elements, filters, header design, and more. You can also track all of your changes in real-time.

visual customizer instagram feed pro

Since the plugin has been designed to be lightweight, you can embed as many Instagram posts as you want, and your site will still load as fast as ever.

And with a faster website, you can get much better SEO as well.

With all these amazing features, Instagram Feed Pro is easily the best Instagram feed plugin in the market and has 1+ million users and a rating of 4.9/5 stars!

reviews instagram feed pro plugin

Ready to embed Instagram feeds in Astra? Get Instagram Feed Pro for your site today.

Now, let’s get started with our step-by-step tutorial below.

How to Embed Instagram Feed on Your Astra Website

Once you’re ready to embed Instagram feeds on your Astra WordPress site, all you have to do is follow our step-by-step guide below.

Let’s get started:

Step 1: Install the Instagram Feed Pro plugin

To get started, you can grab your copy of Instagram Feed Pro from here and download it to your computer.

Next, install and activate the plugin on your WordPress website.

For more information, you can check out this beginner’s guide on how to install a WordPress plugin.

Once your plugin is ready, you can move on to step 2 and use it to create an Instagram feed.

Step 2: Create Your Instagram Feed

You can now simply follow the plugin’s guided flow to start creating your Instagram feed.

Open the Instagram Feed » All Feeds menu from your WordPress dashboard area to get started.

After that, click on the Add New button at the top.

create new feed instagram feed pro

Next, you can choose the type of Instagram content you’d like to embed on your website:

  • User Timeline: Show the posts from our own Instagram account
  • Public Hashtag: Choose specific hashtags and display all the posts with that hashtag
  • Tagged Posts: Use the feed to display your Instagram mentions on your site

You can even select multiple options here to combine feed types into a single feed.

Just click on the Next button after selecting your feed type.

select your feed type instagram feed pro

Now that you’ve created a new feed for your Astra website, you can connect your feed to Instagram in step 3.

Step 3: Connect the Feed to Your Instagram

By connecting your Instagram account, your new feed can start displaying content from Instagram on your Astra WordPress site.

First, click on the Add Source button.

instagram add source for feed

You can now choose between connecting your Personal account or a Business Instagram account.

With a personal account, you can only show your own Instagram posts. But if you connect a business account, you can embed Instagram hashtag feeds, mentions feed, and more.

To continue, select your account type and then click on the Login with Instagram button below.

select instagram account type popup

To connect to Instagram, the plugin will now ask for read-only access to your Instagram account.

Since the plugin can only view your content and can’t make any changes, Instagram Feed Pro is totally safe.

Ready to connect your account? Click on the Allow button to continue.

allow access to instagram

You can now freely reuse this source for any of your future Instagram feeds.

To continue, select your source here and then click on Next.

confirm your instagram feed source

As you can see, connecting your feed to Instagram can be super easy with the Instagram Feed Pro plugin.

In the next step, you can set up how this Instagram feed looks using the customization options.

Step 4: Customize Your Astra Instagram Feed

Since the plugin is so user-friendly, you can easily personalize your Astra Instagram feeds as well — no need to touch a single line of code.

To help you get started easily, you get 8 pre-designed templates that you can choose from.

To continue, just select a template that you’d like to use and then click on Next.

instagram templates astra

Now that you’ve imported your template, Instagram Feed Pro will open the live feed editor for in-depth customization.

You can find the customization options on the left that can help you set your feed layout, color scheme, header, post elements, load more buttons, and much more — no need for HTML or CSS.

live feed editor for instagram feed pro

Whenever you make any changes using these options, the live preview on the right will show you how your Instagram feed will look in real-time.

You can now click on the Feed Layout option and start setting up the layout of your Instagram posts.

select feed layout options live feed editor instagram

Next, you can choose from 4 different ready-made templates:

  • Grid: Embed your Instagram content in neat rows and columns so you can show tons of posts at once
  • Carousel: Turn your Instagram posts into a beautiful Instagram carousel and engage your visitors
  • Masonry: Showcase Instagram content in multiple columns and keep their original proportions
  • Highlight: Display the posts in square-cropped images while making specific posts twice as large

For this example, we’ll go ahead and use the Highlight layout.

feed layout options instagram feed pro

To confirm your new layout, click on the Save button at the top.

Once you do that, click on the small customize button to return to the main customization options.

return to main customization options instagram

With that, you can go ahead and set the colors of your Instagram feed.

Just click on the Color Scheme option on the left to get started.

select color scheme option

For a simple way to change your feed’s colors, you can pick from these color schemes:

  • Inherit from Theme: Copy your Astra theme’s colors so your feed perfectly matches your site
  • Light: Display an Instagram feed with a bright background and dark font
  • Dark: Choose a dark background and light font for your Instagram feed
  • Custom: Manually pick all the colors yourself
color scheme options live instagram feed

After picking your color scheme, click on the Save button.

Want to customize your Instagram feed even more? With the remaining customization options, you can personalize your header, load more buttons, filters, and much more.

Once you’re happy with the design of your Instagram feed, don’t forget to click on the Save button.

In the final step, you can go ahead and add the Instagram feed to your Astra WordPress site.

Step 5: Embed Your Astra Instagram Feed

From the live feed editor, you can now embed this Instagram feed on your web page, sidebar, and footer.

First, click on the Embed button at the top of the editor.

instagram click on the embed button

You can then see a popup with all the ways you can embed your Instagram feed.

For our example, we’ll go with the Add to a Page option.

add live instagram feed to page

Once you do that, Instagram Feed Pro will let you choose the page where you’d like to embed your feed.

You can embed it on a WordPress page, display it as an Instagram feed widget, or even copy the shortcode.

Just select the option you want and then click on the Add button.

select page to embed live instagram feed

Doing that will open the page in the WordPress Gutenberg editor or use other page builders. After all, Astra has full compatibility with major page builders like Beaver Builder or Elementor.

You can even import a template to this WordPress page before embedding your Instagram feed. For that, click on the Template Kits button at the top.

open templates wp astra

Clicking on that will open a popup where you can see all the templates that you can import.

From here, look for the template you prefer and then click on it.

select wp astra template.jpg

You can then see more information about the template. On the right, you can also find all the variations of this template.

To continue, you can click on the Import Template button below.

import template wp astra

Just like that, Astra will add the template to your page here. After you do that, it’s time to go ahead and embed your Instagram feed.

First, click the plus (+) icon to add a new WordPress block.

add new content block on wordpress

Using the search bar at the top, you can now look for the “instagram” block.

After you do that, click on the Instagram Feed block in the search results below.

embed instagram feed block on wordpress page

Finally, click on the Update button, and your new Astra Instagram feed will be live on your website.

As you can see, Instagram Feed Pro makes it super easy to display Instagram content on your site. If you open your page, you’ll be able to see how the Instagram content will look to your visitors.

example live instagram feed

And there you go!

Just like that, you now know how to add Instagram feeds on Astra websites with ease. You can then boost your site’s engagement, build trust, grow your sales, and much more.

As you can see, it can be super easy to embed Instagram feeds to WordPress with the help of the Instagram Feed Pro plugin.

Want to embed Instagram feeds easily? Grab your copy of Instagram Feed Pro today!

While you’re here, you can check out our list of the best Instagram marketing tips.

Did you enjoy this article? Feel free to follow us on Twitter and Facebook for more social media marketing tutorials.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.