How to add an Instagram Feed to your WordPress Website for Free

Add a live Instagram Feed to your website.
Share This Post:

Let's use a free plugin to add a live Instagram feed to your website. I'll walk you through the process step-by-step. If you're more of a visual person, watch the Youtube tutorial above to see the process in real time.

The most popular plugin is Smash Balloon, which has both a free and paid version. The free version includes enough features for most people, and I use it frequently for my clients. Here's how to set it up:

Step 1

  • Head to your WordPress dashboard and hover over Plugins > Add New.
  • In the search bar, type "Smash Balloon"
    • The plugin you want to add is Smash Balloon Social Photo Feed.
    • Click Install Now, then click Activate.

Step 2

  •  
  • Notice that "Instagram Feed" has appeared in the left sidebar of your WordPress Dashboard. It will be near the bottom.
  • Hover over Instagram Feed > Click "All Feeds"

Step 3

  • Connecting your Instagram account is highly intuitive at this stage. Click the red "+ Add New" Button to start the setup wizard.
    • Under Select Feed Type, "User Timeline" is selected by default. Click Next
    • Now click the blue "+ Add Source" button
      • You want to ensure you're logged into the correct Instagram account before you start this step.
      • You will have to "Allow" the plugin to connect your account and verify your domain.
      • You will be redirected to your WordPress backend. Select the account you just added and click Next. If you would like to set up a profile picture now, you may do that. Otherwise, skip that step and come back to it later.

Step 4

  • Now you will see the Customize and Settings tabs for your Instagram feed.
    • Under the Settings tab, you can select the source for your feed (which we've already done when we selected your account in the previous step).
    • The options you can change under Settings will be limited unless you purchase the premium plugin.

Step 5

  • In the Customize tab, you can control the space between images, the number of images that show on different screen sizes, and the number of rows and columns. 
    1. You can also disable/enable features like the "Load More" and "Follow on Instagram" buttons, or customize the color of these buttons to match your website design.
    2. You can also enable/disable and customize the "Header" which displays the avatar and handle for your feed.

Step 6

  • Once you are happy with how your feed looks visually, click the Save button in the upper right hand corner.

Step 7

  • It's time to display your feed on your website. It can be placed anywhere you like using the shortcode.
    1. Next to the Save button, you'll see the Embed button. Click "</> Embed"
    2. Clicking the Embed button will generate a shortcode for your feed. It's possible to create feeds of many different styles using the same source, depending on how you want it to look on different parts of your website.
    3. Navigate to the page or post where you want to add your feed.
    4. If your WordPress Theme uses Gutenberg, search for the "shortcode" block and paste your code there. If your theme does not use Gutenberg, you can paste the shortcode in a regular text field.
    5. Update your page, and voila! You have a live Instagram Feed on your WordPress website.

Step 8

  • Keep in mind that any time you update the password of your Instagram account, it will affect the live feed on your website. If you do not update these settings in the plugin by re-adding your source, your Instagram feed will not update.
Follow @codeconfetti on Instagram →
© 2023 | Code+Confetti