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 integrate the Instagram feed into your Pronto Theme.

Basically, you can integrate it wherever you want, but in this article, we will consider integrating it into the footer area. 

For example, we will take the Footer Type A and edit it in order to add a new shortcode block for inserting the Smash Balloon shortcode as shown: 

Now, you're all set! You can go ahead set the Type A Footer as global.

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! You will have the images displayed in 2 columns for the mobile!

@media screen and (max-width: 767px) {  
#sbi_images {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}
#sbi_images .sbi_item,
.sbi_item .sbi_photo_wrap,
#sbi_images .sbi_item .sbi_photo_wrap .sbi_photo {
   width: 11rem !important;
   height: 11rem !important; 
}
}
	
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