Looking for something?

How to display your Instagram feed on your WordPress website

Did you know that Instagram now has over 1 billion monthly users?

That’s incredible, isn’t it!

Over the years, Instagram has become a massive part of blogging and our online presence. It’s often referred to as a micro-blogging platform with users sharing snippets of their lives in real-time.

With many feeds being super curated and heavily themed these days, users want to showoff their photos in more places than just the app. Many bloggers like to proudly display their Instagram feed on their blogs as well.

If you are a WordPress user then you can easily display your feed on your website using a simple to use free plugin that you can easily customise.

In this post I’ll show you how to display your Instagram feed on your website using a plugin, and I’ll show you how to customise the appearance of your feed.


1 | Install the Instagram Feed plugin

First things first you need to install a plugin called Instagram Feed. This plugin has over 600,000 active installations on WordPress website so you know it’s good!

It is a free plugin but there is a paid premium version of the plugin which comes with additional features. For the purpose of this tutorial, we’re just going to be looking at the free version.

Hover over Plugins in the left hand menu and click Add New.

Plugins in WordPress | HollyPryce.com

Then when you are on the Plugins page, search for “Instagram Feed” and you should see a plugin that looks like this:

Instagram feed plugin for WordPress | | HollyPryce.com

Click Install Now and when prompted to click Activate.

2 | Connect to your Instagram account

After Activating the Instagram Feed plugin you will see a new item in the left hand menu. It’s called Instagram Feed and it looks like this:

Instagram Feed link | HollyPryce.com

Click on this link. This will take you to the Instagram Feed page.

To connect your Instagram account, click the big blue button that says Connect an Instagram Account.

Connect an Instagram account to the Instagram feed plugin | HollyPryce.com

You will then be asked to sign into the Instagram you want to connect to.

Once you have logged into your Instagram account you will be taken back to WordPress and you will see that your account has successfully been connected.

Instagram account connected to the Instagram Feed plugin | | HollyPryce.com

You’ll noticed on this page that if you have the premium version of the plugin you you can choose to display posts with certain hashtags, posts tagged with a certain location or even choose specific single posts to display.

3 | Display your Instagram feed on your website

To display your Instagram feed on your website, you will need to use a shortcode. This shortcode can be used within a widget, within a post or page, or directly in the PHP code (if you are comfortable with editing theme files).

To obtain this shortcode, click on the Display Your Feed tab on the Instagram Feed page. The shortcode is the small piece of code highlighted below:

Display your feed shortcode | | HollyPryce.com

Make a copy of this code because you’re going to need this for the next steps.

Now you need to decided where you are going to put your Instagram feed. As I say, you have a number of options:

1 | Display your Instagram feed using a widget

To display your Instagram feed using a widget, head over to the widget page by hovering over Appearance in the left hand menu and clicking Widgets.

Widgets in WordPress | | HollyPryce.com

On the widgets page, find the Text widget and add it to a widgetised area of your website.

Open up the Text widget and in the content area, paste your shortcode like so:

Text widget with Instagram feed shortcode | | HollyPryce.com

Save this and then take a look at what your Instagram feed looks like on your website. Here’s what my feed looks like when I add it to the sidebar of the Twenty Seventeen theme:

Instagram feed in sidebar | HollyPryce.com

2 | Display your Instagram feed within a post or page

To display your Instagram feed within a post or page, head over the post or page that you want to add it to (or create a new one) and paste the shortcode into the content area.

Instagram Feed shortcode in a page | HollyPryce.com

Now preview your page to see the feed. This is what my feed looks like on a page using the Twenty Seventeen WordPress theme:

Instagram Feed on a page | HollyPryce.com

3 | Display your Instagram feed using PHP

You may or may not know that shortcodes can be displayed anywhere on a WordPress website using PHP. The code you would need to display your feed would be:

<?php echo do_shortcode("[instagram-feed]"); ?>

Only edit your theme files if you feel comfortable enough using PHP.

4 | Customise your Instagram feed

Now that you have seen what your feed looks like on your website, it’s time to customise it.

To customise your feed, go back to the Instagram Feed page and click on the Customize tab.

Instagram Feed customize | HollyPryce.com

Here you find lots of settings to help you to customise the appearance of your theme. You can customise:

  • Width and height of the feed
  • Background colour of the feed
  • Number of photos
  • Number of columns
  • Padding around each image
  • Order of images (newest to oldest or random)
  • Image resolution
  • Whether or not to show the header information
  • Whether or not to show the “Load More” button and the “Follow” button

You can also add your own custom CSS and JavaScript here if you need. If you need a hand with more complex styling, I can help out.


Get access to my freebies library!

My exclusive freebies library contains cheatsheets, checklists and other resources to help you to create and run your dream website.

To access my freebies library and join my community just fill in the form below. Find out more information about my community right here.


Are you following me on Instagram yet? Be sure to check out my account!

How to display your Instagram feed on your WordPress website | HollyPryce.com

Leave a comment

Comment

* = Required. Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.