Note: Take a look at the demo page we have set up for Facebook Design Element and see it in action by following our demo page.
Selecting the Facebook Design Element will open its Settings tab allowing
In the Settings tab of the Facebook Design Element, you can see options that would let you customize how you want the Facebook page feed look like on your page.
Facebook page URL
To add Facebook page feed to your SharePoint page, you need to get its URL first:
Copy and paste the URL of the page you want to embed from the address bar of your browser.:
Use this option to select what tabs should your embedded Facebook show. By default, the timeline is selected, but you can also add events to display upcoming Facebook events and/or messages in order for your viewers to be able to contact you directly from the embedded element. Make sure to separate the tabs with a comma.
Here is how it may look like on your page:
Default - timeline - tab only
Multiple tabs selected
The following four customization options will help you to reduce the size of the Facebook Design Element as well as improve the page loading time:
To enable any option mentioned, use the toggle switcher.
Use this option to hide the cover photo of the page. You can check the difference in the table below:
Cover is Displayed (Default)
Cover is Hidden
This option will hide the list of profile photos of your Facebook friends who liked the embedded page.
Hide call to action
This option will hide the custom call-to-action button if this button was previously configured by the Facebook page admin. Instead, the default call-to-action button will be displayed - Share button.
Call to action is Displayed (Default)
Custom call to action is Hidden -
Share button is displayed
Having this option enabled, you will reduce the size of the header.
The following set of options allows you to control the size and responsiveness of the Facebook Design Element:
- Adapt to container width. This option is enabled by default. It will resize the Facebook ShortPoint Design Element to fit inside its parent container, in case it's smaller than the embedded element. If the parent container is larger than the element, it will not be resized provided that a specific Width has been selected.
- The Width and Height determine the width and height of the Facebook Design Element in pixels respectively. Simply use the slider to set the value or type it in the input field on the right. The embedded element has some limitations imposed by Facebook:
- the Width is supposed to have a value between 180 and 500 pixels,
- the Height is supposed to be between 70 pixels with the Small header option enabled, or 130 pixels otherwise, and a maximum value of 1600 pixels.
Note: The default values for both Width and Height are set to 400 pixels the first time the Settings tab is opened.