Instafeed Initial Setup

Show off your Instagram posts in a beautiful and mobile responsive layout with a direct connection to your feed.

Brycen Lawson avatar
Written by Brycen Lawson
Updated over a week ago

Requirements

Before beginning setup, please note that use of this plugin requires:

  • A Facebook Business Page

  • An Instagram Business Account. 

In order to ensure you can enjoy the benefits of Instagram content availability on your website, our plugin makes use of Instagram's Graph API.  This API has additional restrictions and requirements. 

Please make sure you have performed the following: 

  1. Switch your Instagram Account to a Business Account.

  2. Link your Instagram page to a Facebook Business Page.

Step 1: 

Step 2: 

Setup

Go to Settings > AF Settings > Instafeed in your admin dashboard

Click Activate Instafeed Service and you will be redirected to the activation page.

Click Log in With Facebook > You will be redirected back to Instafeed page on your site after logging in.

Click on "Get Pages List" and select the desired page. Once it's connected, you will see that under the Connection status.

NOTE: The domains are used as access keys for the plugin to operate. That said - any change to the domain itself will disconnect the instafeed plugin from the website, and will have to be reconnected afterwards.

Placing a feed on page - Editor Options

With your account connected, you're ready to display the feed on a page. 

Depending on the visual editor your site has, there are few steps you need to take in order to display it on a page. 

If you are not aware of which editor you have, email [email protected] and we're happy to clarify. 

Cornerstone Editor

If you have Cornerstone as a visual editor, you can add the Instafeed by entering the Cornerstone Editor first for the selected page.

Add a New Section


Click on Elements, start typing Insta, and the Instafeed element should appear

Drag and Drop into the Section

Make additional edits like:

  • Set the post count

  • Set the width between the posts (gutter width)

  • Set number of columns

  • Image border color, width

  • Hover color

Note for Number of Columns: Number of supported columns goes from 1 to 6. You can add/remove numbers and it will reflect that

Example: 5/4/3/2/1 = 5 columns, 3/2/1 = 3 columns, etc.


Feed example made via Cornerstone:

Display your feed - Divi Editor

Navigate to the Divi Editor on the right side of your admin dashboard, and click on it to enter.

Add a New Section (Blue + sign)

Add a New Row (Green + sign)

Then you will need to select the row layout (columns) - Typically it's recommended to use the first one (full width).

After you add the new Row, you will be prompted immediately with a new window to choose a Module (element) - basically - what you want to insert. Find and click on AF Instafeed to place the feed.

Note: the feed itself will not show up in the editor.

A new window will pop up on the right side, where you can make additional edits, like setting Post Count, Column Numbers, Gutter Width, Borders, Hover, etc.

Note: These settings work the same way as in Cornerstone, so if you need additional help with that click here.

So after you have made all the edits you need, let's save the changes and exit the editor. 

To do so, first click here:

Then click on the Save button

And now you can exit the editor after the changes are saved. You can do that by clicking on the same icon you opened the editor with.

Final Note: If you delete a post on Instagram, it will take an hour before it updates on the site (the feed)

Did this answer your question?