How to Configure and Style EA Facebook Feed #
EA Facebook Feed allows you to display your Facebook posts in an amazing way on your WordPress site. It gives you the complete freedom to personalize the Facebook Feed any way you want and make it appealing to your website visitors.
How to Retrieve Facebook Page ID & Access Token #
Before you begin, make sure that you already have created a Facebook Page on your Account and have some posts published on that page. Afterward, follow the below guidelines to retrieve the Facebook Page ID & Access Token:
Step 1 – Create a New App ID #
First of all, log in to your Facebook profile and go to your Meta For Developers Account. Afterward, click on the ‘My Apps’ option as shown below.
This will redirect you to a new page. Here, click on the ‘Create App’ button to create a new app in Meta Developers.
A popup will appear where you will be asked to specify what you need your app to do. Click on the ‘Other’ and go to the next step by clicking on the ‘Next’ button. Now, select the app type as ‘Consumer’ and click next.
Next, you will be asked to give your app a name in the ‘Display Name’ field, and set the email address for your app in the ‘App Contact Email’. Once this is done, click on the ‘Create App’ button. You may be prompted to complete a quick security check.
If you have completed these steps, then you have successfully created an app for Meta Developers. Next, you have to generate the access token for your app.
Step 2 – Generate Page Access Token #
After creating your app, you will be redirected to the Dashboard page. From the ‘Facebook Login’ option, click on ‘Set Up’ and select ‘Web’ afterward.
Now enter your Site URL and click on the ‘Save’ button.
Now, go to the Facebook Login ‘Settings’ tab. Enter your URL in the ‘Allowed Domains For The JavaScript’ section. Also, toggle the ‘Login With The JavaScript’ button to enable it.
Next, go to the ‘Settings’ → ‘Basic’ tab. Here, you will find the ‘App ID’ and ‘App Secret’. Click on the ‘Save Changes’ button.
How To Get The Access Token? #
Now, go to ‘Tools’ → ‘Graph API Explorer’
Select the ‘Meta App’ from the dropdown and the User or Page token. Now click on the ‘Generate Acces Token’ button. Just, copy the access token from there.
How To Add The EA Facebook Feed? #
To use this Essential Addons element, find the ‘EA Facebook Feed’ element from the Search option under the ‘Elements’ tab. Simply just Drag & Drop the ‘EA Facebook Feed’ into the ‘Drag widget here’ or the ‘+’ section.
How to Configure the Content Settings? #
Now, Under the ‘Content’ tab, you will be able to configure the settings for ‘EA Facebook Feed‘.
Facebook Account Settings #
Before you begin, you need to make sure that you have retrieved the necessary API Key to connect with your Facebook account. You can simply follow the steps mentioned below to insert the ‘Page ID’ and ‘Secret Key’.
To get your Access Token for the Page ID, simply click on the ‘Get Credentials’ button.
Now paste the Acces Token you copied and click on the Get Credentials button. Once you click on it, you will get the ‘Page ID‘ and ‘Secret Key‘.
Now, simply place the ‘Page ID‘ and ‘Secret Key‘ in the relevant fields and you are all set. Your Facebook feed will instantly appear.
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 Facebook Feed to appear. Besides, you can set the number of ‘Max Visible Items’ for your Facebook Feed as well.
General Settings #
From this section, you have the freedom to pick your preferred layout from out of these: ‘Card’ or ‘Overlay’. Here in this visual, another Facebook Feed with more posts has been used. Besides, you can change the layout by picking the ‘Number of Columns’ which you want to display for Facebook Feed.
If you wish, you can even enable the ‘Load More Button’. Moreover, it gives you the opportunity to hide or display Comments, Like & other options.
How To Style Facebook Feed? #
Switch to the ‘Style’ tab to style all the features of the Facebook Feed.
Feed Item Styles #
From the ‘Feed Item Styles’ section, you can set the Padding between the images of your Facebook Feed. You can add Border and change its styling as well. Moreover, you have complete control over how you want to style your Header, Content, and Footer.
Color & Typography #
From the ‘Color & Typography’ section, you can play around with the typographies and colors for all the contents of EA Facebook Feed.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Facebook Feed as per your preference.
With the help of EA Facebook Feed, this is how you can easily retrieve posts from your Facebook page and showcase them beautifully on your WordPress website.
Getting stuck? Feel to Contact Our Support for further assistance.
