Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Display Your Instagram Feed on Your WordPress Website

How to Display Your Instagram Feed on Your Website

Did you know that as of 2019 Instagram has over one billion active users? Regardless of your industry and niche, that is some potential you simply have to tap into. Everyone’s on it these days, even the big corporations, who use it to establish their brand personality and promote their business. But it’s not enough to just “be on Instagram.” To truly thrive on social media, you have to connect all your social profiles into one integral web presence that users can easily navigate between.

One of the best ways to keep your website visitors engaged with your Instagram activity is to add an Instagram feed on your website. We’re here today to give you some guidelines about that, but first let’s see what an Instagram feed actually is and how it works. Here’s what we’re going to cover:

What Is an Instagram Feed?

Instagram is a feed-based platform in itself, given that it works by displaying updated content in real time. Dynamic by nature, it makes a great addition to WordPress websites that aim to keep their visitors engaged with constantly fresh content.

An Instagram feed on a website means that the content you post on your Instagram profile (photos and videos) gets displayed and updated on your website as well. Not only will your visitors be up to date with your latest posts but you will also increase social engagement and interactions and raise the number of followers on your Instagram account. Plus, the Instagram content makes your website look fresh and dynamic with little or no effort.

Adding an Instagram Feed Using Your Qode Interactive Theme

The majority of Qode Interactive’s premium WordPress themes come with an Instagram feed already built in. If you have purchased one of our WordPress themes that have Instagram integration, here’s how to activate the feed and start sharing your Instagram posts directly on your website.

1. The first thing to do is to connect your website with your Instagram account (if you have several Instagram accounts, you will have to pick one to display on your site). In your Dashboard, go to general theme options. In our example, we are using Bridge, so the options are titled Qode Options. In themes made by other authors that are part of Qode Interactive, the name of the theme options will be Select/Edge/Elated/Mikado Options, depending on which theme you’re using.

Now click on Social to connect your account.

Qode Options Socila

2. Find Instagram among the available social networks and click the button that says Connect with Instagram.

Connect Qode Theme with Instagram

3. You will now be asked to authorize the theme to access your Instagram profile (your basic information, media and profile info). Click on Authorize to complete this step.

Authorize Instagram

4. Once you have connected your site with Instagram, you will be able to easily disconnect or reconnect by clicking the corresponding buttons.

Disconnect or Reconnect Instagram

5. After connecting your website with your Instagram account, it’s time to add the feed to your site. This is done using widgets. Go to Appearance > Widgets.

Add Widget

6. Here you’ll notice that there is a custom Qode Instagram Widget created just for this purpose, listed among the other available widgets on the left side of the screen.

Qode Instagram Widget

7. To add the widget, simply drag and drop it in the desired widget area. After that, you can customize the feed as you like.

drag and drop instagram widget

8. Set the title for your Instagram feed, add tags, specify the number of photos you want to display and the number of columns you want to use. You can also set the image size, cache time for images and add a hover effect, if you like.

Click on Done to save the changes.

We placed the feed in the footer of our site using the Bridge theme, and here’s what it looks like:

Instagram Bridge theme

Adding an Instagram Feed Using the Spotlight Instagram Feeds Plugin

If you’re using a theme that doesn’t come with our built-in Instagram feed, or if you prefer using plugins, then Spotlight Instagram Feeds is the right solution for you.

Spotlight Instagram Feeds

This WordPress plugin takes care of all your Instagram needs. You can connect multiple accounts, both Personal or Business, in a matter of seconds and display your feeds anywhere on your website.

Thanks to its live interactive preview, designing the look of your feed has never been easier. No matter your level of WordPress knowledge, you can easily set the number of posts and columns of your feed. The plugin’s intuitive and easy-to-use interface lets you seamlessly integrate your Instagram posts with your website’s theme and styling.

The free Instagram feed plugin offers everything you need to get started. It comes with a beautiful Grid layout that can display your posts in a lightbox (pop-up), is fully responsive and lets you add a “Follow” button to ensure your visitors can be converted into followers.

The paid version offers some more advanced features, such as the ability to display tagged and hashtag posts from all over Instagram, as well as your Instagram Stories. It also allows you to filter and moderate your feed. This ensures that you get to choose exactly what you want your visitors to see.

Additionally, the PRO version comes with stunning Highlight, Masonry and other layouts. It lets you display the number of comments and likes on your Instagram post, as well as display captions.

Most importantly, Spotlight is fast and reliable and won’t impact your website’s loading speed. The plugin also has its own caching system which makes sure that your Instagram feeds are always backed up!

Installing and Configuring the Plugin

1. To install Spotlight, you need to log into your Dashboard, click on Plugins, and type “Spotlight Social Photo Feeds” the name of the plugin in the search bar.

Add New Plugin

2. Click on Install Now and then on Activate.

Activate Spotlight

3. Instagram Feeds will appear in your Dashboard menu. Click on it to access the plugin options.

Instagram Feed in Dashboard

4. Choose between a Personal or Business Instagram account and select the relevant button on the startup page.

In this example, we’ll be using a Personal account.

Using a Personal account

You will need to authorize Spotlight to get access to your Instagram profile info and your media.

Once your account has been connected, you will be asked if you want to add a profile photo and custom bio. In the case of Personal accounts, Instagram doesn’t allow for user bios and profile pictures to be imported so Spotlight addresses this issue with a simple fix.

Spotlight addresses

5. Once you’ve got everything set up, your feed will automatically show up in the live interactive preview. Name your feed and head over to the Design tab.

Name your feed and head over to the Design tab

6. Under the Design tab you can:

  • Set the number of posts to be displayed and the number of columns
  • Sort posts (from newest to oldest, popularity or at random)
  • Open posts in lightbox, new or same tab
  • Set the width, height and background color of the feed
  • Set the inside and outside padding and text size
  • Show or hide the Instagram icon on your posts on hover
  • Design your feed according to your device (desktop, tablet and mobile)
  • Enable or disable the feed header, set the background color, text size and text color, and add the bio
  • Set whether the Load More and Follow buttons will be shown or not, their position, background color, button text and text color
The Design tab

7. In the PRO version, you will now be able to filter and moderate your feed.

Filter and moderate

8. After customizing the feed, it’s time to embed it. The Embed tab will present you with a shortcode which you can paste in any page, post or widget.

Your Instagram feed will then be displayed according to the settings you’ve set up under the Design tab. You can adjust these settings at any time and your feed will be automatically updated on the front end.

Get a shortcode which you-can place anywhere you want

Spotlight also has a dedicated widget which you can use to display your feed.

Spotlight widget

You have now successfully set up your Instagram feed!

In your dashboard, head over to “Feeds” to access and manage all your feeds. Spotlight lets you know which accounts are being used and where each feed is being shown. It also allows you to delete feeds and copy shortcodes.

Access and manage all your feeds
Qode WordPress Themes: Top Picks
Bridge WordPress Theme Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Biagiott banneri
Biagiotti

Beauty and Cosmetics Shop

Adding an Instagram Feed Using The Smash Balloon Plugin

Another excellent solution for your Instagram feed needs is the Smash Balloon Social Photo Feed plugin for WordPress.

Smash Balloon Social Photo Feed

Something of a veteran in its field, with over one million active installations, regular updates and excellent support, this is a plugin that takes care of everything. It connects with your Instagram account (or multiple accounts, if you have them) and displays the feed where you want it. You get to set everything just the way you like it, including where you want to add the feed and how regularly you want it to fetch new content from your profile.

Installing and Configuring the Plugin

1. To install the Smash Balloon Social Photo Feed plugin, you need to log into your Dashboard, click on Plugins and then type the name of the plugin in the search bar.

Add New Plugin

2. Click on Install Now and then on Activate.

Activate Plugin

3. Instagram Feed will appear in your Dashboard menu. Click on it to access the plugin options.

Instagram Feed

4. Use the Configure tab to connect your Instagram account(s). In case the button isn’t working for some reason, there’s also an option for adding an account manually.

Instagram Feed Configure tab

Here you can also set how often you want the plugin to check for new posts (in minutes, hours or days).

check for new posts

There’s also a box you can check if you want to keep your settings even after the Instagram feed plugin is removed. That way, if you decide to reinstall it, you won’t have to set everything back again to how it was.

keep settings even after the plugin is removed

5. Once you’ve connected your Instagram account, click on Save Changes and proceed to the Customize tab.

Customize tab

Here you can:

    • Set the width, height and background color of the feed
    • Set the number of photos to be displayed
    • Set the padding and number of columns
    • Disable mobile layout
    • Sort photos (from newest to oldest or random)
    • Set image resolution for your Instagram photos
    • Enable or disable feed header, set header size and color and add the bio
    • Set whether the Load More and Follow buttons will be shown or not, set the button background color, button text and text color
    • Add custom CSS and JS
    • Set caching preferences
    • Enable or disable icon font and select the icon method (SVG or Font File).

6. After customizing the feed, it’s time to set how you want to display it. Here you basically get a number of shortcodes for different options, which you can place anywhere you want on your pages, posts or widgets.

Display Your Feed Tab

The basic shortcode is [instagram-feed]. By using it, your Instagram feed will be displayed in accordance with the settings you’ve made using the Customize tab. For additional options, the plugin offers a long list of available shortcode options. Just add your own values (size in pixels, number of posts, hex color codes, etc.)

Available Instagram Shortcode

For example, if you want your Load More button to say something else, like “Gimme more,” use the shortcode [instagram-feed buttontext="Load More Photos"] and replace “Load More Photos” with your own text.

7. After setting everything up, it’s time to decide how you want your feed to be displayed on mobile devices.

Go back to the Customize tab. The second customization option is Layout. Here you’ll see a checkbox saying “Display mobile layout.”

Instagram feed displayed on mobile devices

If the box is checked, your Instagram feed will be displayed on mobile devices the same way it is displayed on your desktop page. This may not be a good idea as you may have, for example, six columns in your footer. It works well on a big screen, but on mobile it’s simply too tiny.

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

And that’s it. Your Instagram feed is now fully set and ready to go.

Final Thoughts

Considering the enormous popularity of Instagram as a content sharing platform, it’s no wonder we see more and more of these Instagram feeds on websites all over the Internet. If you’re not using one, you risk appearing out of touch, and you probably don’t want that.

Fortunately, connecting your Instagram account with your website is extremely easy to do, especially if you’re using one of Qode Interactive’s themes that come with built-in Instagram feed. Alternatively, you can always use one of the plugins we discussed above.

Either way, it’s time to connect, upload and share!

Post your comment

Comments2
  • Ashlea Berkhout
    4 months ago

    When will the instagram feature be fixed?

    • Qode Interactive
      4 months ago

      Hi and thanks for getting in touch. Unfortunately, the issues with the Instagram feature are a result of changes to the Instagram API. Our development team is working hard on a permanent solution and we hope to roll out a fix soon. In the meantime, we recommend using this third-party plugin as a temporary solution: https://wordpress.org/plugins/instagram-feed/
      Best Regards,
      Qode