Using Smash Balloon to display your Instagram Feed
Including your social media accounts on your website plays a big role in displaying your work and promoting your brand. In this article, we’ll cover how you can display your Instagram Feed on your Flothemes website, with the help of the Smash Balloon plugin.
Flothemes Flo tip:
There’s no need to purchase the Pro version of the plugin to display your Instagram feed, the free version will do just fine.
1. Install the Smash Balloon plugin
There are two ways you can do this. You can either download the plugin on your own from here and upload it to your website, by accessing the Plugins tab in your WordPress Dashboard, clicking on Add New and then on Upload Plugin.
Or, you can still go to your Plugins tab and click on Add New, but then just find the plugin by using the search bar, and clicking on Install.
2. Connect your Instagram
Once you’ve installed the plugin you will see a new tab that says Instagram Feed, on your dashboard.
Once you access it, click on Add New follow the instructions to connect your Instagram Account. After clicking on Add Source you will be redirected and asked to give Smash Balloon permission to access your Instagram.
3. Customization
With your account connected, it’s time to customize the feed to your liking. Once your account is connected and selected as the primary source, you will be met by a new screen with Customization Options and Settings on the left side.
When you’ve finished customizing and setting up, just click on the Save button.
4. Adding the Plugin to your Flothemes Instagram Area
Our next step is to press the Embed button, to the left of the Save one, and then copy the shortcode.
The next step varies depending on whether you have a Flextheme or Pronto.
Pronto
In the case of Pronto you need to go to the Flotheme tab and from there access your Footer settings.
In here you need to access your Flotheme Footer template or your Custom Footer. Here click on the plus button, and find the Shortcode block.
Once you place the Shortcode block, paste the code that you copied previously inside of it.
Flextheme
In the case of a Flextheme you follow the same steps, by going into the Flotheme tab and Footer settings, and then add your Instagram Area as you would usually do. Afterward simply insert your shortcode.
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.
5. Mobile Styling
By default the Instagram feed on mobile will display 6 images stacked on top of each other. If you wish to have a grid layout instead, go to your Flotheme tab, then choose Generics, and finally Custom Code. There, introduce the CSS code below.
@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;
}
}