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 Generate Instagram Access Tokens for Personal Account? #
Follow this step-by-step guideline to generate and retrieve an Instagram access token for a personal account.
Step 1: Add A New App on Meta for Developers #
To get your access token from Instagram, you need to create an app on Facebook Developers. To do this, 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 and click on the ‘Create App’ button, as shown below.
Step 2: Provide Details Of Your App #
Next, you need to provide your ‘App Name,’ ‘App Contact Email,’ in the designated fields and click on the ‘Next’ button.
Step 3: Add Use Cases of Your App #
Now specify your app’s use cases from ‘Run ads to promote your app’ ‘Access the Threads API’, ‘Launch a game on Facebook’ or ‘Other’ options. Here, choose the ‘Other’ option and then click on the ‘Next’ button.
Step 4: Select the App Type #
On the next screen, you will get the two App Types: ‘Consumer’ & ‘Business’ for app type. Click on the ‘Business’ as your app type and hit on the ‘Next’ button to proceed.
Step 5: Create Your App #
Now check out the app details again, make any necessary adjustments if needed and then click on the ‘Create App’ button.
Step 6: Add Products to Your APP #
Now, you need to set up API with an Instagram business login. Find the ‘Instagram’ app and click on the ‘Set up’ button
Step 7: API Setup with Instagram Login #
From here, click on the ‘Generate access tokens’ → Continue button to add an Instagram account to generate access tokens and set up webhook subscriptions.
Afterward, a popup will appear to login you to your Instagram account. Log in and click on the ‘Allow’ button.
Then you will see that your Instagram account is connected. Now, click on the ‘Generate token’ option.
Then you will again be brought to the Instagram login interface and click on the ‘Allow’ button to provide access to generate the API tokens.
After completing the setup process, an ‘Access Token’ will be generated. Copy your access token to the clipboard. With this access token, you can now display your Instagram feed on your website.
How to Activate EA Instagram Feed #
To use this Essential Addons element, simply search for it from the Search option under the ‘Elements’ tab. Afterward, 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 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 free to contact our support for further assistance.
