Instafeed Initial Setup

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

Requirements

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

• A Facebook Business Page

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.

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:

Choose your business Page(s) and business Instagram Account(s) under Opt in to current only:

NOTE: If you don't see your page(s) in the list:

It might be due to your role on that page(s) was added using Facebook Business Manager, and not using a regular page role method. In this case, to list all such pages you'll need to grant the business_management permission to the Instafeed app. To do this - click the corresponding RECONNECT button:

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 support@agentfire.com 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

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?😞😐😃