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.
- 1 Instagram Feed– What is it?
- 2 Add an Instagram Feed Using Qode Interactive Theme
- 3 Add an Instagram feed Using the Spotlight Instagram Feeds Plugin
- 4 Add an Instagram Feed Using The Smash Balloon Plugin
- 5 What Is the Best Way to Embed an Instagram Hashtag Feed?
- 6 Add Instagram Feed to WordPress Without a Plugin
- 7 What should you do when your feed stops working?
- 8 Available shortcode options for customizing Instagram feed
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:
Find Instagram among the social networks available and click on the Instagram link 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.
After you’ve connected your site to Instagram. You’ll be able to disconnect and reconnect by selecting the appropriate buttons.
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.
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.
Drag and drop the widget into the relevant widget space. After there, you can personalize the feed any way you like.
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:
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 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.
Select Install Now and then Activate.
Your Dashboard menu will now include Instagram Feeds. To access the plugin options, click on them.
Select the appropriate option on the initial page to create an Instagram account.
We’ll use a Personal account in this example.
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.
After setting everything up, your feed will appear in the live interactive preview. Go to the Design tab and give your feed a name.
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.
You’ll be able to 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.
You can also use Spotlight’s dedicated widget to display your feed.
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.
Add an Instagram Feed Using The Smash Balloon Plugin
This plugin for WordPress is another great option for your Instagram feed needs.
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.
Select Install Now and then Activate from the drop-down menu.
The Instagram Feed option will appear in your Dashboard. To access the plugin options, click on them.
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.
You may also specify how often the plugin should check for new entries here (in minutes, hours, or days).
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.
After you’ve connected your account, go to the Customize tab and click Save Changes.
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.
[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.)
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.
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.
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.
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.
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.
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.
Add Instagram Feed to WordPress 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.
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.
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.
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.
- 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]
- 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]
- 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.
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.