Facebook Modules

There are multiple actions one can do when using Facebook and the editor allows you to add modules that behave as each one of those actions. To add a Facebook Module to your page, search for the Social Modules on the top left side of the editor and drag the Module onto the page. When editing, the menu is divided into Content and Styling.

Note: As of February 2018, Facebook no longer supports the Send option and we have removed the Facebook Send module from within the Editor. If you were previously using the Facebook Send module, it is recommended instead to use the Share module (see section 2.2.). 


1. Tips for Facebook

1.1. How to get the URL to a page

The URL of a page can be retrieved from the address field of your browser when you are on a Facebook page. The URL of a page should look like https://www.facebook.com/xxxxxxxx/.

 

1.2. How to get the URL to a post

When looking at a post, find the time stamp that is directly underneath the name of the individual or organization who posted it. By clicking on it, the post should become fullscreen and on the address field you can retrieve the URL to that specific post. 

 

1.3. How to the get the URL to a video

Right click on top of a video and select the option Show Video URL. You can then copy the link to paste wherever it is necessary.

 

2. Content 

2.1. Like

With this module you can motivate people to like a page and see how many people already do, including from their own network.

 

2.1.1. URL To Like

In this section you should add the URL to the page you wish the Like button to work on.

 

2.1.2. Button Layout

There are four button layouts - Standard, Box with Count, Button with Count and Button. You can see a visual representation, in order, on the picture below.

 

2.1.3. Action Type

In this option you can choose whether you wish the users to like the page or recommend it to their networks.

 

2.1.4. Show Friends' Face

When this option is enabled, if a user has friends who have liked the page, a small thumbnail of their profile pictures shows close to the button.

 

2.1.5. Include Share Button

Independently of the layout of the button, it is always possible to add the Share button next to it.

 

2.1.6. Placement

You can choose where to place the button - left, center or right side.

 

2.2. Share

With this module it is possible for people to share a page or a post on their own profiles.

 

2.2.1. URL To Share

In this section you should add the URL to the page or post you want the visitors to share by clicking the button. 

 

2.2.2. Button Layout

There are six button layouts - Box with Count, Button with Count, Button, Icon with Link, Icon and Link. You can see a visual representation, in order, on the picture below.


2.2.3. Placement

You can choose where to place the button - left, center or right side.


2.3. Post

With this module it is possible to display any post, including the Like, Comment and Share buttons.

 

2.3.1. Post URL

Here you should add the URL of the post you wish to display.

 

2.3.2. Post Width

Define how large you want the post to be.

 

2.3.3. Placement

You can choose where to place the button - left, center or right side.

 

2.4. Video

With this module it is possible to display a video, which also includes the Like, Share and Watch Later buttons.

 

2.4.1. Video URL

Here you should add the URL of the video you wish to display.

 

2.4.2. Auto Width

By enabling this option the video will automatically stretch to the width of the column in which it is in.

 

2.4.3. Video Width

Define exactly how large you wish the video to be.

 

2.4.4. Allow Fullscreen

By enabling this option, the visitors will be able to visualize the video fullscreen.

 

2.4.5. Autoplay Video

By enabling this option, the video will play on itself.

 

2.4.6. Placement

You can choose where to place the button - left, center or right side.

 

2.5. Comments

With this module it is possible to open up a comment section on a predefined post. It will only show the comments done on your page but there is still the possibility for people to also add the comment to Facebook.

 

2.5.1. Comments Page URL

Here you should add the URL of any content you wish to open up a comment section about. 

 

2.5.2. Auto Width

By enabling this option the comment section will automatically stretch to the width of the column in which it is in.

 

2.5.3. Comments Box Width

Define exactly how large you wish the comment section to be.

 

2.5.4. Number of Comments to Show

Define how many comments you want to show.

 

2.5.5. Comments Order

Define how you want the comments to be ordered - by newest, oldest or top comments.

 

2.5.6. Placement

You can choose where to place the button - left, center or right side.


2.6. Page Embed

With this module you can embed a Facebook page in your site, with the possibility to show the timeline, send messages and/or see events.


2.6.1. Page URL

By default, the module will show Facebook's own page. Add the page URL of the Facebook page you wish to display in the field. 


2.6.2. Page Embed Height & Width

In these section you can define how large and tall you want the page embed to be. Drag the slider to increase/decrease the values or type them down on the field.


2.6.3. Small Header

By enabling this option, the module will display a smaller header.


2.6.4. Show Friend's Faces

When this option is enabled you can see the pictures of friends who like the page.


2.6.5. Hide Cover

When this option is enabled, the background of the header will be left blank instead of displaying the cover image.


2.6.6. Page Tab to Show

By default, the timeline tab will be selected already. Click on the field to be able to add the Messages and the Events tabs in case you wish to do so.


2.6.7. Placement

You can choose where to place the button - left, center or right side.


3. Styling

3.1. Background

In this section it is possible to choose a solid color for the module background.

 

3.2. Border

Define the module's border color, width, style and radius. 

 

3.3. Spacing

Adjust the spacing of the module, both in terms of margin and padding. 


4. Facebook Modules Global Styling

Instead of individually styling each Facebook Page Embed module it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Social Modules menu. Read more about Social Modules Global Styling here!

 

Anything we’ve not covered?

Contact Us