How to Add a Facebook to Your Website

Easily integrate Facebook content into your website using the Facebook social element. Whether you want to display a Like button, an embedded post, a page feed, or a group, this guide will walk you through the setup and customization.

Adding the Facebook Element

Step 1: Insert the Facebook Element

1. Open your website builder.
2. Go to Add Elements → Scroll down to Social.
3. Select Facebook, then drag and drop it into your desired location on the page.

Facebook Element Options

Once the Facebook element is placed, select it and go to the options toolbar on the left. You have four main display options:

Option 1: Facebook Button (Like & Share)

• Like Button: Allows visitors to like your page or post.
• Recommend Button: Instead of "Like," it displays "Recommend."
• Button Layouts: Choose between button or boxed style (stacked format).
• Advanced Options:
• Small or large size
• Enable or disable the share button

Option 2: Facebook Embed (Posts & Videos)

• Embed a specific post or video from Facebook.
• Paste the post or video link into the embed section.
• Advanced Options:
• Display the full post or a compact preview.

Option 3: Facebook Page Feed

• Show your Facebook Page's timeline, events, or messages.
• Paste your Facebook Page URL.
• Layout Options:
• Display Timeline, Events, or Messages in the embedded feed.
• Advanced Options:
• Adjust width to control feed size.

Option 4: Facebook Group Display

• Embed a Facebook Group into your website.
• Paste the Group URL to display its content.
• Skin Options:
• Light or Dark theme for better integration with your design.
• Advanced Settings:
• Enable or disable social content and metadata.

Customizing the Facebook Element

Step 2: Adjust Layout & Appearance

• Resize the Element
• Adjust the width to fit your design.
• Allow some time for Facebook to render the changes.

• Modify Background & Alignment
• Add a background color for better visibility.
• Align the element to the left, center, or right.

• Styling Effects & Animations
• Apply shadows, borders, or hover effects.
• Use scroll animations for interactive engagement.

Optimizing for Mobile & Tablet

Step 3: Check Responsiveness

• Switch to tablet & mobile view in the editor.
• Adjust the size and spacing if needed.
• The Facebook Button, Feed, and Embed elements are mobile-friendly by default.

Why Use a Facebook?

• Increases Engagement – Lets visitors interact with your Facebook content directly.
• Live Updates – Automatically pulls the latest posts, videos, or events.
• Boosts Social Proof – Showcases your active community and page interactions.
• Customizable & Responsive – Works across all devices with easy styling options.

By following these steps, you can seamlessly integrate Facebook into your website and enhance user engagement.