Effortlessly engage your audience with our advanced Facebook Integration Modules for Divi, crafted to seamlessly embed Facebook functionalities into your website. Whether you want to showcase your Facebook page, encourage likes, or facilitate easy content sharing, these powerful modules offer extensive customization options and responsive design. Tailored to align with your brand identity and audience preferences, our solution ensures a smooth integration of Facebook’s dynamic features, enhancing user interaction while preserving the aesthetic integrity of your site. Elevate your online presence with social connectivity, driving more engagement and visibility with ease.

In this documentation, we'll dive into the various settings available of the facebook modules, and how you can customize these settings to create visually consistent and professionally designed facebook layouts.

Facebook Page

The DG Facebook Page Module offers seamless integration for embedding a Facebook page directly on your website. This documentation provides a detailed, user-friendly guide for configuring and styling the module to align with your design needs and functionality requirements.

Module Setup: Inserting the Facebook Page Module

  1. Insert Module: Add the DG Facebook Page module to your page by selecting it from the module options.
  2. Accessing Settings: Once inserted, navigate to the Content tab. Here you’ll find key settings organized into the following sections:
    • FB Page Settings: Configure the Facebook page URL and display settings.
    • Configuration: Customize width, tabs, and visibility options.
    • Background: Adjust background colors or images to enhance visual integration.
    • Admin Label: Rename the module for internal organization purposes.

FB Page Settings: Adding Your Facebook Page

  1. Insert Facebook Page URL:

    • Navigate to FB Page Settings.
    • Locate the Facebook Page URL field.
    • Insert the complete URL of the Facebook page you wish to display.

  2. Adjusting Page Height:

    • Still in FB Page Settings, find the Height field.
    • Enter the desired height or use the slider to adjust for an optimal display.

Configuration: Advanced Display Customizations

1. Adjusting Width

  • Go to Configuration settings and locate the Width field.
  • Specify a custom width or adjust as necessary to fit your layout.

2. Displaying Facebook Page Events

  • In Configuration, navigate to the Facebook Tabs field.
  • Select Events to display any upcoming or past events linked to your Facebook page.

3. Enabling User Messaging

  • Within Configuration, locate the Facebook Tabs dropdown.
  • Select Messages to allow users to send direct messages via the Facebook page module.

4. Displaying Followers’ Profile Pictures

  • In Configuration, toggle Show Face Pile to YES to showcase your page’s followers.

5. Hiding the Cover Picture

  • To simplify the display, set Hide Cover Picture to YES in Configuration.

6. Compact Header with Like Button Display

  • To display a small header featuring a Like button under the page title, go to Configuration and set Display Small Header to YES.

7. Hiding CTA and Enabling Share Button

  • In the Configuaration settings, set Hide CTA to YES to replace the CTA button with a share button.

8. Enabling Lazy Loading

  • Enable Lazy Loading by going to Configuration and setting it to YES to optimize page performance.

Design Tab: Customizing Alignment and Visual Styling

To adjust the positioning of the Facebook page module within your design:

  1. Change Alignment:
    • Go to the Design tab.
    • Locate Alignment settings.
    • Choose from available alignment options to best fit your page layout.

This DG Facebook Page Module documentation provides everything needed for effortless setup, customization, and optimization. Explore each setting to fully leverage the module’s capabilities for a smooth Facebook integration.

 

Facebook Like Module

The DG Facebook Like Module enables you to add a highly customizable Facebook Like button to your webpage, allowing users to like or recommend your content directly from your site. This documentation provides detailed, user-friendly guidance for configuring and enhancing the Like button module to meet your design and functionality needs.

Module Setup: Inserting the Facebook Like Module

  1. Insert Module: Begin by adding the DG Facebook Like module to your page.
  2. Accessing Settings: Once added, navigate to the Content tab. Here, you’ll find a variety of options for personalizing the module:
    • FB Content Settings: Configure URL settings and lazy loading.
    • Like Button: Customize the button style, layout, and additional display options.
    • Background: Adjust background colors for visual integration.
    • Admin Label: Rename the module for easy identification.

FB Content Settings: Configuring the Like Module’s URL and Color Scheme

  1. Setting the Share Button URL:

    • Navigate to FB Content Settings.
    • In the Page URL field, insert the URL of the page where you’ve added the module.
      Note: Only required if the Share Button option is enabled (see Step 8).

  2. Enabling Lazy Loading:

    • In FB Content Settings, set Enable Lazy Loading to YES to optimize page performance by delaying loading until needed.

  3. Selecting a Color Scheme:

    • Change the button color from Light to Dark (or vice versa) by adjusting the Color Scheme setting within FB Content Settings.

Like Button Settings: Button Type, Layout, Size, and Share Display

  1. Selecting the Action Type:

    • Go to Like Button settings within the Content tab.
    • Under Action Type, choose between the Like or Recommend button options.

  2. Changing Button Layout:

    • In Like Button settings, go to Layout and select from four available layouts: Standard, Button, Button Count, and Box.

  3. Adjusting Button Size:

    • Within Like Button settings, go to Button Size.
    • Choose between Small or Large for the button size.

  4. Displaying the Share Button:

    • If you want to include the Share button alongside the Like/Recommend button, navigate to Like Button settings.
    • Set Display Share Button to YES.

Design Tab: Customizing Button Alignment

  1. Aligning the Button:
    • Go to the Like Button tab and locate the Alignment settings.
    • Select the alignment option that best suits your page layout.

This comprehensive guide covers all configuration and customization settings for the DG Facebook Like Module, making it easy to enhance user engagement directly from your site. Explore each setting to fully optimize the module for a seamless, engaging user experience.

Facebook Share Module

The DG Facebook Share Module allows you to embed a customizable Facebook Share button directly onto your webpage, enabling visitors to easily share your content on their Facebook accounts. This documentation provides a comprehensive guide for configuring and personalizing the Share button for an optimal user experience and seamless integration.

Module Setup: Inserting the Facebook Share Module

  1. Insert Module: Add the DG Facebook Share module to your page from the module selection menu.
  2. Accessing Settings: Upon insertion, go to the Content tab to access settings for personalizing the module:
    • FB Content Settings: Configure the URL and enable lazy loading.
    • Share Button: Adjust the button layout and size.
    • Background: Customize the background to match your design.
    • Admin Label: Rename the module for internal tracking and organization.

FB Content Settings: Configuring the Share Button URL

  1. Setting the Share Button URL:
    • Navigate to FB Content Settings.
    • In the Page URL field, enter the URL of the page where the module is used. This URL will display on users' Facebook accounts when they share the page.

Share Button Settings: Layout, Size, and Display Options

  1. Changing the Share Button Layout:

    • Go to Share Button settings in the Content tab.
    • Under Layout, select from three layout options: Button, Button Count, or Box Count to match the style of your website.

  2. Adjusting the Button Size:

    • In the Share Button settings, locate Button Size.
    • Choose either Small or Large to set the size of the Share button as per your design requirements.

  3. Enabling Lazy Loading:

    • To improve performance, enable Lazy Loading by navigating to the Share Button settings and setting it to YES.

Share Button Alignment: Customizing Placement on the Page

  1. Adjusting Alignment:
    • Go to the Share Button tab, then to Alignment.
    • Choose an alignment option that best fits the module within your page layout.

This documentation provides step-by-step instructions to set up and customize the DG Facebook Share Module, making it easy to create an engaging, user-friendly social sharing experience on your site.