Facebook embed documentation

Share facebook videos/posts/comments on your sites to get them to perform even better and get more views. See how Facebook embed can be designed beautifully on Demo Page.

# Facebook embed Package contents

Files Description
jlfacebookembed.yaml Contains the Facebook embed particle settings.

jlfacebookembed.html.twig The Twig file to pull information, settings.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Facebook Embed requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Facebook embed particle (i.e: Home) -> Layout tab -> Drag and drop the Facebook embed Particle from Particles panel (left corner) to the section you want to display the particle.

Settings

Settings Description
URL The absolute URL of the facebook video, post or comment.
Embed Type You can choose from a Video, Post or Comment display.
Full Post Use this option to include the text from the Facebook post associated with the video.
Facebook Video Settings Common settings for Facebook Video Settings
Autoplay Automatically start playing the video when the page loads. The video will be played without sound (muted).
Allow Fullscreen Allow the video to be played in fullscreen mode.
Show Captions Use this option to show captions (if available) by default. Captions are only available on desktop.
Video/Comment Width The pixel width of the embed. Min 220
Facebook Post Settings Common settings for Facebook Post Settings
Width The width of the post. Min. 350 Max 750. Leave empty to use fluid width.
Locales and Languages Languages on Facebook use the format ll_CC, where ll is a two-letter language code, and CC is a two-letter country code. For instance, en_US represents U.S.
CSS Classes CSS class name for the particle.

You can change the language of the Like Button by loading a localized version of the Facebook JavaScript SDK. When you load the SDK, change the value of js.src to use your locale.

Replace en_US with your locale, e.g: fr_FR for French (France). Learn more about Localization

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>