Introducing Solo Pine Mods | An affordable & reliable way to customize your theme

Okay
  Print

How to configure "Instagram Feed" plugin

For all of our themes' Instagram feeds, we recommend using the "WP Instagram Widget" plugin. Our themes offer custom styling for this particular plugin. However, on a rare occasion, some webhosting companies have strict rules on how sites on their servers can connect with the Instagram API. This can lead to the "WP Instagram Widget" plugin throwing an "Instagram did not return a 200." error message. 

When this occurs, we like to recommend switching to an alternative plugin, "Instagram Feed", which connects to the Instagram API in a more secure method. 

Below, we'll go over how to setup & configure this plugin. 


STEP 1: INSTALLING & CONFIGURING THE PLUGIN

1. First, install the "Instagram Feed" plugin. 

2. Navigate to WP Dashboard > Instagram Feed.

3. Click on the big blue "Connect an Instagram Account" button. This will connect with whatever Instagram account you are currently logged into. 

STEP 2: SETTING UP THE WIDGETS

TO INSERT 3x3 INSTAGRAM GRID INTO WIDGET AREA

Most of our themes offer an Instagram widget option that inserts a 3x3 grid of your most recent Instagram images into the Sidebar area or into the Footer area if your theme has a widgetized footer. To recreate this widget, you can:

1. Navigate to WP Dashboard > Appearance > Widgets

2. Drag a standard "Text" widget into your Sidebar or Footer widget area where you want the grid to appear. 

3. At the top of the widget, there are 2 tabs-- Visual and Text. Switch over to the "Text" tab. 

4. Copy & paste in this shortcode:

[instagram-feed num=9 cols=3 showheader=false showbutton=false showfollow=false disablemobile=true]

Save changes. 

TO INSERT ROW OF INSTAGRAM IMAGES IN FOOTER AREA

Many of our themes have an "Instagram Footer" option where 6-12 of your most recent Instagram images shows in a single row in the "Instagram Footer" widget area. To recreate this widget, you can:

1. Navigate to WP Dashboard > Appearance > Widgets

2. Drag a standard "Text" widget into your "Instagram Footer" widget area. 

3. At the top of the widget, there are 2 tabs-- Visual and Text. Switch over to the "Text" tab. 

4. Copy & paste in the following shortcode:

[instagram-feed num=9 cols=9 imagepadding=0 showheader=false showbutton=false showfollow=false disablemobile=true]

In the above shortcode, do you see the "num=9" and the "cols=9" bits? This determines how many total images will show and in how many columns they'll show. 

If you want a row of 11, for example, set it to be "num=11" and "cols=11". This will show 11 images in 11 columns (11 images in a single row).  

DOUBLE ROWS

If, like in our Sprout & Spoon theme, you'd like to have 2 rows of 12 images, you can use this shortcode in your "Text" widget:

[instagram-feed num=12 cols=6 imagepadding=0 showheader=false showbutton=false showfollow=false disablemobile=true]

For the Sprout & Spoon theme, you can then add the following code to your Appearance > Customize > Custom CSS box:

#footer .instagram-title {
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
background:#fff;
padding:18px 20px;
z-index:999;
text-transform:uppercase;
letter-spacing:1px;
font-size:12px;
}



For more options on how to customize the Instagram feed styling, you can navigate to WP Dashboard > Instagram Feed > "3. Display Your Feed" tab > for a list of parameters you can add to their basic [instagram_feed] shortcode.