If you love Instagram, and Instagram is a huge part of your business, then you’re definitely going to want to include it on your website.
Hey everyone, I’m Kelly Sparkes, and today I’m going to show you how to add an Instagram feed to your WordPress website. Stick around to the end where I’ll share a few tips that will help your Instagram feed blend in better with your website too.
Plugin – Smash Balloon
First, head over to WordPress, and down to ‘Plugins’ and ‘Add new’. The Plugin I like to use for this is ‘Smash Balloon – Social Photo Feed’:
- Click on ‘Install’, and then
- Click on ‘Activate’
- Go to ‘Settings’, and click the button to add an Instagram account. It will ask you which type of profile you have, so whether it is a personal or a business profile, and If you’re not sure you can click, ‘I’m not sure’ there.
- Click on connect, and it will log into Instagram for me.
- It will then confirm you want to give access to your Instagram account and you will need to click ‘Allow’ for that to happen, then ‘Connect this account’.
And as simple as that, my account is connected.
Customising
Now we’ve got a few different options. We can go up to ‘Customize’ and you can choose different options: how wide do you want your feed? You want it to fill up 100% of the space and you can change that and you can also set the height.
If your grid’s professional, which you don’t need, but if you do, you will get different options for layouts:
- A grid with some texts underneath the carousel
- A masonry feed – it would look like Pinterest with all different sized images that filter through.
- Highlight is the same as the masonry but doesn’t have the text underneath.
You can choose how many photos you want to show initially, the number of columns and the amount of padding. What I do is just add it to a page, first of all, so we can see how it looks and then we can change the settings. If I click on ‘display your feed’, there are some texts I can use.
Shortcode
The first one is just literally the basic Shortcode, (Instagram feed). If I copy all of the code, including the square brackets, underneath there are lots of different options you can use. I’m going to keep it simple and use the basic ‘Instagram dash feed’ for now.
Because I’m using Elementor, if I come to my ‘Pages’, and go to a page I’ve already got, I could add my Instagram widget: search for ‘Shortcode’. You can use this method for any Plugin that has a Shortcode. If you install a Plugin and you’re wondering how to get it to show on your website, and there’s a Shortcode, you can use this. Strike that into a new section, click on it and paste the Shortcode in.
You will see in the video I have the square brackets and it says, ‘Instagram feed’. Apply that and preview it, then you can see the Instagram feed on the website. You may now see a lot of images, and you probably don’t want to show this many; I like to just show a line, but it depends on what you’re looking for. If you are an Instagram influencer, you may want to show all of these images and maybe you’d have just this on a page, almost like a gallery; there are lots of different options you can use.
Where to feature the feed
One of my clients, Rona of Flowerona is an Instagram expert, so obviously, Instagram features heavily on her home page. If you visit her site, you will see she has a section set up with three different Instagram accounts, and if we scroll right to the bottom, you will find her Instagram account. She has put it on the bottom of the website and it’s a full width, which looks lovely.
On my website, because Instagram is not one of my main focuses, I’ve put mine on my contact page. I like the idea that if someone wants to get in touch with me, or wants to stay in touch or follow me, they would probably come to my contact page to do that, so I’ve put it underneath my contact. You can see it’s a link, so I can click through and I’ve got my little images.
Layouts
Going back to the demo website, let’s just limit our images to five – I like odd numbers. Go back to the dashboard, down to ‘Instagram feed’, and then ‘Customise’, and now instead of 20 images, I’m going to put five in there and save changes. I’m also going to set the number of columns to five, and click ‘Save’. If I then refresh this, I now have my five images.
I like how Rona’s has no gap between the images, so let’s go back. You will see padding around the images, so if I delete that and click on ‘save changes’ and refresh again, I’ve now got no gap between them.
Removing the Instagram Header
I’m not a massive fan of the Header on the Instagram Feed, so if we click on ‘Show Feed Header’, we can get rid of it. You can also choose whether you want to show your bio text or not. Click Save Changes, and have another look.
The header should now have been removed, and I want to get rid of the buttons. There will be a ‘Load More’ and a ‘Follow’ button, which I don’t want, so can remove those. Click ‘Save Changes’ and refresh the page.
Making the feed full width
If you wanted it to cover the full width of the screen, I can go back in and go to my section, which is in Elementor, the page builder that I absolutely love. I have a whole video on Elementor, so if you haven’t heard of it before, go and check it out, because it is going to make your life so much easier. I click on the section I need and in this example (see video) here we’ve got ‘content width is boxed’, which is going to keep all the content in this section within a box. If you have that set on all your sections, your content is going to be uniform up and down, which is good. However, in this particular case, for this section, I want it to go full width. Therefore, I can click ‘Full Width’ and find ‘Stretch Section’, and say ‘yes’, because I want this section to go all the way to the edges of the page. Click Update and come back to the home page, and the Instagram feed will be going all across the screen.
Number of images to use
Now I think it might be nicer to have a few more images in here, so let’s just go back and change the number of photos to nine and the number of columns to nine, and refresh. This makes the images much smaller and still go all the way across the screen.
Now, this Instagram, which, do you remember I put that I wanted it to be 100%? Now that is 100% of the space it’s in. If I wanted to have a two-section area all about Instagram, I can just drag this into that [right] side there, get rid of that one, and then maybe on this side, let’s add a heading and a little bit of text [drag both into the left column]. Copy the styling on that one (right-click ‘copy style’, and then ‘paste style’), it needs to be left-aligned, and let’s change that [heading] to ‘Follow me on Instagram’. Then if I update that, now it’s just showing to the right here, can you see it? So I think it’d be nicer to have a couple of lines here. Come back to the settings and select ‘change the number of photos to six’, and we’re going to keep the number of columns to three, so I’ll have two rows of six. Let’s refresh that.
Alignment
Okay, that looks nice, but it’d be lovely if this text was in the middle of this [images from Instagram]. So let’s just come back over here to my homepage, click on the column, and you’ll see the little ‘Edit Column’ icon there, click on that, and then ‘Vertical Align – Middle’, and now that is going to vertically align everything within this column into the middle of the space. I’m going to click ‘update’ there, and there we go, I’ve just shown you two different ways that you can display your Instagram feed. I hope that’s been super useful.
Colour palette and branding
One thing you might have noticed about this is if this was my website, [so let’s go back up to the top. So this is a website that I created in a previous video. And] you can see it’s very brown. It’s got this unique font, and if I scroll down when you see my feed, you think “Oh, that doesn’t really match”, so, a few little tips:
- The first is to make sure your feed matches your branding. If this was my branding and I was using these browns and blacks then I should have a similar palette within my Instagram feed, so it might match as well, and the same with the font.
- These are my brand fonts, and they don’t work with the fonts for this brand. Whereas if I go back to my own page, you can see I’ve got my font there, I’ve got my font there, it all ties in together.
We’ve got the same colours, I’m wearing green, I’ve got the pink here from my logo, and then I’ve got the pink in the image that I’ve shown, and everything is light and bright. Whereas on this page, it was probably going to be slightly darker, and if we scroll up and look at the pictures that I’ve used, you can see they’ve got sort of ‘browny’ tones to them and [it feels] a bit more ‘city’, a bit more ‘corporate’, a bit more ‘office’, so that is the style I would use on their Instagram. Then as you scroll down, this would just flow really nicely into the rest of the page.
I hope you found this video useful, and if you have then please drop me a comment and let me know. Don’t forget to like and subscribe to my YouTube and I will see you again soon.
