How to Configure and Style EA Instagram Feed #
EA Instagram Feed allows you to nicely showcase Instagram Feed on your WordPress site. This element gives you the freedom to personalize the Instagram Feed as per your preference with lots of styling options.
How to Retrieve Instagram Access Token #
Before you can get started, you need to have a public Instagram account and have some posts published there. Afterward, you can follow these steps to get your access token:
Step 1: Add a New App On Facebook For Developers #
To get your access token from Instagram, you need to create an app on Facebook Developers. To do this, you have to log in to your Facebook profile and go to your Facebook Developers Account. Once you are logged in, you need to add a new app as shown below.
A popup will appear where you will be asked to specify what you need your app to do. Simply click on ‘Other’ and then click on the ‘Next’ option to create an app with a custom set of permissions.
On the next screen, you will have to choose the ‘Consumer‘ option to configure Instagram Basic Display.
Next you will provide your ‘Display Name’, ‘App Contact Email’ and ‘Business Account’ fields. Then click on the ‘Create App’ option.
Step 2: Configure Instagram Basic Display #
After successfully creating a new app, you will be redirected to a new page where you can configure your ‘Instagram Basic Display’ and add a tester to generate your access token. Simply click on the ‘Set Up’ option under ‘Instagram Basic Display’.
Next, click on ‘Set Up’ and scroll down to the very bottom of the page where you will see a Create New App button. Click the button to create a new Instagram App ID and enter the name of the app you created in Step 1.
Step 3: Get Access Token #
Now you need to add an Instagram Test user in order to get your access token. Go back to ‘Basic Display’ section and scroll down the page until you find the ‘Add or Remove Instagram Testers’ button.
All you have to do now is add the Instagram user ID of the person you want to set as your tester. If you want the access key to your own account, then you only have to add your own Instagram username.
Once that’s done, log in to your Instagram account (or the account of the Instagram tester you have added). Navigate to Settings→ Apps and Websites and click on the Tester Invites tab as shown below.
Accept the invitation and go back to your Facebook Developers dashboard. Head over to the app you created and navigate to Basic Display. Scroll down to the User Token Generator section and click on the Generate Token button.
A pop-up will appear where you can copy your access token to the clipboard. With this access token, you can now display your Instagram feed on your website in Elementor Editor.
Here is your access token. You need to keep it safe to use with the EA Instagram Feed widget.
How to Activate EA Instagram Feed #
To use this Essential Addons element, simply search for it from the Search option under the ‘ELEMENTS’ tab. Afterwards just Drag & Drop the ‘EA Instagram Feed’ into the ‘Drag widget here’ or the ‘+’ section.
After you have successfully activated the EA Instagram Feed element, this is how it will show up on your site by default.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will be able to configure the settings for EA Instagram Feed.
Instagram Account Settings #
In the input field under the ‘Instagram Account Settings’ option, paste the access token you have generated in the previous steps. Your Instagram feed will be automatically displayed within a matter of seconds.
Feed Settings #
From the ‘Feed Settings’ section, you have the flexibility to use the dropdown ‘Sort By’ to change in which order you want your feed to appear. You can choose from ‘Most Recent’, ‘Least Recent’ and many others.
Moreover, you can set the number of ‘Max Visible Images’ and change the ‘Image Resolution’. You can even use the toggle to enable ‘Force Square Image’. If it’s enabled, you can change its dimension as well.
General Settings #
From this section, you can choose between an ‘Overlay’ Layout or a ‘Card’ Layout for your Instagram posts. You can even choose your ‘Overlay Styles’ or ‘Card Styles’ for each layout. If you choose the Card layout, you can pick between Content Inner Card Style or Content Outer Card Style. On the other hand, the Overlay Layout lets you choose between three Overlay Styles- Simple, Basic, and Standard.
Besides this, you can also change ‘Number of Columns’ which you want to display for Instagram Feed. If you wish, you can even enable the ‘Load More Button’. Moreover, it gives you the opportunity to hide or display Caption, Like, Comments & Link options.
How to Style EA Instagram Feed #
From under the ‘Style’ tab you can change the options to style all the features of your EA Instagram Feed.
Instagram Feed Styles #
From the ‘Instagram Feed Styles’ section, you can set the Padding between the images of your Instagram Feed. You can add Border and change its styling as well.
Color & Typography #
From the ‘Color & Typography’ section, you are able to change the color for ‘Overlay’ of the Instagram Feed. Moreover, you can add styling to ‘Likes & Comments’ & ‘Captions’ by modifying their colors & typography.
Load More Button Style #
From this section, you can control how you want the ‘Load More Button’ to be displayed on Normal and Hover view. For each view, you are able to change its text & background color and add styling to its border if you wish.
You can also play around with the Padding and Margin of the Load More Button. Besides, you can even change its typography as well.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Instagram Feed as per your preference.
With the help of EA Instagram Feed, this is how you can easily display your Instagram Feed in an amazing way and grab the attention of your site visitors.
Getting stuck? Feel to contact our support for further assistance.
