Everyone loves the ‘Gram these days. It’s a vital marketing tool for any small creative business (in fact, most of us are juggling more than one account) and it’s a great way to show fresh content on your website without lifting a finger. #websitegoals. From plugins to code embeds, there are several solid options when it comes to integrating Instagram with your website and displaying your feed responsively so it looks great on all devices.
Before we get started, a quick note for ProPhoto and Squarespace users – you lucky people have Instagram built into your framework. ProPhoto users – go here. And Squarespace users, go here.
Generally, there are three ways to add a responsive Instagram features to your website.
Instagram’s Own Embed Tools
Instagram itself has an easy embed feature that lets you add single posts to any area of WordPress, just as I’ve done below. All I had to do was copy and paste the url of the post, which you can get by visiting Instagram in a browser rather than in the app.
Widget Generators
Widget Generators are third party websites which allow you to create and customize your own embeddable Instagram feed widget. These feed generator options are a great option if you are using a hosted platform like Showit.
The two most popular options are Lightwidget and Snapwidget. Both services allow you to create unlimited free widgets, but in the free version both have drawbacks (no surprise there!). The free version of Lightwidget allows your grid to link straight to your Instagram post, but don’t work on sites with secure domains. ie. which have an SSL certificate and green padlock. You can upgrade a single Lightwidget for a one-off cost of $10. Snapwidget works on all domains but will only allow you to click through to Instagram once you pay. Their Lite option, which gives you one widget, costs $6 per month, which means that Lightwidget is, on the whole, better value. If you’re a design control freak (like me), you’ll also love the option to set the number of rows and columns for specific devices.
The Instagram Feed Plugin
If you’re a WordPress user, then by far the best option is the free Smash Balloon Social Photo plugin. I like this plugin because I find it’s more robust than widget generators, because you are cutting out a link in the chain and connecting your site straight to Instagram. It couldn’t be simpler to set up. Here’s a quick video.
Hi Melissa, your screen didn’t show where to put the Instagram feed text?
Hi Jo. Whoops, I better change that. But you can put the Instagram Feed shortcode in any text or code module or the WordPress editor or widget in any theme.
Great tutorial. If you’re linking to your IG, make sure it opens in a new tab if you don’t want to pull traffic off your site completely.
Hi Jo. Whoops, I better change that. But you can put the Instagram Feed shortcode in any text or code module or the WordPress editor or widget in any theme.
I wondered why my LightWidget stopped working on my site –>it’s a secure site. Thanks for the tips!
Hi Melissa, there is a HTML version now from Instagram themselves without the need for any widget! Do check it out it is lightweight 🙂
It’s all about Instagram feed. Can we add Instagram box in widgets to use code like Facebook so that interested people could follow directly through website. Is it possible? If yes then please let me know I need to learn that.
Thank you I’ve added the feed following the tips. Can you advise how to manage the mobile view so that the Instagram feed switches from 1 column to 2 as in the Kinfolk theme please?
Awesome advice. Thank you!
Nice post. I am impressed by the quality of information on this website. Thanks for sharing this post.
How about embedding a feed to a Blackboard website?
Good read. For small businesses, I recommend https://socialproofed.com/ embed widget – they specialize in small business Instagram feed social proof.
After api requirement changes in instagram developer account it is not easy for reach other people instagram feed, with your help i started to use squarespace on my personal blog. Thanks.
Practically Implemented! I appreciate sharing such a valuable post, it helps me out with my instagram feed problem so keep it up!
Great tutorial. If you’re linking to your IG, make sure it opens in a new tab if you don’t want to pull traffic off your site completely.
About instagram widgets – check also myelophone.com/widgets – several variants of them are even free. i like their responsive design