How to Add Your Instagram Feed on WordPress

If you want to showcase your Instagram feed on your WordPress website, I have found just the plugin for you! In this blog article I will walk you through step-by-step how to install and setup this plugin on your WordPress website. 
Please Note: These instructions are for self-hosted WordPress blogs (aka “WordPress.org blogs”) — not WordPress.com blogs.

The Instagram feed will appear in a box with your Instagram profile picture, name and description at the top. Your Instagram posts appear below that header section. And at the bottom there is a Follow button for your website visitors to easily follow you on Instagram. You can look at my blog’s sidebar on the right to see how this looks:

Instagram feed in WordPress sidebar

 

Step 1: Install the WordPress Plugin

  1. In your WordPress dashboard, go to Plugins > Add New.
  2. Search for “Instagram Feed”. There are several plugins with this same name; but you want the Instagram Feed plugin by Smash Balloon.
  3. Click the “Install Now” button to install the plugin.
  4. Then click the link to Activate it.

Instagram Feed WordPress Plugin by Smash Balloon

 

Step 2: Connect your Instagram Account

  1. Click on “Instagram Feed” in your WordPress Navigation menu (on the bottom left side of the screen).
  2. Click on the “Instagram – Log in and get my Access Token and User ID” button.
  3. You will need to login to Instagram (if you aren’t already). Then click the “Authorize” button.

     Connect your Instagram Account to the Instagram Feed WordPress Plugin   

  4. You will now see a box with an “Access Token” and a “User ID”. Copy and paste these into the “Access Token” and “User ID(s)” text boxes.
  5. Then click the “Save Changes” button.

Customize your Instagram Feed on WordPress

 

Step 3: Customize the Appearance of your Instagram Feed

  1. Click on the “Customize” tab to choose how you want your Instagram feed to look on your website.
  2. Select your settings. You can leave this “as is” to go with the default settings. Or you can customize a TON of different things with the appearance of your feed. Some examples include changing the background color of the feed, choosing how many photos you want to show, selecting the color and text of the buttons, choosing the sort order of your images, and more.

    Customize the Appearance of your Instagram Feed on WordPress 

  3. Click the “Save Changes” button.

Step 4: Display your Instagram Feed on your Website

You can add your Instagram feed to any widget area on your website (for example, your blog’s sidebar). Paste this shortcode in a Text Widget (Appearance > Widgets):

[instagram-feed]  

 

Display your Instagram Feed on WordPress

You can also use this same shortcode to display your feed in a Page or a Post.

Additional Customization of the Instagram Feed

There were a few things I wanted to customize with the appearance and behavior of the Instagram feed on my website, that weren’t available as settings within the plugin. However the plugin settings DO include spots where you can code your own customizations! So let’s get a little techy, shall we?! Here are the customizations that I made to my Instagram feed in my sidebar, in case you want to use them on yours too:

Use CSS Code:

On the “Customize” tab of the plugin settings, there is a “Custom CSS” box at the bottom. You can enter in CSS code to change the design of your Instagram feed. Here are two examples that I coded on my website:

  • Change the font and font size of your Instagram handle in the header: .sbi_header_text {   …   }
  • Remove the Instagram account description from the header: .sbi_header_text .sbi_bio {   …   }

CSS Code to Customize the Appearance of your Instagram Feed on WordPress 

Use Javascript or JQuery Code:

On the “Customize” tab of the plugin settings, there is a “Custom Javascript” box at the bottom. You can enter in Javascript or JQuery code to customize the plugin. Here is an example that I coded on my website to prevent the Instagram images in the feed from being pinned on Pinterest: 

JQuery Code to Customize the Appearance of your Instagram Feed on WordPress 

PRO Version of the Plugin:

If you still want even more features – there is a Pro version of the plugin available.  Some of the extra features of the Pro version include:

  • Display photos by hashtag, by location, or even photos that you’ve liked on Instagram
  • Play videos
  • Display photo captions
  • Show number of likes and comments
  • and more…

Don’t forget it… Pin it! Pin it to Pinterest

Tutorial: How to Add Your Instagram Feed on Worpdress

Download my Ultimate Checklist for Creating a Website that helps you Stand Out Online!

Ultimate Checklist for Creating a Website

Woohoo! Your website checklist is on its way! Check your email for your free download.