How to Add an Instagram Feed to WordPress

There are many WordPress plugins that can assist you to bring your Instagram account into WordPress.

However, we have been using Instagram Feed by SMASH balloon and it’s been working really well.

The plugin has a free and commercial version that is fully supported and historically has been updated to be compatible with the latest version of WordPress.

In this post it is assumed you already have an Instagram account and I will go through the setup of the Instagram Feed plugin on a WordPress website.

Overview

  1. Install Instagram Feed Plugin
  2. Configure Instagram Feed Plugin
  3. Customize Your Instagram Feed
  4. Display Your Instagram Feed

1. Install Instagram Feed Plugin

From the admin area of your website go to Add Plugins and search forinstagram feed and install.

Instagram Feed WordPress Plugin

When the plugin has been installed and activated a new menu item, Instagram Feed, will be available in the left sidebar menu.

instagram-feed-configure

2. Configure Instagram Feed Plugin

The first step to configuring the plugin is clicking on the big blue button – “Instagram – Log in and get my Access Token and User ID”.

Instagram Feed Authorize Access

By clicking the Authorize button the plugin will automatically obtain the Access Token and User ID from your Instagram account. You will be requested to log into your Instagram account if you are not already logged in.

  1. Copy the Instagram Access Token value into the Access Token field.
  2. Copy the Instagram User ID value into the Show Photos From: User ID(s) field.
  3. Click Save Changes to record this information.

Instagram Feed Access Token and User ID

Display Feeds from Multiple Accounts

You may display photos from other Instagram accounts in your feed by entering other User IDs separated by a comma.

To obtain other User IDs from public Instagram account you can use the tool provided here – https://smashballoon.com/instagram-feed/find-instagram-user-id/

If you want to locate or deauthorize this feed from Instagram go to the Authorized Applications in your Instagram account in Profile > Edit Profile > Authorized Applications or use this link  https://www.instagram.com/accounts/manage_access/

3. Customize Your Instagram Feed

Under the Customize tab you have access to modify how your feed is displayed. I like to have a feed of the Instagram images displayed in a sidebar widget (see next step) without any other links or information. These are the options to select for this feed, which are basically the default values with sections turned off.

Customize

  • Width of Feed: 100%
  • Height of Feed: [blank]
  • Background Color: [blank]

Photos

  • Sort Photos By: Newest to oldest
  • Number of Photos: 20
  • Number of Columns: 4
  • Image Resolution: Auto-detect
  • Padding around Images: 5px
  • Disable mobile layout: [unchecked]

Header

  • Show the Header: [unchecked]

‘Load More’ Button

  • Show the ‘Load More’ button: [unchecked]

‘Follow’ Button

  • ‘Follow’ Button: [unchecked]

Click the Save Changes button.

Instagram Feed in Sidebar Widget

Instagram feed displayed in the sidebar using a Text Widget.

Best thing I can recommend is to simply play around with the settings to see what works best for the Instagram feed on your website.

4. Display Your Instagram Feed

On the Display Your Feed tab there are instructions about the shortcodes that you can use in your posts and pages to display your Instagram feed. The basic shortcode [instagram-feed] will often be suitable as you may only use your feed in one position on your website.

However, you may have multiple Instagram accounts in your feed. In this situation, I like the shortcode option that allows you to determine which feed is displayed, how many columns and how many images.

For example, you may want to display 12 images in two rows at the base of your post for the User ID of 9211195 (Garmin). So, the shortcode would be [instagram-feed id=9211195 num=12 cols=6]Note: If you have two User IDs in your feed then 12 images in two rows will be displayed for each User ID. Therefore, 24 images in total displayed across four rows.

Override Your Default Feed Settings in Shortcodes

The default feed we use does not display the feed heading, or the “Load More” or “Follow” buttons. However, this doesn’t mean we cannot display these features on our feed. If we add instructions into the shortcode then we can modify the default feed and override the defaults we setup in Step 3. For example, the following shortcode displays the header, “Load More” and “Follow” buttons:

[instagram-feed id=9211195 num=12 cols=6 showheader=true showbutton=true showfollow=true]

instagram-feed-garmin

Customized feed in a post showing header, ‘Load More…’ and ‘Follow on Instagram’ buttons.

Add Feed to Sidebar Using Widget

To add an Instagram feed into the website sidebar I simply drag a Text Widget into my Sidebar Widgets and add the default shortcode[instagram-feed].

Add Instagram Feed to Sidebar Widget

Summary

The Instagram Feed plugin by Smashing Balloon is a great plugin that is easy to setup. Even with the free version there are many options available allowing you to configure your Instagram feed to your preference. It’s a plugin that we use and recommend.

Scroll to Top