1. Home
  2. Florence
  3. Setting Up the Theme
  4. How to Add Instagram Widgets

How to Add Instagram Widgets

The Florence demo shows two Instagram feed, one in the sidebar and one in the footer. I’ll walk you through how you can add those to your website in more details, and how you can customize it.

The first thing you’ll need is the Instagram Feed plugin, which is a recommended plugin for the theme. If you’ve installed all the recommended plugins, you’ll already have the Instagram Feed plugin. Otherwise, go to Plugins > Add New and search for Instagram Feed. (You’ll want the plugin by Smash Balloon, in case there are many and you’re confused)

Now that you have Instagram Feed installed, here is how to set it up:

  • In your Admin Dashboard, go to Instagram Feed.
  • Click on the big blue “Log in and get my Access Token and UserID” button
  • Log into the Instagram account that you want to display on your website
  • Copy the Access token into the Access Token box, same thing for the UserID (if Instagram Feed doesn’t do it for you automatically)
  • Save everything

This will make Instagram Feed work, but there are still a couple of steps you should take.

customize your feed

To get the same layout as the demo theme, follow these steps:

  • In your Admin Dashboard, go to Instagram Feed.
  • Click on “2. Customize” at the top of the page.
  • Change the number of images to 6
  • Change the numbers of columns to 2
  • Change the padding between the images to 0
  • Uncheck “Show the Header”
  • Uncheck “Show the Load More Button”
  • Uncheck “Show the Follow Button”
  • Save everything

This will give you six image in two columns, which is perfect for the sidebar.

display your feed

To display your feed as you set it up before, use [instagram-feed] in a Text Widget.

To display your feed different in two places (like I did with Florence), you’ll want to add some properties to the shortcode above. In the footer, you would want to use[instagram-feed cols=6] . This will change the default layout of two columns to six columns (perfect if you have 6 images!)

To view more properties that you can use to modify how your feed looks in different places, follow these steps:

  • In your Admin Dashboard, go to Instagram Feed.
  • Click on “3. Display Your Feed” at the top of the page
  • Scroll for the property you want!

You can show the header in one place, change the number of images, add a follow button, etc.

If you wanted, you could step the “customize” step above and just change how your feed displays within the shortcodes instead of changing the defaults. Obviously, if something is repeated pretty often (like the number of images or if you don’t want the header), I would recommend setting that up in the defaults and keeping the small changes to the shortcode.