One of the quickest and easiest ways to update your homepage is to add an Instagram feed to your website.
This is a really cool way to actually add a little bit of movement onto your home page. It’s a really good way to showcase your latest posts and update your website constantly without needing to change yo your homepage.
So today I’m going to show you one of my favorite little plugins. It is a quick and easy plugin to set up. It has a bonus offer to go into their premium mode which gives you some more styling that you can do, carousels things like that. But I actually really like their static just default, free plugin. So let’s jump into WordPress and check it out.
Now, this plugin will work with any page builder or your default themes in WordPress. It’s a really easy one to just lock and load and get your Instagram feed set up on your home page really quickly, really easily, and for free. So let’s do it.
Follow Along on the Video to watch me install and configure this plugin.
In your WordPress admin navigate to Plugins > Add New and search for Smash Balloon.
LINK: Smash Balloon Social Photo Feed.
This is the one that I use and it’s the one that I recommend.
It’s really solid. They update it really regularly. It’s nice and secure.
So what you want to do is if it isn’t active already, this will stay ‘install now’ and you’ll want to go ahead and click that.
It’s going to download everything for you and then you’re going to hit Activate. Now that button will be from Blue and once you’ve got it active, it’s going to show like this.
Once you’ve installed this and activated it, you’re going to see a new link in your Sidebar which is Instagram feed. So let’s click on into there and see what this looks like.
Now, this is a brand new installation here. So I’m actually going to walk you through how this sets up because even when I’m building this for a client, I need you to go in and update the feed on here. So let’s go ahead and do it and connect it all up and load in some Instagram posts. So we’re going to start with Add New and we’re going to go with user timeline. Now, as I said, there are extra features that you can unlock if you do go up to Pro.
But with this particular one, I just like to use the timeline. You only want to have four or five of your own images here. It’s a great way to show that. So we’re going to go ahead and click next and then we’re going to be able to add a source. Now, this is going to redirect us and it’s going to allow us to log into Instagram here.
So I am going to unclick that one. You can leave that and get the get started emails. They’re not that important, but you want to go ahead and click login with Instagram. Now, this is the important place where you are the one to actually install this, because it’s going to log in to your Instagram account and you have to allow it to read from your Instagram account. So it’s click allow right there and it’s doing all of the work in the background.
Now, as you’ll be able to see this will show my feed on this client’s website, but we’re going to update this later. So that’s all right. For the purpose of this tutorial, that’s going to work for us. So we’re going to click next on here and it’s going to do all of the work in the background. So we don’t really have to think about it much.
We do have the option here to actually go through a tutorial where they walk us through how to install it, which is amazing, always helpful.
So we can go down to here and actually customise our feed layer. Now because this is the free version, you don’t have a heap of options here. But as I said, I like to actually do this just as five, six images across the bottom of the footer and it works really well.
So let’s set our height at say let’s go with five posts and we’re going to do the same with mobile. We can make these five posts and we’re going to make our columns five wide. Now, as you can see, this is too small for our feed here. So I’m going to come back to this because we’re actually going to recreate this header here as well. So I prefer to have zero padding, which is the spacing between these images.
That’s going to give us some really good layout and then we’re going to tweak this quite a bit. So let’s give this a high save of 400.
Ok. Now, as you can see, this is Loading everything on here, but I want to just make this a little bit snap here. Now, I prefer to have the header off, so that takes away that top link in there, which is quite bold. It just doesn’t suit the look what I’m after. And now we’re going to turn off.
I like to turn off the follow button and the load more button. What you can do with this is actually build this into your theme. So what you’ll see in a moment when I actually put this into this client’s website is that it’s actually embedded into the footer in Divi. So as you’ll know, with all of my websites, I love to use Divi because of how much we can customise it. And if you jump on over to this one, over to my website, you can actually configure to have follow on Instagram all of the links into the site and actually have just these posts displaying in by themselves.
So I actually like to take all of the buttons off and leave it just simply as the feed. You can also have in the Pro version, the light box. So they’ll pop up into a light box. But this will allow your users to click on any of these and be taken to Instagram. So really great, nice, easy, simple way of doing it.
I’m going to go ahead and click save and then we’re going to embed it into our site. So we’ve got this shortcode here. I’m just going to copy that and I’m going to go down into our theme builder. Now, as I said, this is going to work on my client’s theme and then we’re going to update this feed for her at a later time. So it actually has her Instagram in here.
But you can do this just on your own. And it’s a really nice way to customise so into the theme build up. What I can see here is this is my photo layout and I want to actually have the feed show up in a straight row.
And we’re going to put this above this footer. So I’m going to use the code module, always a great little snippet and we’re going to add that shortcode into there. So I’ve just pasted that into there, going to click save and then I’m going to take this and drag it up. Now, here is where we can see that height. That 450 is too high for what we’re after.
So let’s go ahead and do some configuring here as well. Now, this will just be dependent on how many images that you’re using, whether you want to go full width on the page, whether you want two rows, things like that. This is going to give you a lot of customization that you can use with the site. So we’re going to set this one full width. And as you can see, this actually starts to Resize our images.
And now that height is too much. So we can just change this down until they fit or we can Resize that box altogether. Now, 65 actually works really well. So let’s go ahead with that. And what we’re going to do is just make sure that we’ve got no spacing in here.
And same thing, you can customise this however you like. Let’s turn on some padding here. We’re just going to bring this down so that it actually really fits. Now, as you can see with this being responsive, it is moving quite a bit. So let’s set this in here as well so we can set the height in here to match the height of our plugin but let’s just take this down a bit.
Now if I set this as a Pixel number rather than a percentage number, this is going to give us a completely different feel because this is not going to change with the size of my screen so I’m just going to set this as this but just play around with that, get that customization right for what you need and we’re going to click save on that. And the best part obviously of the divvy builder is that that does make us a universal footer. So this is going to go straight onto every page and if we go to our homepage over here, let’s let that load.
If we go down to our homepage and scroll down, here is our Instagram feed. So what you’ll want to do is just play around with that layout in your website theme, make sure it works for exactly what you’re after and you can work on it from there. I’m actually going to keep playing with this and bring it up a little bit to tweak it in with Penny style and it is a really nice way to add some movement onto your home page without having to update it all the time. So there you have it. That is one of my absolute favourite little plugins.
It’s a really great one to get you started and it is a lot of fun to actually update it. The one thing I will say is that it will not put your reels into the Instagram feed so this will only show carousel posts, videos and actual feed posts onto your feed so be sure to think about that. If you’re only on dating content into your reels, they’re actually not going to show up in that feed there. So as you’ll see from mine, it actually does take a bit back because I have uploaded quite a few real slightly and they aren’t showing in that feed either so just be sure to think about that but I hope that has helped and if you have anything that you want to see customizable with your WordPress website please let me know. I’m going to be uploading a few more tutorials over the next few weeks and I’m excited to get into some of the updates that have been released for WordPress in 2022 so far.
