Add your Instagram Feed to your WordPress site

This is a quick and easy tutorial, so it wont take up too much of your time. You will learn how to add your Instagram feed straight onto your WordPress site using a fun and user-friendly plugin, in just a few clicks.

Step 1:

First you need install the ‘Instagram Feed‘ plugin made by ‘Smash Balloon‘. If you’re new to WordPress and don’t know how to install plugins, you can refer to my other tutorial here: How to install a WordPress plugin

Step 2:

Once you have installed and activated your plugin, you will see a new menu item to the left called ‘Instagram Feed‘.
Go ahead and click this link. You will be taken straight the the settings page:

Pixel Boutique | How to add your Instagram Feed to your WordPress Website | WordPress Tutorials

There are a few options here that are only available in the pro version, so feel free to upgrade to pro if those features are something you are interested in, however, I feel that the free version is sufficient enough for my needs.

Step 3:

We now need to connect your Instagram account to the plugin:

  • Click the big blue button labelled ‘Connect an Instagram Account
  • Select ‘Personal‘ on the pop up box and click ‘Connect
    (You may be asked to sign in to your Instagram Account somewhere along the way)
  • Click ‘Continue’
  • Click ‘Connect This Account

And that’s it.
Your account should now be connected:

Pixel Boutique | How to add your Instagram Feed to your WordPress Website | WordPress Tutorials

Shortcode:

If the WordPress theme you are using as an Instagram feed integrated, you should see this on your site now. If not, or you want to add it elsewhere, you can do so using the plugin shortcode – instagram-feed – you can place this in any text content editor, text widget or post.

Simply add the instagram-feed shortcode and it will appear right where you placed it: [*instagram-feed*]
(Please note: * are to show shortcode in text format – please remove both * for the shortcode to work).

Styles:

We can now customise the display and change up the look of our feed.

Near the top of the Instagram Feed settings page, click the ‘Customise‘ tab.
Here you have various options to change the look of your feed.

Background colours, the width of your feed, number of photos to display, number of columns, etc etc.

For example, my feed (located in the sites footer) uses the following settings:

  • Width: 100%
  • Photos display: 6
  • Columns: 6
  • Padding: 0

Pixel Boutique | WordPress Tutorials | Add Instagram Feed to Website

 

And that’s it really.

Have a play around with your display settings and see what layout and style you can come up with.
Any questions, please comment to ask and I’ll help where I can!

Happy feeding fellow IGers.