How to embed your Instagram Feed into your Website - Atlas Studio | Brand + Showit Website Designer for movers, shakers and adventure makers

How to embed your Instagram Feed into your Website

Marketing, Mobile, Showit, Tutorials, Website

February 27, 2020

Categories

TRAVEL

PERSONAL

PORTFIOLIO

MARKETING

SEO

BUSINESS

TUTORIALS

DESIGN

WEBSITES

embed instagram

Hey guys! In this video tutorial, I show you how to embed your Instagram feed into your website.

Embedding your Instagram is a great feature to add if your business uses the platform to regularly create content. It helps you build that know/like/trust factor with website visitors and invite them to continue the conversation elsewhere!

I like to use LightWidget to embed my feed into my website. At the time of creating this video, the widget costs a one-time fee of $10 which in my opinion is a lot better than paying monthly instalment for a membership.

Ps. I am not affiliated with LightWidget in any way, I just think it is a great and sturdy widget!

You can create your account here.

Throughout this tutorial, I will show you how to set up a single row Instagram feed on your website that is mobile responsive. I also show you how to embed the code into your Showit Website.


Initial Settings

The initial settings for your LightWidget Instagram Embed are going to look a bit like this

Type of Widget: Grid

Number of Columns: 6

Number of Rows: 1

Image Hover Effect: This one is a personal preference! Go wild!

Padding (how much space between each post) : 2

embed instagram


Mobile Responsive Settings

Now this part is really important if you are following the 6 column look. Obviously, on a mobile, things on the screen are going to look a little smaller so you are going to want to add a responsive setting

Max Width: 480px (this is what works for me on Showit! You may have to look at your website platform breakpoints)

Type of Widget: Slideshow (this will make your most recent posts slide through)

Number of coloumns: 2

Number of photos: 6

Image hover effect: (Doesn’t matter too much for mobile, but if you are working with different breakpoints that have hover abilities, you can choose whatever you like!)

embed instagram


Embed your Instagram

Once you have set up your widget, go ahead and save and pay for it! You will be given a code which you can use to embed straight into your drag and drop website. Just look for a setting which allows you to embed in a frame.

embed Instagram

As always, if you have any issues send me a message and I can try to help!

Want to learn more about my custom website + branding services?

psssttt...

Add a comment

0 Comments


Your Comment Form loads here

X

Comments will load here

X

I'm Madison; a tea drinking, adventure obsessed Brand + Web Designer working remotely around the world.

Categories

Categories

TRAVEL

PERSONAL

PORTFIOLIO

MARKETING

SEO

BUSINESS

TUTORIALS

DESIGN

WEBSITES

I help solopreneurs, digital nomads and bloggers build strategic online spaces that help them achieve FREEDOM. 

Oh hey!

Follow along for education + adventures