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 new Graph API. This new API has additional restrictions and requirements.
Please make sure you have performed the following:
- Switch your Instagram Account to a Business Account.
- Link your Instagram page to a Facebook Business Page.
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 App List" and select the desired page, set Post Per Page count you want to showcase, and then finally - click on the Update 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 [email protected] and we're happy to clarify.
Display your feed - 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.