Masonry Columns Extension

Overview

The Masonry Columns extension allows you to create a masonry style feed for your Facebook posts.

Below is an example of using the Masonry Columns extension.

Screenshot of the Masonry extension for the Custom Facebook Feed plugin

Shortcode used above:

[custom-facebook-feed masonry="true" masonrycols=3]

See the How to use tab above for directions on how to use the extension.

How to use

Installation

Extensions are installed just like any other WordPress plugin. You can follow the same process used when uploading and installing the Custom Facebook Feed Pro plugin.

Choose CSS or JavaScript versions

There is an additional option in the Masonry Columns settings area to choose how the feed is displayed. By default, CSS columns are used to create the feed with a fallback to JavaScript for older browsers. You can choose to use the JavaScript version only by checking the box.

The default CSS layout method displays the post order like this:

1  4  7
2  5  8
3  6  9

And the JavaScript method displays the post order like this:

1  2  3
4  5  6
7  8  9

Shortcode

The Masonry Columns extension allows you set several options for displaying our feed on the “Post Layout” tab on the Settings page or directly in the shortcode:

[custom-facebook-feed masonry=true masonrycols=3 masonrymobilecols=2]

Shortcode Options

Name Attribute Options Description Example
Masonry Feed masonry true
false
Whether or not to apply the masonry columns style to this feed masonry=true
Number of columns masonrycols 3-6 The number of columns for the feed for desktop masonrycols=3
Number of columns for mobile masonrymobilecols 1-2 The number of columns for the feed on mobile displays masonrymobilecols=2

2 Column layout

Note: The extension currently has a minimum of 3 columns but you can change this to be 2 columns by just setting the number of columns to be 2 in the shortcode: masonrycols=2 and then adding the following to the plugin’s Custom CSS section (Facebook Feed > Customize > Misc > Custom CSS):

#cff.cff-masonry.cff-masonry-css.masonry-2-desktop { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; margin: 0; } 
#cff.cff-masonry.masonry-2-desktop .cff-item, #cff.cff-masonry.masonry-2-desktop .cff-likebox{ width: 50%; }

We’ll be adding 2 columns as a setting in the next update.