Facebook Feed

To integrate Facebook features into your website or application, you’ll need to configure the Facebook API correctly. We’ve prepared a comprehensive guide to walk you through the setup process, including how to generate access tokens, connect your account, and retrieve data securely.

Please refer to the following documentation for step-by-step instructions:

🔗 Facebook API Integration Guide

The Facebook Feed Widget allows you to add, style, and manage a section displaying Facebook posts from a specific page anywhere on your Elementor-powered page. It’s perfect for showcasing social media content, increasing engagement, and building trust with customizable layouts, styling options, and responsive settings.

Whether you’re designing a business page, community site, or blog, the Facebook Feed Widget helps you integrate your Facebook activity in an engaging and professional manner.

Key Features:

• Display Facebook page posts in a list or grid layout
• Customize the number of posts and display options
• Style post text, images, and interactions (likes, comments, shares)
• Integrate with your Facebook page via API
• Fully responsive and optimized

🚀 How to Enable the Facebook Feed Widget

To start using the Facebook Feed Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Facebook Feed Widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Facebook Feed Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page in the Elementor Editor.
• Search for “Facebook Feed” in the Elementor widget panel.
• Drag and drop the Facebook Feed Widget TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, indicating it’s from the Topper Pack.

Step 2: Configure Facebook Settings

• Under the Content → Facebook Settings section:
  • Set API Type to “Global” or a specific API key if configured.
  • Select Source Type as “Posts” to display posts.
  • Set Display Posts to the number of posts to show (e.g., 10).
  • Toggle Cache Feed to “Yes” and set Cache Time (e.g., in minutes) for performance optimization.

Step 3: Configure Additional Settings

• Under the Content → Additional Settings section:
  • Set Columns to define the layout (e.g., 3 columns).
  • Adjust Gutter Size for spacing between posts.
  • Toggle Show Text, Show Featured Image, Show Author Name, Show Date, Show Like, Show Comment, Show Share, and Show Read More to customize what appears.
  • Set Text Length (e.g., 100 characters) to limit post text.
  • Set Read More Text (e.g., “Read More”) and Link Open Type (e.g., “New Tab”) for read-more links.
  • Upload a Play Icon if desired for video posts.

Step 4: Style the Widget

• Under the Style → General Style section:
  • Set Background Type (e.g., Classic) and customize Background Color.
  • Adjust Border Type, Border Radius, and Box Shadow for the widget container.
• Under the Style → Header, Image, Content, and Footer sections:
  • Customize typography, colors, and spacing for each section as needed.

✅ Final Preview and Save

Once your Facebook Feed Widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.