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 and following this tutorial on how to set it up.

Important Note

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

After the plugin is set up and customized, we'll need to integrate the Instagram feed into the 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 where we will add the Smash Balloon shortcode: 

Now, you're all set! You can go ahead and 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 the following CSS snippet on your website by going to Flotheme → Generics → Custom Code:

@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; 

}

}

Done, you will have the images displayed in two columns on the mobile devices!