Create a Facebook Media Feed From Scratch
This guide explains creating a Facebook media feed module using the Slider Revolution plugin.
![](https://www.sliderrevolution.com/wp-content/uploads/2023/06/featuredImage.jpg)
Table of Contents
Integrate Facebook Feed into Your Website with Slider Revolution
Integrating a Facebook feed into your website using Slider Revolution offers numerous advantages. Showcasing captivating media elevates user engagement. For content promotion or audience entertainment, seamless Facebook feed integration enhances your site’s appeal, ensuring visitors return for exciting media content.
Create a Blank Module / Import Template
If you’re new to the Slider Revolution [?]
Slider Revolution is a website content creation tool with a focus on captivating animation and stunning visual effects.
It began its life as a plugin for creating slideshows, but has evolved into a fully fledged piece of design software. Plugin and want to learn how to create a blank module [?]
A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.
A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.
A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.
Multiple modules can be combined to form rich content such as complete sites and landing pages. or import a template [?]
A "Template" is a premade module. It has pre-configured layers already in place.
It is designed to be ready for use, either as is or after being modified in the module editor.
Slider Revolution comes with several templates you can use, or alternatively you can create your own templates, thereby allowing you to easily reuse modules you have produced., check out the manual. It provides step-by-step instructions to guide you through the process.
Content Source
Hover over the newly created module:
![Hover over the facebook module in Slider Revolution](https://www.sliderrevolution.com/wp-content/uploads/2023/08/hoverOverModule.jpg)
Click on the pencil icon to edit the module:
![Click pencil icon to edit the module](https://www.sliderrevolution.com/wp-content/uploads/2023/08/pencilIcon-1.jpg)
Go to the Module General Options tab from the right sidebar:
![Module General Options](https://www.sliderrevolution.com/wp-content/uploads/2023/08/moduleGeneralOptionTab.jpg)
Go to the Content sub-section:
![Content sub-section under Module General Options](https://www.sliderrevolution.com/wp-content/uploads/2023/08/contentSubSection-1.jpg)
Scroll down to the Content panel:
![Content panel](https://www.sliderrevolution.com/wp-content/uploads/2023/08/contentPanel-1.jpg)
Select the Facebook setting from the Source option:
![Facebook settings under Source option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/selectFacebookSetting.jpg)
Scroll down to the FaceBook Settings panel:
![Facebook settings panel](https://www.sliderrevolution.com/wp-content/uploads/2023/08/faceBookSettingsPanel.jpg)
Facebook Settings Panel
Slides
In the Slides option, you can choose several slides that should be created with Facebook content. For example, if you wish to have five slides with Facebook media, you can input 5
in the input field:
![Number of slides option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/slidesOption.jpg)
Cache
The Cache option helps make Facebook media load faster. This option saves the media in a temporary storage area called a cache, so the website can access them more quickly the next time users visit. This means users can immediately load the media whenever they visit the website. So, the Cache option helps make browsing the internet faster and more enjoyable!
By default, the Cache option has a delay value of 1200 seconds; the Facebook API will be called every 1200 seconds later; You can change the interval for how often the Facebook API should be called:
![Cache option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/cacheOption.jpg)
Source
Click on the Source dropdown menu to see all options:
![Source dropdown option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/sourceDropDown-1.jpg)
Album
Click on the Album setting to load all the albums on a Facebook profile:
![Select Album setting](https://www.sliderrevolution.com/wp-content/uploads/2023/08/sourceAlbumSetting.jpg)
Select Album
Select any of the albums of your choice:
![Select any album of your choice](https://www.sliderrevolution.com/wp-content/uploads/2023/08/selectAlbumOption.jpg)
TimeLine
Selecting the TimeLine setting will load media from a Facebook profile timeline only:
![Timeline setting under Source option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/sourceTimeline.jpg)
Token Source
There are two methods to fetch Facebook media feed into the Slider Revolution module. You can either select the From Account setting to connect your Facebook account or choose the Manual setting to get access to a Facebook account using Access Token.
From Account
Click on the Token Source dropdown option:
![Token source dropdown menu](https://www.sliderrevolution.com/wp-content/uploads/2023/08/tokenSource.jpg)
Select the From Account settings:
![Select From Account setting under Token Source option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/tokenSourceAccount.jpg)
Connected To
Click on the Connect Facebook Account button:
![Connect Facebook Account](https://www.sliderrevolution.com/wp-content/uploads/2023/08/connectToFacebookAccountBTN.jpg)
The button will lead you to your Facebook account and will ask you for permission to allow Facebook to connect to the Slider Revolution plugin. Click the Continue button:
![Facebook permission page](https://www.sliderrevolution.com/wp-content/uploads/2023/08/facebookOne.jpg)
After that, you will see another popup, “Choose the Pages you want Slider Revolution Posts to access”.
Select one of the options from: “Opt in to all current and future Pages” or “Opt in to current Pages only” option:
![Facebook page preferences](https://www.sliderrevolution.com/wp-content/uploads/2023/08/facebookTwo.jpg)
Click the Continue button:
![](https://www.sliderrevolution.com/wp-content/uploads/2023/08/facebookThree.jpg)
Click the Save button:
![Review the requested permission](https://www.sliderrevolution.com/wp-content/uploads/2023/08/facebookFour.jpg)
In the next window, you will see the message “Username has been connected to Slider Revolution Posts”. Click the Got it button:
![Facebook account being connected to Slider Revolution](https://www.sliderrevolution.com/wp-content/uploads/2023/08/facebookFive.jpg)
Your Facebook page username will automatically appear in the Connected To option field:
![Connected To option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/connectedTo.jpg)
You can see the authorization to the Slider Revolution plugin in the Settings & Privacy > Settings > Business Integrations > Active tab:
![View permission under Facebook account](https://www.sliderrevolution.com/wp-content/uploads/2023/08/facebookAuthorization.jpg)
Manual
Click on the Token Source dropdown option:
![Token Source dropdown menu](https://www.sliderrevolution.com/wp-content/uploads/2023/08/tokenSource.jpg)
Select the Manual settings:
![Manual setting under token Source option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/tokenSourceManual.jpg)
Access Token
First, you will need an access token to be input in the Access Token option field. Refer to the guide to learn how to generate the access token.
Paste the generated token to the Access Token field in the Slider Revolution module:
![Input Access Token key](https://www.sliderrevolution.com/wp-content/uploads/2023/08/accessToken.jpg)
Page ID
Follow the guide to Find your Facebook Page ID, then paste it into the Page ID option in your Slider Revolution module:
![Input Page ID](https://www.sliderrevolution.com/wp-content/uploads/2023/08/pageID.jpg)
Click the Save button:
![Save button](https://www.sliderrevolution.com/wp-content/uploads/2023/08/saveBTNfacebookSettings.jpg)
Streaming Media Feed Images in Slider Revolution
Images as Slide Background
Go to the Slide Options tab:
![Slide Options tab](https://www.sliderrevolution.com/wp-content/uploads/2023/08/slideOptions-1.jpg)
Click on the Background sub-section:
![Background sub-section under Slide Options tab](https://www.sliderrevolution.com/wp-content/uploads/2023/08/bacgroundSubSection.jpg)
Scroll down to the Source panel:
![Source panel](https://www.sliderrevolution.com/wp-content/uploads/2023/08/slideOptionsource.jpg)
Select the Image setting in the Type option:
![Image setting under Type option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/sourceImageType.jpg)
Toggle the Image from Stream if exists option to ON:
![Toggle "Image from stream if exists" option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/bgImageFromStreamIfExists.jpg)
Click the Save button:
![Save button](https://www.sliderrevolution.com/wp-content/uploads/2023/08/saveBTNbgImage.jpg)
Images as Layers
Hover over the Add Layer [?]
Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.
Layers are added to slides via the module editor. dropdown menu on the top bar:
![Layers dropdown menu](https://www.sliderrevolution.com/wp-content/uploads/2023/08/addLayerDropDown-1.jpg)
Click on the Image menu option:
![Image layer option in Add Layer dropdown menu](https://www.sliderrevolution.com/wp-content/uploads/2023/08/imageLayerOption.jpg)
Go to the Layer Options tab:
![Layer Options tab](https://www.sliderrevolution.com/wp-content/uploads/2023/08/layerOptionsTab-1.jpg)
Go to the Content sub-section from the right sidebar:
![Content sub-section under Layer options tab](https://www.sliderrevolution.com/wp-content/uploads/2023/08/contentSubSectionLayerOptions.jpg)
Scroll down to the Image Layer Content panel:
![Image Layer Content panel](https://www.sliderrevolution.com/wp-content/uploads/2023/08/imageLayerContentPanel.jpg)
Toggle the Image from Stream if exist option:
![Toggle "Image from stream if exist" option](https://www.sliderrevolution.com/wp-content/uploads/2023/08/layerImageFromStreamIfExists.jpg)
Click the Save button:
![Save button](https://www.sliderrevolution.com/wp-content/uploads/2023/08/saveBTNlayerImage.jpg)
Facebook Media Feed Meta Data
You can display metadata about each Facebook media when you show the media in a slider using the Slider Revolution Plugin. Metadata is information about the media, such as the published date, username, or likes.
You can provide more context and information to your website and visitors by displaying metadata with your media. With Slider Revolution, you can easily choose which metadata to display and customize its appearance to match your website’s style.
Add a Text Layer
Go to the Layer Options tab:
![Layer options tab](https://www.sliderrevolution.com/wp-content/uploads/2023/08/layerOptionsTab-1.jpg)
Hover over the Add Layer option to open the dropdown menu:
![Add Layer dropdown menu](https://www.sliderrevolution.com/wp-content/uploads/2023/08/addLayerDropDown-1.jpg)
Click on the Text layer menu item; you will need to add a new text layer for each metadata:
![Text layer option under Add Layer dropdown menu](https://www.sliderrevolution.com/wp-content/uploads/2023/08/textLayer.jpg)
Meta Data
Select the added text layer from the Timeline [?]
The timeline is the section of the module editor dedicated to animation and controlling the stacking order of layers.
From this part of the editor animations can be added, adjusted and previewed. Additionally, layers can be selected from the timeline, and can be dragged and dropped up and down on the timeline to modify which appear in front and which behind.
It can be equally compared to both a timeline in a typical video editing application, and a layers panel in a typical graphic design application at the bottom of the Module Editor [?]
The "Module Editor" is the tool used to create & modify modules.
Through this visual, drag & drop, no-code interface you can add various types of layers, animation and special FX to your modules, as well as managing slides and configuring options.:
![Text layer in the module Timeline](https://www.sliderrevolution.com/wp-content/uploads/2023/08/selectTextLayerTimeline-1.jpg)
Go to the Text/Button Layer Content panel on the right sidebar:
![Text/Button Layer Content panel](https://www.sliderrevolution.com/wp-content/uploads/2023/08/textButtonLayerContentPanel-2.jpg)
Click the Meta button:
![Meta button](https://www.sliderrevolution.com/wp-content/uploads/2023/08/metaBTNtextLayerContent.jpg)
You will see a popup window with metadata that you can click to add:
![Meta Data popup](https://www.sliderrevolution.com/wp-content/uploads/2023/08/metaDatasPopup.jpg)
Social Basics Meta Data
Click on the Social tab in the MetaData popup:
![Social tab under Meta Data popup](https://www.sliderrevolution.com/wp-content/uploads/2023/08/socialTabMetaPopup.jpg)
Hover over the Username metadata and click on it:
![Username meta data](https://www.sliderrevolution.com/wp-content/uploads/2023/08/usernameMeta-1.jpg)
Click the cross (X) mark from the top right corner of the MetaData popup window:
![Cross mark to close meta data popup](https://www.sliderrevolution.com/wp-content/uploads/2023/08/crossMarkMetasPopup-2.jpg)
Go to the Text/Button Layer Content panel:
![Text/Button Layer Content panel](https://www.sliderrevolution.com/wp-content/uploads/2023/08/textBtnLayerContentPanelUsernameMeta.jpg)
Ensure you are in the Idle text editor window:
![Idle window](https://www.sliderrevolution.com/wp-content/uploads/2023/08/idleWindowUsernameMeta.jpg)
Select and remove any extra content in the window except the {{author_name}}
metadata you have added for a username:
![Author name meta data](https://www.sliderrevolution.com/wp-content/uploads/2023/08/removeExtraContentUsername.jpg)
Click the Save button at the bottom of the module editor:
![Save button](https://www.sliderrevolution.com/wp-content/uploads/2023/08/saveBtnUsernameMeta.jpg)
Facebook Extras Meta Data
Click on the Social tab in the MetaData popup:
![Social tab under meta data popup](https://www.sliderrevolution.com/wp-content/uploads/2023/08/socialTabMetaPopup.jpg)
Scroll down to the Facebook Extras row; there are three metadata, especially for Facebook:
![Facebook Extras meta data](https://www.sliderrevolution.com/wp-content/uploads/2023/08/facebookExtras.jpg)
Hover over the Number of Likes metadata and click on it:
![Number of Likes Meta dataum](https://www.sliderrevolution.com/wp-content/uploads/2023/08/numberOfLikes.jpg)
Click the cross (X) mark from the top right corner of the Meta Data popup window:
![Cross mark to close meta data popup](https://www.sliderrevolution.com/wp-content/uploads/2023/08/crossMarkMetasPopup-2.jpg)
Go to the Text/Button Layer Content panel:
![Text Button Layer Content panel](https://www.sliderrevolution.com/wp-content/uploads/2023/08/textBtnLayerContentLikesMeta.jpg)
Ensure you are in the Idle text editor window:
![Idle window](https://www.sliderrevolution.com/wp-content/uploads/2023/08/idleLikesMeta.jpg)
Select and remove any extra content in the window except the {{likes}}
metadata you have added:
![Likes meta data](https://www.sliderrevolution.com/wp-content/uploads/2023/08/numberOfLikesMetaData.jpg)
Click the Save button at the bottom of the module editor:
![Save button](https://www.sliderrevolution.com/wp-content/uploads/2023/08/saveBtnLikesMetaData.jpg)