Facebook Page Element
The Facebook Page Element embeds a public Facebook Page on your site, with its cover photo, profile picture, like button and, if you want, the page’s timeline, events or messages tab. The box looks and behaves the same as on Facebook, including its like button.
It lets visitors follow your latest posts and like your page without leaving your site. The embed is provided by Facebook itself; you choose which parts are shown, how large the box is and where it sits in the column. Nothing has to be copied or kept up to date by hand.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Facebook Page Element
Add the Facebook Page Element to a column and paste the full address of your page into Page URL, for example https://www.facebook.com/yourpage. Set the Dimensions in pixels; the width must be between 180 and 500 pixels. Under Tabs select Timeline, Events and/or Messages.
Choose a Header size and decide whether the Cover Photo, Friends Photos (profile pictures of friends who like the page) and the page’s Call To Action button are shown. On the Design tab set the Margin and the Alignment of the box inside the column.
The content is loaded from Facebook in the visitor’s browser. When Enable Privacy Consent is on in the Privacy section of Global Options, the element shows a placeholder and only loads Facebook after the visitor has agreed. Lazy Load asks Facebook to load the box only when it is about to scroll into view.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Page URL | Enter the URL of the Facebook Page you want to display. |
| Dimensions | Set the element width and height. In Pixels. Width must be set between 180px and 500px. |
| Language | Choose the language the facebook page should be displayed in. |
| Tabs | Select the Facebook tabs you wish to display. |
| Header | Select the header size. |
| Cover Photo | Choose to show or hide the cover photo in the header. |
| Friends Photos | Choose to show or hide profile photos of friends that like the page. |
| Call To Action | Choose to show or hide the custom call to action button of the page. |
| Lazy Load | Enable/Disable lazy loading. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Alignment | Choose how the element should align inside the Column. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Only public Facebook Pages can be embedded. Personal profiles and private groups do not work.
- Turn on Lazy Load when the element sits further down the page, so it does not slow down the first view.
- Loading Facebook sends visitor data to Facebook. Turn on Enable Privacy Consent in Global Options if your privacy policy requires consent first.
- Use Element Sticky Visibility to hide the box while its container is in sticky mode, for example in a sticky header.