How to add Instagram to WordPress

Displaying an Instagram feed on your WordPress site is a fun way to add some personality and encourage people to follow you. There are tons of options to feed in your Instagrams automatically so the content stays fresh and captures your readers’ attention. In this post, I’ll show you how to add Instagram to WordPress with a couple of my favorite methods.

First, a heads up: The problem with WordPress plugins for social media is that every platform is different and always changing. A lot of free plugins come from developers looking for a better way, not finding it, and then creating it themselves for a project. Sometimes, it’s pretty simple to keep it up to date. But with social media, platforms release updates more frequently, requiring a lot of upkeep on the plugin too. That’s why it’s hard to find reliable plugins to feed your social media into your site.

How to add Instagram to WordPress

Add Instagram to WordPress with the Instagram Slider Widget

Now, I can’t guarantee it will be around for forever, but my current favorite plugin for adding Instagram feeds is the Instagram Slider widget. It’s responsive, customizable, allows you to display either a slider or thumbnail grid, and even comes with a shortcode generator so you can easily add an Instagram feed to any page (it’s what I use on my about page!). Watch the video or read the instructions below to use the Instagram Slider Widget.

Here’s how to use it:

  1. Go to Plugins > Add New and search for Instagram Slider Widget, then install.
  2. Go to Appearance > Widgets, and you’ll see a new widget called “Instagram Slider.” You’ll also see a new widget area for the shortcode generator.
  3. To use in your sidebar, drag the widget over to the widget area for your sidebar. To use on a page, drag the widget over to the widget area for the shortcode generator.
  4. The settings are pretty straightforward, but be sure to enter your Instagram username without the @ symbol. You have four templates to choose from: A basic slider, a slider that overlays the captions on hover, a thumbnails grid with borders, which shows a static grid of images, and a thumbnails grid without borders.

How to display images as squares using CSS

If you post portrait-oriented images and choose the thumbnail grid, you’ll notice that your grid is thrown off by those images. Luckily, with a bit of CSS magic you can force all images to display as squares so your grid remains in tact. Watch the video for full instructions, and find the CSS code below!

[code].jr-insta-thumb li a {
display: block;
position: relative;
width: 100%;
padding-top: 100% !important;
overflow: hidden;
}

.jr-insta-thumb li a img {
position: absolute;
top: 0;
left: 0;
}[/code]

Update March 2016

Instagram API changes have caused the plugin to stop displaying images. You can download a patch over here. Look for the Download ZIP button to download the patched version of the plugin. Then, deactivate the original plugin on your size and install and activate the patched version as you would a regular plugin. Watch your plugin updates for an official update from the plugin author. At that time, you’ll need to deactivate the patched version, run the update, and activate the original.

How to add Instagram to WordPress with SnapWidget

If you’d prefer not to rely on a plugin, another option for adding an Instagram to your site is SnapWidget (it works on non-WordPress sites as well). Enter your preferences on their home page, and they will generate the code you need to add to your website. In WordPress, you can add it to your sidebar using a text widget, or add it to a page by clicking over to the HTML tab in the editor.

Want to add an Instagram feed to your site? Here are two easy ways!Click To Tweet

P.S. Learn more about customizing Instagram and other WordPress plugins for your website with my free video series, Create Coding Magic. Sign up below for instant access to the first lesson.

Enter your name and email to begin my free Create Coding Magic video series. Plus, every Sunday I'll send you a peek behind-the-scenes into my work as a WordPress developer, with insights to improve your own website.

Powered by ConvertKit

Like this post? You'll love my emails!

Enter your email below, and each week I’ll send you quick + easy tips to help you take control of WordPress.

Meet the author

Hello! I’m Lisa M. Butler, and I help people build better websites. As a WordPress developer, I’ve built more than 100 websites on WordPress. I help my clients take their websites to the next level and teach them how to take control of their online presence. Through my blog, weekly emails, and club, I share that same advice with online creative entrepreneurs and publishers just like you.