Learn how to add your Instagram feed to your website. Using a third-party widget, see how to embed your entire Instagram feed on your website.
- [Anson] We spoke earlier about embedding an Instagram photo into a website. Unfortunately however, Instagram doesn't have a built in way to embed an entire Instagram feed into a website. There is however a third party website called Lightwidget that allows you to create a widget with your entire Instagram feed. You can visit Lightwidget.com, and then you can customize this widget to your liking. So here on the website, the first thing that we need to do is log in with our Instagram account. So I'm going to click on the log in button. Now I've already logged into Instagram.com so all I need to do is hit the authorize button to authorize Lightwidget to access my profile.
You'll notice that by logging in, it automatically puts our username into the username field up at the top, and then on the left side of the screen, we are already seeing a preview of uploads that we've uploaded to Instagram. So as we scroll down, we have a number of different options that we can customize. Up here at the top, you'll notice that we can filter our photos by hashtags, so we could show only photos that have a particular hashtag. Theoretically, you could have a website with multiple different pages, and each page featuring different photos from your Instagram account.
You could have an engagement photos page, where your Instagram feed is embedded, but it only shows the photos on Instagram that have the engagement hashtag. Then you could have a nature page, where it only shows photos that have the nature hashtag. We can then choose the type of widget that we'd like to use, so we have three different options here, grid, slideshow and columns. I'm going to stick with grid for now. We can specify the number of columns that we'd like to use, the number of rows, whether or not we'd like a hover effect, so that's when we're actually hovering over the photos here in the widget, we can have let's say we'll do a little zoom in effect, and we'll look at that in a second.
And then down here we also have the option to show captions right from within the widget, so I'll go ahead and select this option. At any time if you want to see what the changes you're making are going to look like in the widget, you can just click on the preview button down here at the bottom of the screen, and you'll see that the widget on the left updates. So now we have captions in there, and when we hover over 'em, we have a little bit of a zoom in effect. So you can customize this widget to your liking, and then whenever you're ready, click on the get code button.
So now we have some html code here on our screen, we can highlight all this, or just click copy to clipboard, and then we could move over to our website and paste this code wherever we'd like the widget to appear on our website. Just like when we pasted in the embed code for a specific Instagram photo, you may need to get your web developer involved at this point to make sure that code is in the right place on your website, but this is definitely a great way to increase the visibility of your Instagram account, because you're going to be featuring all of your Instagram photos right from your website.
- Creating an Instagram account for business
- Brainstorming ideas
- Developing a posting schedule
- Optimizing your Instagram profile
- Uploading photos and video
- Using Instagram Stories
- Adding hashtags and locations
- Growing your audience
- Measuring your success with Instagram Insights