Custom Instagram Grid In Oxygen Without The Need For Client Passwords

** UPDATE September 2021 **
This code no longer works with the Instagram API.

========================

Over the past number of years, ensuring a clients Instagram feed remained authorised on their site was a pain. Sometimes it was the API and changes to Instagram that broke the link – other times it was the client changed passwords. Not a huge hassle to get back up and running but when you maintain a lot of sites – it can get there…. fast! It didn’t matter what social plugin you used, the same thing always happened.

Chatting to Taylor Drayson on the Oxygen Discord channel recently and he shared a working solution that requests the feed from Instagram and supply in the JSON format.

He released another update the other day with a slider option and I got to work adding it to development sites that I’m working on currently.

Here’s the link to his source files on github where he openly invites people to fork it and make it their own. He also shares option on how to display as a grid or slider.

The steps are:

1. Add index.php to code snippets (like my example) or functions.php
2. Replace $insta_id with Instagram username
3. Add shortcode to page.

I wanted to share how I got a responsive grid working on my development site using CSS. Below are two examples I have added this to on development sites. Both displaying a grid of 6 images, one with captions and one without.

The two shortcodes I used in the examples shown were: [instafeed user=”feed-grid” caption=true post_count=6] and [instafeed user=”feed-grid” caption=false post_count=6].

Note: the first example has images posted to Instagram that weren’t square!

In Oxygen, after adding the snippet for the functionality from his index.html file, I added the shortcode for the grid from Taylors plugin in a shortcode element set to 100% width.

The CSS below uses the class .i-instagram which I added to the shortcode element to style things so be sure to change it to your own. Obviously you would need to adjust styling based on the grid style you were after but the code below may help.

As one of these examples shows captions, I adjusted the caption font size on devices smaller than 768px as I thought they were too large.

*Instagram grid styling */
.i-instagram {
  width: 100%;
  display: flex;
  flex-wrap: wrap;  
}
.i-instagram>* {
 margin: 10px;
 flex: 1 1 14%;
      }
@media ( max-width: 960px) {
  .i-instagram >* {
    flex-basis: 28%;
  }
}
  
@media ( max-width: 768px) {
  .i-instagram >* {
    flex-basis: 28%;}
  
  .i-instagram {
      font-size: 12px;}
  
  .insta-caption-div {
  line-height:1.2!important;}
}
  
@media ( max-width: 320px) {
  .i-instagram >* {
    flex-basis: 40%;
  }
}
.insta-image { 
  width: 100%!important;
  max-width: 300px;
    min-width: 140px;
  }

I hope you find this useful and if you have any suggestions on how to improve, let me know in the comments.