How to Create a Custom Instagram Photo Feed in WordPress 01

An Instagram profile may be a very effective tool for building an audience. It can be used to highlight your items, generate interest in your company, or make your content stand out.

Instagram exceeded one billion active users in 2019. That is some potential you must dig into, regardless of your sector or specialization. Even huge corporations, who use it to build their brand and market their business, are on it these days. But being on Instagram isn’t enough. To be successful on social media, you must integrate all social profiles into a single web presence that visitors can access.

Add Instagram Feed to WordPress is one of the finest methods. It keeps your website visitors engaged and updated with your Instagram activity.

People would be able to interact with you on both platforms. You have to embed your Instagram feed into your WordPress blog. This is a simple technique to increase brand awareness and revenue. After all, promoting your social media accounts on your website could be beneficial. It helps you expand your audience and increase engagement.

Though, adding the Instagram feed to your WordPress website isn’t that simple. So today, we’ll show you how to use WordPress to embed your Instagram feed. Instagram could help you develop your audience and improve revenue for your business. Follow the methods discussed below.

We’ll explain how to embed Instagram with WordPress in this post. These include a manual approach as well as WordPress plugin use. So let’s get started.

Instagram Feed– What is it?

Instagram is a feed-based platform in and of itself, as it displays updated content. It’s dynamic by nature. So, it’s a wonderful fit for WordPress sites that want to keep their visitors engaged with fresh information all the time.

An Instagram feed on a website implies that the photos and videos you upload to your profile are also displayed and updated on your website. This way, your visitors be aware of your most recent posts. You’ll also see a rise in social engagement, as well as an increase in the number of Instagram followers. Plus, the Instagram content adds a fresh, dynamic look to your website with little to no effort.

Add an Instagram Feed Using Qode Interactive Theme

Most of Qode Interactive’s premium WordPress themes include a built-in Instagram feed. You can activate and share your Instagram posts on your site if you have purchased WP themes with Instagram integration. Here’s how to activate the feed.

1. The first step is to link your Instagram account to your website. If you have several Instagram accounts, you will have to pick one to display on your site. Go to general theme choices on your dashboard. Because we’re using Bridge in this example, the options are called Qode Options.

Depending on the theme you’re using. The theme options will be Select/Edge/Elated/Mikado Options. These theme option’s names will appear in themes created by other Qode Interactive designers.

To connect to your account, click Social:

Image showing Social

Find Instagram among the social networks available and click on the Instagram link button:

Instagram button

You are now asked to allow your Instagram profile to access the info (your basic, media, and profile info). To complete this step, click Authorize.

Showing authorize button

After you’ve connected your site to Instagram. You’ll be able to disconnect and reconnect by selecting the appropriate buttons.

Image showing connect with Instagram

It’s time to add the feed to your website after you’ve connected your website to your account. Widgets are used to do this. You can find Widgets under Appearance > Widgets.

Image showing Widgets under Appearance Widgets button

You’ll see that among the other available widgets on the left side of the screen is a unique Qode Instagram Widget designed for this purpose.

Image shows about Qode Instagram Widget

Drag and drop the widget into the relevant widget space. After there, you can personalize the feed any way you like.

Image shows Drag and drop the widget

Set the headline of your Instagram feed, add tags, and choose the number of photos to show and the number of columns to use. You can also adjust the image size, image cache time and add a hover effect if desired.

To save your changes, click Done.

We used the Bridge theme to put the feed in the footer of our site, and this is how it looks:

Image is about demo

Add an Instagram feed Using the Spotlight Instagram Feeds Plugin

This plugin is effective if you’re using a theme that doesn’t come with a built-in Instagram feed. Or if you prefer to use plugins.

Image is about Add an Instagram feed Using the Spotlight Instagram Feeds Plugin

This plugin is effective if you’re using a theme that doesn’t come with a built-in Instagram feed. Or if you prefer to use plugins.

This WordPress plugin handles all your Instagram needs. In a matter of seconds, you may link several accounts and show your feeds anywhere on your website.

Designing how your feed looks have is easier thanks to its live interactive preview. You may set the number of posts and columns in your feed, regardless of your WordPress experience. The plugins have a simple and easy interface. It allows you to integrate your Instagram posts with the layout and styling of your website.

Everything you need to get started is included in the free Instagram feed plugin. It has a lovely Grid layout that can show your posts in a lightbox (pop-up). It is totally responsive and allows you to add a “Follow” button. This helps to ensure that visitors become followers.

The premium edition adds extra features. It includes the ability to see tagged and hashtagged photos from throughout Instagram. It also allows you to see your Instagram Stories. You can also filter and regulate your feed with it. This guarantees that you have complete control over what your visitors view.

The PRO edition now has amazing Highlight, Masonry, and other layouts. It allows you to see how many comments and likes your Instagram post has received, as well as captions.

Spotlight is quick and dependable, and it won’t slow down your website’s load time. Also, the plugin has its own caching system that always backs up your Instagram feeds.

Install and Configure Plugin

To install Spotlight, go to your dashboard, choose Plugins. Search for “Spotlight Social Photo Feeds” in the search field.

Image is about go to your dashboard, choose Plugins. Search for "Spotlight Social Photo Feeds"

Select Install Now and then Activate.

Image shows activate

Your Dashboard menu will now include Instagram Feeds. To access the plugin options, click on them.

Image shows To access the plugin options

Select the appropriate option on the initial page to create an Instagram account.

We’ll use a Personal account in this example.

Image shows connect your Instagram account

The Spotlight will need your permission to access your Instagram profile data.

After you’ve connected your accounts, it will ask you to add a profile photo and a personalized bio. Instagram does not enable user bio and profile images to be moved into Personal accounts. But, Spotlight solves the problem with a simple patch.

Image shows add a profile photo and a personalized bio

After setting everything up, your feed will appear in the live interactive preview. Go to the Design tab and give your feed a name.

Image shows your feed will appear in the live interactive preview

You can do the following under the Design tab:

  • Set the number of columns and the number of posts to display.
  • Sort your posts (from newest to oldest, popularity or at random).
  • Open posts in a new or existing tab in a lightbox.
  • Set the feed’s width, height, and background color
  • Set the padding on the inner and outside, as well as the font size.
  • On hover, show or conceal the Instagram emblem in your posts.
  • Create your feed based on the device you’re using (desktop, tablet, and mobile)
  • Set the background color, font size, and text color, as well as the bio, and enable or deactivate the feed header.
  • Set the position of the Load More and Follow buttons. Also, adjust their background color, button text, and text color.

Image shows Design button

You’ll be able to filter and manage your feed with the PRO edition.

Image shows filter and manage your feed with the PRO edition

It’s time to incorporate the feed after you’ve customized it. The Embed tab will display a shortcode that you can copy and paste into any website, post, or widget.

The design settings you’ve set up under the Design tab will be used to show your Instagram feed. You can change these settings at any moment, and your feed will be updated on the front end automatically.

Image shows Embed button

You can also use Spotlight’s dedicated widget to display your feed.

Image shows Spotlight's dedicated widget

You’ve now completed the setup of your Instagram feed.

To access and manage all your feeds, go to “Feeds” on your dashboard. Spotlight shows you which accounts are active and where each feed is shown. You may also delete feeds and copy shortcodes with them.

Image shows feed dashboard

Add an Instagram Feed Using The Smash Balloon Plugin

This plugin for WordPress is another great option for your Instagram feed needs.

Image shows Smash Balloon Plugin

The Smash Balloon plugin takes care of everything. It has over one million active installations, regular updates, and good support. It connects to your Instagram account and displays your feed at the location you specify. You get to customize everything. This includes where you want the feed to appear and how soon it should get fresh content from your profile.

Install and Configure Plugin

To install the Smash Balloon Social Photo Feed plugin, go to your dashboard. Select Plugins, and then type the plugin’s name into the search field.

Image shows Select Plugins, and then type the plugin's name into the search field.

Select Install Now and then Activate from the drop-down menu.

Image shows activate button

The Instagram Feed option will appear in your Dashboard. To access the plugin options, click on them.

Image shows Instagram Feed button

Connect your Instagram account using the Configure tab(s). You can also manually create an account if the button isn’t working for whatever reason.

Image shows Connect your Instagram account using the Configure tab(s)

You may also specify how often the plugin should check for new entries here (in minutes, hours, or days).

Image is about check for new entries here

Select a box if you wish to keep your settings even after deactivating the Instagram feed plugin. That way, if you wish to reinstall it, you won’t have to reinstall it from scratch.

Even if the plugin is uninstalled, the settings will be saved.

Image shows plugin is uninstalled, the settings will be saved.

After you’ve connected your account, go to the Customize tab and click Save Changes.

Image about save changes by clicking customize button

You can do the following:

  • Set the feed’s width, height, and background color, as well as the number of photographs that will be shown.
  • Set the padding and column count.
  • Turn off the mobile layout.
  • Sort your photographs (from newest to oldest or random)
  • For your Instagram images, choose a resolution.
  • Enable or disable the feed header, change the height and color of the header, and add a bio.
  • Set the button backdrop color, button text, and text color. Also, select if the Load More and Follow buttons will be shown or not.
  • You should use Custom CSS and JS.
  • Configure your caching preferences
  • Select the icon method and enable or deactivate the icon font (SVG or Font File).

Now that you’ve customized the feed, it’s time to decide how you want it to be displayed. You’ll find a lot of shortcodes for various options below. These you may use anywhere on your pages, posts, or widgets.

Image shows Display Your Feed button

[instagram-feed] is the most basic shortcode. Your Instagram feed will be displayed according to the settings you’ve made on the Customize page. The plugin provides a wide range of potential shortcode choices for more customization. Simply enter your own values (size in pixels, number of posts, hex color codes, etc.)

Image shows Instagram feed will be displayed according to the settings you've made on the Customize page.

If you want your Load More button to say something else, like “Gimme more.” Use the shortcode [instagram-feed buttontext= “Load More Photos”] to replace “Load More Photos” with your own text

Now that you’ve got everything set up, it’s time to think about how you want your feed to look on mobile devices.

Return to the Customize section. The layout is the second customization option. A checkbox labeled “Display mobile layout” can be found here.

Image shows Display mobile layout button

If you tick this option, your Instagram feed will appear on mobile devices, as it does on your desktop page. This may not be a smart idea if your footer, for example, has six columns. On a large screen, it looks great, but on a mobile device, it’s too small.

If the “Disable mobile layout” box is selected, the plugin will display fewer columns on mobile by default.

That’s all there is to it. Your Instagram account is now completely set up and ready to use.

What Is the Best Way to Embed an Instagram Hashtag Feed?

So far, we’ve talked about using WP to create a basic feed that highlights your Instagram posts. But, as we mentioned before, Instagram Feed Pro has a lot more features. They include the ability to embed Instagram hashtag feeds on your website. Let’s have a look at how to do that next.

Step 1: Determine the Hashtag Feed Type

Instead of selecting the User Account option for showing photos.

You’ll need to select the Hashtag option to embed an Instagram hashtag feed on your website.

Image shows Determine the Hashtag Feed Type

Then type in the hashtags you want to see in your feed. You can display several hashtags by using a comma to separate them. It’s also simple to rearrange the posts in your feed by selecting Top (the most popular articles appear first) or Recent (the most recent posts appear first) (within 24 hours). Then save your changes by clicking the Save Changes button.

Then type in the hashtags you want to see in your feed. You can display several hashtags by using a comma to separate them. It’s also simple to rearrange the posts in your feed by selecting Top or Recent. Then save your changes by clicking the Save Changes button.

Step 2: Set Feed Moderation Options

Hashtag feeds often include public posts. So, there may be instances when you want to hide specific posts from your feed. This could be because the content is improper, offensive, or irrelevant to the users. Powerful moderation settings in Instagram Feed Pro allow you to exclude specific posts from your feed.

Go to the Customize tab and select the Moderation sub-tab. This will allow you to configure the moderation settings. You can use this section to filter, remove, or display photos with specified hashtags. Enter the hashtags you want to filter and then click Save Changes.

Image shows customize button

Or, you can filter posts on your live website using the visible moderation system. Scroll down the page and click Visual next to the Moderation Type heading to view those options. On the website, there is an embedded Instagram feed filter.

Image shows click Visual next to the Moderation Type heading to view those options.

When you’re finished, click Save Changes. You’ll now see an orange moderation button when you go to your live Instagram hashtag feed. Only logged-in users with Admin permissions can see this button.

Image shows an orange moderation button when you go to your live Instagram

You can select which posts you want to remove from your feed by clicking that icon. The top right corner of images you’ve regulated will have a red cross icon. But they won’t appear on your live website.

Image is about hide post from the top right corner

Add Instagram Feed to WordPress Without a Plugin

If you know enough JavaScript, you can embed your Instagram feed into WP without using a plugin. But, it is difficult for beginners to understand and relies on customizing a large amount of code. Using a WP plugin simplifies the procedure and avoids sudden breakdown. But, you can use the WP block editor to embed Instagram content in WordPress without the use of a plugin. To begin, go to your Instagram account and locate the post you want to embed in WordPress.

Image shows Embed Instagram Feed Without a Plugin

There are three dots in the top right corner of the post that looks like this. This indicates that there are more possibilities for you to choose from.

Select the copy link from the menu that displays when you click the dots.

Image shows Copy link

Copy the Instagram URL. Then, in WordPress, create a new post or page and put the link right into the block editor. The Instagram post will be embedded in the WordPress editor. This allows you to preview it before publishing.

Image shows This allows you to preview it before publishing

Then, to see your post live on your WordPress website, go ahead and publish it.

What should you do when your feed stops working?

There are a few common reasons if your Instagram pictures do not load and all you view is a loading symbol:

1) The Instagram Access Token you are using is causing an issue.

On the Instagram Feed Settings page, you can get a new Instagram Access Token. Click on the blue Instagram login button. Copy it into the Access Token field of the plugin and paste it in.

2) The JavaScript plugin file does not appear on your page

This is most likely because the wp_footer function for plugins to add JavaScript files to your page is missing. You can correct it by opening the themes footer.php file and adding this before the closing tag:

3) On your website, you have a JavaScript error. This prevents the JavaScript plugin file from running.

If this is the case, click on the ‘Inspect Element’ button on your page and then click on the ‘Console’ tab. Now select the ‘JavaScript Console’ option from the browser’s Developer Tools.

If a JavaScript error occurs on your website, you will see the JavaScript file that causes this error.

4) There are no Instagram posts on the feed you are trying to display

If a feed that has no posts is displayed on Instagram, a loading symbol or nothing is shown on the Instagram feed. Once you add an Instagram post, you should normally view the Instagram feed.

5) You use an incorrect shortcode

You may have an error in the shortcode in Instagram Feed that you use or missing a necessary argument.

Available shortcode options for customizing Instagram feed

You can find the options listed below on the Instagram Feed Settings page. You can also use them in the [instagram-feed] shortcode to configure individual feeds.

General Options

  • user – must have account connected– Example: [instagram-feed user=AN_INSTAGRAM_USER_NAME]
  • width – Any number – Example: [instagram-feed width=50]
  • widthunit –‘px’ or ‘%’ – Example: [instagram-feed widthunit=%]
  • height – Any number – Example: [instagram-feed height=250]
  • height unit – ‘px’ or ‘%’ – Example: [instagram-feed heightunit=px]
  • background – Any hex color code – Example: [instagram-feed background=#ffff00]
  • class – Add a CSS class to the Instagram feed container. Example: [instagram-feed class=feedOne]

Photo Options

  • sort by – Newest to Oldest (none) or Random (random) – Example: [instagram-feed sortby=random]
  • Num – posts to display initially. Most is 33 – Example: [instagram-feed num=10]
  • cols – The number of columns in your Instagram feed. 1 – 10 – Example: [instagram-feed cols=5]
  • imageres – The resolution/size of the Instagram photos. ‘auto’, full’, ‘medium’ or ‘thumb’ – Example: [instagram-feed imageres=full]
  • image padding – The spacing around your Instagram photos – Example: [instagram-feed imagepadding=10]
  • imagepaddingunit – ‘px’ or ‘%’ – Example: [instagram-feed imagepaddingunit=px]
  • disablemobile – Disable the mobile layout. ‘true’ or ‘false’ – Example: [instagram-feed disablemobile=true]

Header Options

  • showheader – ‘true’ or ‘false’ – Example: [instagram-feed showheader=false]
  • show bio – shows account’s bio in the header. ‘true’ or ‘false’ – Example: [instagram-feed showbio=false]
  • custombio – Custom Bio text for the Header – Example: [instagram-feed custombio= “My custom bio.”]
  • customavatar – URL of a custom Avatar. Example: [instagram-feed customavatar=”https://my-site.com/avatar.jpg”]
  • header color – feed Header text color. Any hex color code – Example: [instagram-feed headercolor=#333]

Load More’ Button Options

  • showbutton – ‘true’ or ‘false’ – Example: [instagram-feed showbutton=’false’]
  • buttoncolor – Any hex color code – Example: [instagram-feed buttoncolor=#000]
  • buttontextcolor – Any hex color code – Example: [instagram-feed buttontextcolor=#fff]
  • buttontext – Example: [instagram-feed buttontext=”Load More Photos”]

‘Follow on Instagram’ Button Options

  • showfollow – ‘true’ or ‘false’ – Example: [instagram-feed showfollow=true]
  • followcolor – Any hex color code – Example: [instagram-feed followcolor=#ff0000]
  • followtextcolor – Any hex color code – Example: [instagram-feed followtextcolor=#fff]
  • followtext – Example: [instagram-feed followtext=”Follow me”]

For more shortcodes, you could check the PRO version.

Conclusion

Instagram’s immense popularity as a content-sharing platform is growing each day. It’s no surprise that we see more and more Instagram feeds on websites all over the Internet. You risk appearing out of touch if you don’t use one, which you probably don’t want.

Connecting your Instagram account to your website is very simple. Especially if you’re using one of Qode Interactive’s themes that includes an Instagram feed built-in. Or, you might use one of the plugins mentioned before.

In any case, now is the moment to connect, upload, and share. You can now engage your visitors with relevant content, grow your Instagram following, and boost your business.

Load More Related Articles
Load More By Susana Taylor
Load More In How to

Leave a Reply

Your email address will not be published. Required fields are marked *