How to use Smash Balloon to display your Instagram feed?

 If you're looking to integrate your Instagram feed with your Flotheme, we recommend installing the Smash Balloon plugin.

Important Note

There's no need to purchase the Pro version of the plugin, the free version will suffice. 

Please follow the steps below to integrate and customize your feed.

  1. Install and activate the plugin -  https://wordpress.org/plugins/instagram-feed/
  2. Connect to your Instagram account. You'll be redirected to an Instagram login page where you'll need to use your IG login details.

    After that, you'll be asked to give access to the Smash Balloon plugin. Click on Authorize.
    If the connection will be successful, you'll see your account in the plugin's settings (near Instagram Accounts)

3.    Configure the feed layout: We chose 6 photos with 6 columns, which is similar to our theme's demo. 

Go to your Instagram Feed settings and select the resolution as in the screenshot below.

Under Customize (in the same area), you can enable the option called  "Disable Local Image Storing and Resizing" to have sharper images. 

Please deselect the other options from this area, we can not guarantee that all options will be compatible with the layout/ styling you selected.


4. On the 'Display Your Feed" tab, copy the plugin's shortcode:

Now, we'll need to add the plugin to your Flotheme Instagram area.

1. Go to FloTheme > Footer and add the Instagram Area as you'd normally do:

Then simply add your shortcode in this area.
Note: If you're seeing the "Flo Instagram Plugin" option instead of the "Shortcode" option, please check whether you have the latest version of your theme installed. The Shortcode option is available starting with version 2.6.0 for Flexthemes.

Last Step: Styling for Mobile

By default, on mobile, the Instagram feed would look like 6 images stacked on top of each other. If you want to have a grid instead, add this CSS snippet into your theme. Go to Flotheme -> Generics -> Custom Code. Paste the Css snippet into this section. Done!

@media screen and (max-width: 767px) 
{  
#sb_instagram #sbi_images { 
display: flex;
 flex-wrap: wrap;
}
div#sbi_images>* {
    flex: 1 1 120px;
}
 .sbi_item.sbi_type_image {
    max-height: 10rem !important;
}
}
	

If you want to display only 4 images 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us