People love to showcase their instagram feed on their website. Most of my templates show this setup because it seems to be preferred or expected these days. I wanted to share a quick tutorial for how to add your instagram feed to your website easily using the widget from lightwidget.com.
But first let’s talk about strategy because it’s my favorite, right? You might not realize that there are pros and cons to having your feed on your website, so I wanted to share the top ones just for some additional insight.
Pro: You invite visitors to connect with you further on a more seemingly personal platform where you can engage with them. Great for developing a relationship and building the know/like/trust factor we are after as business owners.
Con: You are steering people away from your website. This is no bueno technically. You take the risk of someone scrolling through your homepage, seeing an image that captures their attention in your instagram feed, clicking it and heading off down the rabbit trail of instagram vs. continuing to view your services and hopefully book with you.
Now, you can weigh the risk and the perk and decide for yourself, but I just wanted to make sure you had a bit more perspective on the issue!
How to add your instagram feed to your Showit website
Step 1: Head to lightwidget.com and click connect with instagram.
Step 2: Setup your preferences.
For your website I usually recommend a simple grid, and you’ll set the number of columns and rows based on the template you are purchasing.
For example, if your template has a row of images that are meant to encompass the entire bottom of the screen width and no space in between the photos, you’ll want to set it for 1 row / 10 columns / 0 padding.
If your template is showing a stacked feed placeholder with some spacing between images, you’ll adjust the rows and columns to match. For example, 2 rows / 3 columns / 5 padding gets you the following:
Standard other settings you can play with is the hover effect which is what happens when someone hovers their mouse over that image.
You’ll want the image format to be square most likely.
Click action set to either “go to post” or “go to profile”.
I usually select “lazy load images”
Then hit “preview” and you can double check the setup.
Step 3: Generate your embeddable code.
Hit “get code” if everything looks good! This will generate a free version of your widget but you will not actually be able to use it on your Showit website as all Showit website have a security feature called an SSL (which you want) so you’ll need to pay the $10 one time fee to upgrade the widget to be able to use on your site. It’s totally worth it so I highly recommend it!
Once you’ve done that, click “copy to clipboard”.
Step 4: Embed your Instagram Feed Code on Your Showit Website
Now, head over to the Showit app. Find the location of where you want to add in your feed. And once that canvas is active, click the bottom middle icon then click “embed code”.
This will pop up a box and you’ll simply double click it and paste the code you were given previously by lightwidget.
And hit save. Then just adjust the corners of the box to fit the placeholder or desired dimensions!
If you are doing one that is full width across the whole screen, you’ll want to set up these additional settings:
Set it for the height of your specific canvas. And set the width correspondingly, I usually do 2000 or 2500 for width // 200 or 250 for height. Set it to 0 on the X axis so that it is aligned with the far left side of your site. Then set the horizontal edge locking so that it stays in place and as screensize grows, more images will show. That’s the simplest way I’ve found!
Hopefully you found that helpful for adding your instagram feed to your Showit website! If you love tutorials like this, browse the blog for more or shoot me an email with something else you’d love to learn about that I might not have touched on yet!
