Installing and customizing the Smash Balloon Social Photo Feed (Instagram) plugin

As of autumn 2019, we have updated our themes to be compatible with the Smash Balloon Social Photo Feed plugin. This plugin can be used to display an Instagram feed on your site, which automatically updates as new images are published to Instagram. Below, learn how to install and customize this plugin.

NOTE: If you purchased a theme prior to November 19, 2019, be sure to run your latest theme updates to ensure you'll see the same prompts and options in your Customizer as described below. Learn how to update your theme here.

This article will cover:

• Installing the Smash Balloon Social Photo Feed (Instagram) plugin
• Authenticating & Customizing the plugin
• Adding the plugin/Instagram feed to your site
• How to tweak mobile display settings for the plugin

1. After theme install or theme update, look for the notification across the top of your Dashboard prompting you to install the Smash Balloon Social Photo Feed plugin. Here is what it looks like:

2. Click Begin installing plugin. In the screen that loads, click Install. If successful, a screen will load that ends with the message Successfully installed the plugin Smash Balloon Social Photo Feed. Here is a video of this step:

3. Next, navigate to your plugins tab. Scroll down and find the Smash Balloon Instagram Feed plugin (plugins are listed alphabetically!). Click the blue Activate link.

1. With the plugin activated, look for the Instagram Feed tab in your Dashboard on the left. Click on this, and begin by filling out the settings in the 1. Configure tab (see the bullets below this image for our recommendations on these settings). Once completed, click Save Changes.

Here are the major settings to fill out, and what each will entail:

• Click the blue +Connect an Instagram account button. If you don't see the button displayed as shown in the screenshot above, click the blue Manually Connect an Account button. In the screen that loads, select whether you are connecting a Personal or Business account. You will need to authenticate the app via Facebook in the following screen that loads. As is common with connecting via Facebook, please look through the privacy and share settings and ensure you are connecting the desired account. Once satisfied, click OK.
• Make note of the Add to another Feed button. We'll be coming back to this later!

• Decide how frequently you would like the plugin to check for new posts.

2. Next, click on the 2. Customize tab. Here, you can setup your feed to your aesthetic liking. Once your settings are selected, click Save Changes. 

Within the settings options, adjust these items:

• General: Leave the width of the feed at 100%. For background color, you can select the color of your choice. If you are placing the widget into an Interstitial or Footer area that has a color background, you may wish to select the same color as that background so the Instagram widget does not have a white frame around it. If you're not sure what color to choose, select white.
• Layout: Select the total number of photos you would like to feature. We think 6-9 is a great place to start. If you want a single row of images, be sure to select the same number of columns as you select number of photos. The Padding around images option refers to how much space is between each image. Stick with the default, and adjust up or down based on your preferences once you see the widget live.
• Photos: Select whether you would like to sort photos from newest to oldest, or at random.
• Header: Uncheck the Show Feed Header option, and also uncheck the Show Bio Text option.
• 'Load More' Button: Be sure to uncheck Show the 'Load More' Button. Our themes have not styled this button, and it will not match the style of your theme.
• 'Follow' Button: Be sure to uncheck Show the Follow Button. Our themes have not styled this button, and it will not match the style of your theme.

3. We're ready to add your Instagram widget to your theme! Head back to the 1. Configure tab, then click the Add to Another Feed button. Look for the shortcode that includes the single instance of your username, and copy and paste the code. Here's where to find it:

1. Let's head to your Theme Customizer to get this code installed! Head to Appearance > Customize to load the Customizer. Next, click on the Widgets tab and select which interstitial or footer area you would like to add the feed to by clicking on it.

2. Add a Custom HTML widget to the desired widget area. Then paste in your Smash Balloon shortcode. Your Instagram widget will now appear! If you'd like, add a title to the Custom HTML widget, which will appear centered over your feed.

Here is a short video showing a user adding their Instagram feed to the Footer Featured area in the Hayes theme:

The Smash Balloon plugin provides options to enable or disable a mobile layout. By default, the mobile layout is automatically enabled, which stacks the images into a single column, like this:

Note how each Instagram image is stacked atop each other, and takes up the full width of the mobile browser window.

If you prefer to keep your Instagram images inline, use the following settings to disable mobile stacking:

1. Navigate to the Instagram Feed tab from your WordPress dashboard, then click on the 2. Customize tab.

2. Scroll down and look for the Layout section. Under the Disable mobile layout setting, check the box, then click Save.

3. Your Instagram feed will now display in a single row, like the example below. Note that the number of columns you have set within the plugin's Layout section will correspond to how many images appear inline on a mobile device.

If you wish to further customize the look of your Instagram feed on mobile, you may do so with your own custom CSS, implemented through Appearance > Customize > Additional CSS.